import React, {Component} from 'react';
import {Button, Card, Elevation, FormGroup, InputGroup, Tooltip} from "@blueprintjs/core";
import classes from "../regByPhone/regByPhone.module.scss";
import {Layout} from "../common";
import classesCommon from "../common/common.module.scss";
import {Link} from "react-router-dom";
import {gql, useLazyQuery} from "@apollo/client";
class Login extends Component {
constructor(props, context) {
super(props, context);
this.state = {
phone: "",
password: "",
formErrorText: ""
};
}
handleLoginPhoneInput({target: {value: phone}}) {
this.setState({phone});
};
handleLoginLockClick() {
this.setState((prevState) => ({
showPassword: !prevState.showPassword,
}));
};
render() {
const {showPassword, phone, password, isFormNotValid} = this.state,
{onAuth} = this.props;
return (
<Layout>
<Card elevation={Elevation.TWO} className={classesCommon.card}>
<FormGroup helperText={this.state.phoneErrorText}>
<InputGroup
className={classes.phone_input}
large
placeholder="Введите Ваш номер телефона"
value={phone}
onChange={this.handleLoginPhoneInput.bind(this)}
maxLength={11}
/>
</FormGroup>
<FormGroup helperText={this.state.passwordErrorText}>
<InputGroup
className={classes.pass_input}
large
placeholder="Введите пароль"
rightElement={<LockButton showPassword={showPassword} onClick={this.handleLoginLockClick.bind(this)}/>}
type={showPassword ? "text" : "password"}
value={password}
onChange={this.handleLoginPasswordInput.bind(this)}
/>
</FormGroup>
<p>{this.state.formErrorText}</p>
<Link to="/registration-by-phone">Регистрация</Link>
<LoginButton phone={phone} password={password} isFormNotValid={isFormNotValid} onAuth={onAuth}/>
</Card>
</Layout>
);
}
}
const LOGIN = gql`
query login($login: String!, $pwd: String!) {
login(login: $login, pwd: $pwd) {
id, userName, surname, firstname, middlename, email, phone
}
}
`;
function LoginButton({phone, password, isFormNotValid, onAuth}) {
const [getLogin, {loading, data}] = useLazyQuery(LOGIN, {variables: {login: phone, pwd: password}});
if (data?.login != null) {
onAuth(data.login)
}
return <Button
className={classes.enter}
large
disabled={isFormNotValid}
onClick={getLogin}
>
Войти
</Button>
}
export default Login;
Простой
