123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- import { Spoiler } from "../Other/Spoiler";
- import {
- backURL,
- validateEmail,
- validatePassword,
- validateNickname,
- } from "../../helpers/index";
- import { CMyDropzone } from "../Other/Dropzone";
- import { Form, Alert, Row, Col, Button } from "react-bootstrap";
- import { useState } from "react";
- import { connect } from "react-redux";
- import { CUserInfo } from "./UserInfo";
- import { CPreloader } from "../Other/Preloader";
- import {
- actionSetNickname,
- actionSetEmail,
- actionSetNewPassword,
- } from "./../../actions/types";
- const MyProfile = ({
- id,
- auth,
- promise,
- emailUpdate,
- nickUpdate,
- changePassword,
- }) => {
- const [login, setLogin] = useState("");
- const [nick, setNickname] = useState("");
- const [password, setPassword] = useState("");
- const [newPassword, setNewPassword] = useState("");
- const [passwordShown, setPasswordShown] = useState(false);
- return (
- <div className="ProfilePage">
- <CPreloader
- promiseName={`${
- id === auth?.payload?.sub?.id ? "myUser" : "anotherUser"
- }`}
- promiseState={promise}
- children={<CUserInfo id={id} />}
- />
- {id === auth?.payload?.sub?.id ? (
- <div className="d-block mx-auto mt-2 container w-50">
- <h1>
- Редактирование профиля:{" "}
- {promise?.myUser?.payload?.nick
- ? promise?.myUser?.payload?.nick
- : "user"}
- </h1>
- <Spoiler
- children={
- <>
- <br />
- <form
- action="/upload"
- method="post"
- encType="multipart/form-data"
- id="form"
- className="text-center"
- >
- <img
- className="avatarProfile"
- src={
- promise?.myUser?.payload?.avatar
- ? `${backURL}/${promise.myUser.payload.avatar.url}`
- : "https://i.ibb.co/bBxzmTm/default-avatar.jpg"
- }
- alt="Avatar"
- />
- <CMyDropzone />
- </form>
- </>
- }
- header={<h3>Изменить аватар</h3>}
- />
- <Spoiler
- children={
- <>
- <br />
- <Form>
- {promise?.myUser?.payload?.nick === nick ? (
- <Alert>Никнейм не должен повторяться с предыдущим.</Alert>
- ) : null}
- {validateNickname(nick) ? null : (
- <Alert>
- Никнейм может состоять только из строчных букв и цифр,
- символы - и _, а так же иметь длину от 3 до 8 символов.
- </Alert>
- )}
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalEmail"
- >
- <Form.Label column sm={5}>
- Ваш никнейм:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type="text"
- placeholder="Ваш текущий никнейм"
- value={
- promise?.myUser?.payload?.nick
- ? promise?.myUser?.payload?.nick
- : "Никнейм не установлен"
- }
- disabled
- />
- </Col>
- </Form.Group>
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalEmail"
- >
- <Form.Label column sm={5}>
- Новый никнейм:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type="text"
- placeholder="Введите ваш новый никнейм"
- value={nick}
- max="8"
- onChange={(e) => setNickname(e.target.value)}
- />
- </Col>
- </Form.Group>
- <Form.Group as={Row} className="mb-3">
- <Col sm={{ span: 10, offset: 2 }} className="my-3">
- <Button
- variant="success"
- disabled={
- promise?.myUser?.payload?.nick !== nick &&
- validateNickname(nick)
- ? false
- : true
- }
- onClick={() =>
- nickUpdate({
- _id: promise?.myUser?.payload?._id,
- nick,
- })
- }
- >
- Сохранить
- </Button>
- </Col>
- </Form.Group>
- </Form>
- </>
- }
- header={<h3>Изменить никнейм</h3>}
- />
- <Spoiler
- children={
- <>
- <br />
- <Form>
- {promise?.myUser?.payload?.login === login ? (
- <Alert>Email не должен повторяться с предыдущим.</Alert>
- ) : null}
- {validateEmail(login) ? null : (
- <Alert>Email должен быть в формате: email@gmail.com.</Alert>
- )}
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalEmail"
- >
- <Form.Label column sm={5}>
- Ваша почта:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type="text"
- placeholder="Ваша текущая почта"
- value={promise?.myUser?.payload?.login}
- disabled
- />
- </Col>
- </Form.Group>
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalEmail"
- >
- <Form.Label column sm={5}>
- Новая почта:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type="text"
- placeholder="Введите вашу новую почту"
- value={login}
- onChange={(e) => setLogin(e.target.value)}
- />
- </Col>
- </Form.Group>
- <Form.Group as={Row} className="mb-3">
- <Col sm={{ span: 10, offset: 2 }} className="my-3">
- <Button
- variant="success"
- disabled={
- validateEmail(login) &&
- promise?.myUser?.payload?.login !== login
- ? false
- : true
- }
- onClick={() =>
- emailUpdate({
- _id: promise?.myUser?.payload?._id,
- login,
- })
- }
- >
- Сохранить
- </Button>
- </Col>
- </Form.Group>
- </Form>
- </>
- }
- header={<h3>Изменить почту</h3>}
- />
- <Spoiler
- children={
- <>
- <br />
- <Form>
- {password.length !== 0 ? null : (
- <Alert>
- Пожалуйста, введите свой текущий пароль в первое поле для
- изменения пароля.
- </Alert>
- )}
- {validatePassword(newPassword) ? null : (
- <Alert>
- Новый пароль должен быть от 6 символов, иметь хотя бы одну
- цифру и заглавную букву.
- </Alert>
- )}
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalPassword"
- >
- <Form.Label column sm={5}>
- Пароль:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type={passwordShown ? "text" : "password"}
- placeholder="Введите ваш текущий пароль"
- onChange={(e) => setPassword(e.target.value)}
- />
- <Button
- className="mt-2"
- variant="secondary"
- onClick={() => setPasswordShown(!passwordShown)}
- >
- {`${passwordShown ? "Скрыть" : "Показать"} пароль`}
- </Button>
- </Col>
- </Form.Group>
- <Form.Group
- as={Row}
- className="m-2"
- controlId="formHorizontalPassword"
- >
- <Form.Label column sm={5}>
- Новый пароль:
- </Form.Label>
- <Col sm={10}>
- <Form.Control
- type={passwordShown ? "text" : "password"}
- placeholder="Введите ваш новый пароль"
- onChange={(e) => setNewPassword(e.target.value)}
- />
- </Col>
- </Form.Group>
- <Form.Group as={Row} className="mb-3">
- <Col sm={{ span: 10, offset: 2 }} className="my-3">
- <Button
- variant="success"
- disabled={validatePassword(newPassword) ? false : true}
- onClick={() =>
- changePassword(
- promise?.myUser?.payload?.login,
- password,
- newPassword
- )
- }
- >
- Сохранить
- </Button>
- </Col>
- </Form.Group>
- </Form>
- </>
- }
- header={<h3>Изменить пароль</h3>}
- />
- </div>
- ) : null}
- <div className="container" style={{ height: "300px" }}></div>
- </div>
- );
- };
- export const CMyProfile = connect(
- (state) => ({ auth: state.auth, promise: state.promise }),
- {
- emailUpdate: actionSetEmail,
- nickUpdate: actionSetNickname,
- changePassword: actionSetNewPassword,
- }
- )(MyProfile);
|