525 implement ability to change password

FrontEnd/src/components/ProfilePage/FormComponents/ChangePassword.js

@@ -0,0 +1,104 @@
+import axios from 'axios';
+import { PropTypes } from 'prop-types';
+import { toast } from 'react-toastify';
+import { useState, useEffect } from 'react';
+import { useContext } from 'react';
+import { DirtyFormContext } from '../../../context/DirtyFormContext';
+import PasswordField from './FormFields/PasswordField';
+import Loader from '../../loader/Loader';
+import css from './ChangePassword.module.css';
+import { PASSWORD_PATTERN } from '../../../constants/constants';
+
+
+export default function ChangePassword(props) {
+    const [formData, setFormData] = useState({ currentPassword: '', newPassword: '', reNewPassword: '' });
+    const [passwordsDontMatchError, setPasswordsDontMatchError] = useState(null);
+    const [invalidPasswordError, setInvalidPasswordError] = useState(null);
+    const { setFormIsDirty } = useContext(DirtyFormContext);
+
+    useEffect(() => {
+        props.currentFormNameHandler(props.curForm);
+    }, [props]);
+
+    useEffect(() => {
+        setFormIsDirty(Object.keys(formData).some((field) => formData[field] !== ''));
+    }, [formData]
+    );
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!invalidPasswordError && !passwordsDontMatchError) {
+            axios.post(`${process.env.REACT_APP_BASE_API_URL}/api/auth/users/set_password/`, {
+                current_password: formData.currentPassword,
+                new_password: formData.newPassword,
+                re_new_password: formData.reNewPassword
+            })
+                .then(() => toast.success('Пароль успішно змінено'))
+                .catch(() => toast.error('Виникла помилка. Можливо, вказано невірний поточний пароль'));
+            setFormData({ currentPassword: '', newPassword: '', reNewPassword: '' });
+        }
+    };
+
+    const handleInputChange = (e) => {
+        e.preventDefault();
+        const updatedFormData = { ...formData, [e.target.name]: e.target.value };
+        setFormData(updatedFormData);
+        (updatedFormData.newPassword !== '' &&
+        !PASSWORD_PATTERN.test(updatedFormData.newPassword)) ?
+            setInvalidPasswordError('Пароль не відповідає вимогам') :
+            setInvalidPasswordError(null);
+        (updatedFormData.reNewPassword !== '' &&
+        updatedFormData.newPassword !== updatedFormData.reNewPassword) ?
+            setPasswordsDontMatchError('Паролі не співпадають') :
+            setPasswordsDontMatchError(null);
+    };
+
+    return (
+        <div className={css['form__container']}>
+            {props.user
+                ?
+                <form id="ChangePassword" onSubmit={handleSubmit}>
+                    <PasswordField
+                        name="currentPassword"
+                        label="Поточний пароль"
+                        updateHandler={handleInputChange}
+                        value={formData.currentPassword}
+                        requredField={true}
+                    />
+                    <PasswordField
+                        name="newPassword"
+                        label="Новий пароль"
+                        updateHandler={handleInputChange}
+                        value={formData.newPassword}
+                        requredField={true}
+                        error={invalidPasswordError}
+                    />
+                    <PasswordField
+                        name="reNewPassword"
+                        label="Повторіть новий пароль"
+                        updateHandler={handleInputChange}
+                        value={formData.reNewPassword}
+                        requredField={true}
+                        error={passwordsDontMatchError}
+                    />
+                </form>
+                : <Loader />
+            }
+        </div>
+    );
+}
+
+ChangePassword.propTypes = {
+    user: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        email: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        surname: PropTypes.string.isRequired,
+        profile_id: PropTypes.number.isRequired,
+        is_staff: PropTypes.bool.isRequired
+    }).isRequired,
+    currentFormNameHandler: PropTypes.func.isRequired,
+    curForm: PropTypes.string.isRequired
+};
+
+

FrontEnd/src/components/ProfilePage/FormComponents/ChangePassword.module.css

@@ -0,0 +1,5 @@
+.form__container {
+  word-wrap: break-word;
+  width: 530px;
+  margin-left: 10px;
+}

