simle-chat

1
import { useRef, useEffect } from 'react';
2
import {
3
  Button, FloatingLabel, Form,
4
} from 'react-bootstrap';
5
import { useSelector, useDispatch } from 'react-redux';
6
import { useNavigate } from 'react-router-dom';
7
import { useTranslation } from 'react-i18next';
8
import { useFormik } from 'formik';
9
import { toast } from 'react-toastify';
10
import axios from 'axios';
11

12
import useAuth from '../../hooks/index';
13
import getError from '../../selectors/authSelectors';
14
import { actions as authActions } from '../../slices/authSlice';
15
import routes from '../../routes';
16
import logo from '../../assets/logo800-800.png';
17

18
const Login = () => {
19
  const dispatch = useDispatch();
20
  const navigate = useNavigate();
21
  const { t } = useTranslation();
22
  const passwordRef = useRef(null);
23
  const usernameRef = useRef();
24
  const { user, logIn } = useAuth();
25

26
  const error = useSelector(getError);
27

28
  const formik = useFormik({
29
    initialValues: { username: '', password: '' },
30
    onSubmit: async (values, { setSubmitting }) => {
31
      setSubmitting(true);
32
      try {
33
        const response = await axios.post(routes.loginRequestPath(), values);
34
        logIn(response.data);
35
        navigate(routes.chatPagePath());
36
      } catch (e) {
37
        console.error(e);
38
        if (!e.isAxiosError) {
39
          toast.error(t('toasts.auth.unknownErr'));
40
        } else if (e.response.status === 401) {
41
          dispatch(authActions.loginFailed(e.response.data));
42
        } else {
43
          toast.error(t('toasts.auth.networkErr'));
44
        }
45
      }
46
      setSubmitting(false);
47
    },
48
  });
49

50
  useEffect(() => {
51
    if (user) navigate(routes.chatPagePath());
52
    if (!user) usernameRef.current.focus();
53
  }, [user, navigate, usernameRef]);
54

55
  return (
56
    !user && (
57
    <div className="container-fluid h-100">
58
      <div className="row justify-content-center align-content-center h-100">
59
        <div className="col-12 col-md-8 col-xxl-6">
60
          <div className="card shadow-sm">
61
            <div className="card-body row p-5">
62
              <div className="col-12 col-md-6 d-flex align-items-center justify-content-center position-relative">
63
                <img src={logo} alt="Simple Chat" className="rounded-circle" style={{ width: 200, height: 200 }} />
64
              </div>
65
              <Form className="col-12 col-md-6 mt-3 mt-mb-0" onSubmit={formik.handleSubmit}>
66
                <h1 className="text-center mb-4">{t('authorization.login.title')}</h1>
67
                <Form.Group>
68
                  <FloatingLabel
69
                    htmlFor="usernameInput"
70
                    controlId="username"
71
                    label={t('authorization.login.inputName.label')}
72
                    className="mb-3"
73
                  >
74
                    <Form.Control
75
                      type="text"
76
                      name="username"
77
                      placeholder={t('authorization.login.inputName.placeholder')}
78
                      autoComplete="username"
79
                      required
80
                      ref={usernameRef}
81
                      value={formik.values.username}
82
                      onChange={formik.handleChange}
83
                    />
84
                  </FloatingLabel>
85
                </Form.Group>
86
                <Form.Group>
87
                  <FloatingLabel htmlFor="passwordInput" controlId="password" label={t('authorization.login.inputPass.label')} className="mb-4">
88
                    <Form.Control
89
                      type="password"
90
                      name="password"
91
                      placeholder={t('authorization.login.inputPass.placeholder')}
92
                      className="form-control"
93
                      autoComplete="current-password"
94
                      required
95
                      ref={passwordRef}
96
                      value={formik.values.password}
97
                      onChange={formik.handleChange}
98
                      isInvalid={!!error}
99
                    />
100
                    <Form.Control.Feedback type="invalid" tooltip>{t('authorization.login.errors.invalidNameOrPass')}</Form.Control.Feedback>
101
                  </FloatingLabel>
102
                </Form.Group>
103

104
                <Button type="submit" variant="outline-primary" className="w-100 mb-3">
105
                  {t('authorization.login.button')}
106
                </Button>
107
              </Form>
108
            </div>
109
            <div className="card-footer p-4">
110
              <div className="text-center">
111
                <span>{t('authorization.login.footer.text')}</span>
112
                <a href="/signup">{t('authorization.login.footer.link')}</a>
113
              </div>
114
            </div>
115
          </div>
116
        </div>
117
      </div>
118
    </div>
119
    )
120
  );
121
};
122

123
export default Login;
124