React
- 1 ответ
- 0 вопросов
1
Вклад в тег
class LoginForm {
public login: any; // по хорошему перенести сюда всю логику определения поля с валидацией
public password: any; // по хорошему перенести сюда всю логику определения поля с валидацией
public handleSubmit: any;
constructor(form) {
this.init(form);
}
init = (form) => {
this.login = form.register("login");
this.password = form.register("password", { required: true, minLength: 2 });
this.handleSubmit = form.handleSubmit(this.#onSubmit);
};
#onSubmit = async (data: any) => {
const api = useContext(ApiContext).authApi; // ERROR
const userService = useContext(UserContext);
let navigate = useNavigate();
try {
const usr = await api.login(data);
console.log(usr);
userService.User = new UserModel(usr);
navigate("/");
} catch (Exception) {
alert("не подходит");
}
};
}
function LoginComponent() {
const form = useForm();
const loginForm = new LoginForm(form);
return (
<div className="col-md-offset-3 col-md-6">
<form className="form-horizontal" onSubmit={loginForm.handleSubmit}>
<h4>Use a local account to log in.</h4>
<hr />
<div className="form-group row">
<label className="col-md-2 control-label" htmlFor="login">
Login, Email or Phone
</label>
{
<div className="col-md-10">
<input className="form-control" {...loginForm.login} />
</div>
}
</div>
<div className="form-group row">
<label className="col-md-2 control-label" htmlFor="password">
Password
</label>
{
<div className="col-md-10">
<input className="form-control" {...loginForm.password} />
</div>
}
</div>
<div className="form-group row">
<div className="col-md-offset-2 col-md-10">
<button className="btn btn-primary">Log in</button>
</div>
</div>
</form>
</div>
);
}
export default LoginComponent;