FrontEnd/src/components/ProfilePage/FormComponents/FormFields/PasswordField.js

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { PropTypes } from 'prop-types';
+import EyeInvisible from '../../../authorization/EyeInvisible';
+import EyeVisible from '../../../authorization/EyeVisible';
+import css from './PasswordField.module.css';
+
+const PasswordField = (props) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const togglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    return (
+        <div className={css['password-field__item']}>
+            <div className={css['password-field__label-wrapper']}>
+                {props.requredField &&
+                <span>
+                    *
+                </span>}
+                <label
+                    htmlFor={props.inputId}
+                >
+                    {props.label}
+                </label>
+            </div>
+            <div className={css['password-field__password']}>
+                <div className={css['password-field__password__wrapper']}>
+                    <input
+                        id={props.inputId}
+                        name={props.name}
+                        type={showPassword ? 'text' : 'password'}
+                        value={props.value}
+                        onChange={props.updateHandler}
+                        placeholder={props.label}
+                        required={props.requredField}
+                    />
+                </div>
+                <span
+                    className={css['password-visibility']}
+                    onClick={togglePassword}
+                >
+                    {!showPassword ? <EyeInvisible /> : <EyeVisible />}
+                </span>
+            </div>
+            {(props.requredField || props.error) &&
+                <div className={css['error-message']}>
+                    {props.error}
+                </div>
+            }
+        </div>
+    );
+};
+
+PasswordField.propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    updateHandler: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    inputId: PropTypes.string,
+    requredField: PropTypes.bool,
+    error: PropTypes.string
+};
+
+export default PasswordField;

FrontEnd/src/components/ProfilePage/FormComponents/FormFields/PasswordField.module.css

@@ -0,0 +1,83 @@
+.password-field__item {
+    display: flex;
+    width: 257px;
+    height: 89px;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.password-field__label-wrapper {
+    padding-bottom: 9px;
+}
+
+.password-field__label-wrapper span {
+    padding-right: 5px;
+    color: #FF4D4F;
+}
+
+.password-field__item input {
+    border: none;
+}
+.password-field__item input:focus {
+    border: none;
+    outline: none;
+}
+
+.password-field__item input::placeholder {
+    font-style: normal;
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.01em;
+    text-align: left;
+    color: #00000040;
+}
+.password-field__password {
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 2px;
+    border: 1px solid #d9d9d9;
+    background: #fff;
+}
+
+.password-field__password:focus {
+    border-radius: 2px;
+    border: 1px solid #1f9a7c;
+    background: #fff;
+    outline: none;
+}
+
+.password-field__password:focus-within {
+    border-radius: 2px;
+    border: 1px solid #1f9a7c;
+    background: #fff;
+  }
+
+.password-field__password__wrapper {
+    display: flex;
+}
+
+.password-visibility {
+    cursor: pointer;
+    margin-left: auto;
+}
+
+.error-message {
+    display: flex;
+    padding: 1px 0px;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+    flex: 1 0 0;
+    color: var(--red-red-100, #F34444);
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+}
+

FrontEnd/src/components/ProfilePage/ProfilePageComponents/Description.js

@@ -9,6 +9,7 @@ const DESCRIPTIONS = {
     'AdditionalInfo': 'Інформація про компанію',
     'StartupInfo': 'Інформація про стартап',
     'Delete': 'Видалення профілю',
+    'ChangePassword': 'Зміна паролю користувача'
 };
 
 const Description = (props) => {

FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js

@@ -13,6 +13,7 @@ import UserInfo from '../FormComponents/UserInfo';
 import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import MyModal from '../UI/MyModal/MyModal';
 import WarnUnsavedDataModal from '../FormComponents/WarnUnsavedDataModal';
+import ChangePassword from '../FormComponents/ChangePassword';
 import css from './ProfileContent.module.css';
 
 
@@ -53,7 +54,8 @@ const FORM_NAMES = [
     'ProductServiceInfo',
     'AdditionalInfo',
     'StartupInfo',
-    'Delete'
+    'Delete',
+    'ChangePassword'
 ];
 
 const ProfileContent = (props) => {
@@ -143,6 +145,11 @@ const ProfileContent = (props) => {
                     );
                 })}
                     <div className={css['divider']}></div>
+                    <Link
+                        to="/profile/change-password"
+                        className={`${css['infolink']}`}>
+                        Змінити пароль
+                    </Link>
                     <Link
                         to="/profile/delete"
                         className={`${css['infolink']} ${css['delete']}`}>
@@ -191,6 +198,12 @@ const ProfileContent = (props) => {
                                 profile={props.profile}
                                 currentFormNameHandler={props.currentFormNameHandler}
                                 curForm={FORM_NAMES[5]} />} />
+                        <Route
+                            path="/change-password"
+                            element={<ChangePassword
+                                user={props.user}
+                                currentFormNameHandler={props.currentFormNameHandler}
+                                curForm={FORM_NAMES[7]} />} />
                     </Routes>
                 </DirtyFormContext.Provider>
             </div>