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
import * as yup from 'yup';
12

13
import useAuth from '../../hooks/index';
14
import getError from '../../selectors/authSelectors';
15
import { actions as authActions } from '../../slices/authSlice';
16
import routes from '../../routes';
17

18
import logo from '../../assets/logo800-800.png';
19

20
const getValidationSchema = (t) => yup.object({
21
  username: yup.string().trim()
22
    .min(3, t('validationError.wronglengthName'))
23
    .max(20, t('validationError.wronglengthName'))
24
    .required(t('validationError.requiredField')),
25
  password: yup.string()
26
    .min(6, t('validationError.wronglengthPass'))
27
    .required(t('validationError.requiredField')),
28
  confirmPassword: yup.string()
29
    .oneOf([yup.ref('password'), null], t('validationError.invalidPassConfirm')),
30
});
31

32
const SignUp = () => {
33
  const dispatch = useDispatch();
34
  const navigate = useNavigate();
35
  const { t } = useTranslation();
36
  const usernameRef = useRef();
37
  const passwordRef = useRef();
38
  const confirmPassword = useRef();
39
  const { user, logIn } = useAuth();
40

41
  const error = useSelector(getError);
42

43
  const formik = useFormik({
44
    initialValues: { username: '', password: '', confirmPassword: '' },
45
    validationSchema: getValidationSchema(t),
46
    onSubmit: async (values, { setSubmitting }) => {
47
      setSubmitting(true);
48
      try {
49
        const response = await axios.post(routes.signupRequestPath(), values);
50
        logIn(response.data);
51
        navigate(routes.chatPagePath());
52
      } catch (e) {
53
        console.error(e);
54
        if (!e.isAxiosError) {
55
          toast.error(t('toasts.auth.unknownErr'));
56
        } else if (e.response.status === 409) {
57
          dispatch(authActions.loginFailed(e.response.data));
58
        } else {
59
          toast.error(t('toasts.auth.networkErr'));
60
        }
61
      }
62
      setSubmitting(false);
63
    },
64
  });
65

66
  useEffect(() => {
67
    if (user) navigate(routes.chatPagePath());
68
    if (!user) usernameRef.current.focus();
69
  }, [user, navigate, usernameRef]);
70

71
  return (
72
    <div className="container-fluid h-100">
73
      <div className="row justify-content-center align-content-center h-100">
74
        <div className="col-12 col-md-8 col-xxl-6">
75
          <div className="card shadow-sm">
76
            <div className="card-body d-flex flex-column flex-md-row justify-content-around align-items-center p-5">
77
              <div>
78
                <img src={logo} alt="Simple Chat" className="rounded-circle" style={{ width: 200, height: 200 }} />
79
              </div>
80
              <Form className="w-50" onSubmit={formik.handleSubmit}>
81
                <h1 className="text-center mb-4">{t('authorization.signUp.title')}</h1>
82
                <Form.Group>
83
                  <FloatingLabel
84
                    htmlFor="username"
85
                    controlId="username"
86
                    label={t('authorization.signUp.inputName.label')}
87
                    className="mb-3"
88
                  >
89
                    <Form.Control
90
                      type="text"
91
                      name="username"
92
                      placeholder={t('authorization.signUp.inputName.placeholder')}
93
                      autoComplete="username"
94
                      ref={usernameRef}
95
                      required
96
                      value={formik.values.username}
97
                      onChange={formik.handleChange}
98
                      isInvalid={!!formik.errors.username || !!error}
99
                    />
100
                    <Form.Control.Feedback type="invalid" tooltip>{formik.errors.username}</Form.Control.Feedback>
101
                  </FloatingLabel>
102
                </Form.Group>
103
                <Form.Group>
104
                  <FloatingLabel htmlFor="password" controlId="password" label={t('authorization.signUp.inputPass.label')} className="mb-3">
105
                    <Form.Control
106
                      type="password"
107
                      name="password"
108
                      placeholder={t('authorization.signUp.inputPass.placeholder')}
109
                      autoComplete="new-password"
110
                      required
111
                      ref={passwordRef}
112
                      value={formik.values.password}
113
                      onChange={formik.handleChange}
114
                      isInvalid={!!formik.errors.password || !!error}
115
                    />
116
                    <Form.Control.Feedback type="invalid" tooltip>{formik.errors.password}</Form.Control.Feedback>
117
                  </FloatingLabel>
118
                </Form.Group>
119
                <Form.Group>
120
                  <FloatingLabel htmlFor="confirmPassword" controlId="confirmPassword" label={t('authorization.signUp.inputConfirmPass.label')} className="mb-4">
121
                    <Form.Control
122
                      type="password"
123
                      name="confirmPassword"
124
                      placeholder={t('authorization.signUp.inputConfirmPass.placeholder')}
125
                      autoComplete="current-password"
126
                      required
127
                      ref={confirmPassword}
128
                      value={formik.values.confirmPassword}
129
                      onChange={formik.handleChange}
130
                      isInvalid={!!formik.errors.confirmPassword || !!error}
131
                    />
132
                    <Form.Control.Feedback type="invalid" tooltip>{(formik.errors.confirmPassword || t('validationError.thisUserExists'))}</Form.Control.Feedback>
133
                  </FloatingLabel>
134
                </Form.Group>
135
                <Button type="submit" variant="outline-primary" className="w-100 mb-3">
136
                  {t('authorization.signUp.button')}
137
                </Button>
138
              </Form>
139
            </div>
140
          </div>
141
        </div>
142
      </div>
143
    </div>
144
  );
145
};
146

147
export default SignUp;
148