eq
3 years ago in JavaScript
import React, {useEffect, useState} from "react";
import {Link} from "react-router-dom";
import {useMessage} from "../hooks/message.hook";
import {useHttp} from "../hooks/http.hook";
export const RegisterPage = () => {
const {loading, error, request, clearError} = useHttp()
const message = useMessage();
const [username, setUsername] = useState( '')
const [password, setPassword] = useState( '')
const [role, setRole] = useState( '')
const registerHandler = async () => {
try{
console.log(username, password)
const data = await request('/api/create/register', 'POST', {username: username, password: password, role: role})
message(data.message)
console.log('Data', data)
}
catch (e){
}
}
useEffect(() => {
message(error);
clearError()
},[error, message, clearError])
useEffect(() => {
window.M.updateTextFields()
}, [])
return(
<div className="row">
<div className="col s6 offset-s3">
<h1 style={{textAlign:"center"}}>РОССЕТИ</h1>
<div className="card text-darken-1 black-text">
<div className="card-content black-text">
<span className="card-title" style={{textAlign:"center"}}>Регистрация</span>
<div>
<div className="input-field">
<input placeholder="Введите имя пользователя"
id="username"
type="text"
name="username"
className="red-input"
onChange={e => setUsername(e.target.value)}
/>
<label htmlFor="username">Имя пользователя</label>
</div>
<div className="input-field">
<input placeholder="Введите пароль"
id="password"
type="password"
name="password"
className="red-input"
onChange={e => setPassword(e.target.value)}
/>
<label htmlFor="password">Пароль</label>
</div>
<div className="input-field">
<input placeholder="Введите код должности"
id="role"
type="text"
name="role"
className="red-input"
onChange={e => setRole(e.target.value)}
/>
<label htmlFor="password">Код должности</label>
</div>
</div>
</div>
<div className="card-action">
<button className="btn white darken-4"
style={{marginRight: 10, color:"black"}}
onClick={registerHandler}
disabled={loading}
>Зарегестрироваться
</button>
<button className="btn white lighten-1"
>
<Link to="/auth" className="linked">Вернуться</Link>
</button>
</div>
</div>
</div>
</div>
)
}