@visns-studio/visns-components 1.8.5 → 2.0.1

package/components/crm/auth/Verify.jsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
+import validator from 'validator';
+import Reveal from 'react-reveal/Reveal';
+
+import CustomFetch from '../Fetch';
+
+const Verify = () => {
+    const navigate = useNavigate();
+    const { code } = useParams();
+
+    const [formData, setFormData] = useState({
+        password: '',
+        passwordRepeat: '',
+        passwordClass: '',
+        passwordRepeatClass: '',
+    });
+
+    const { password, passwordRepeat, passwordClass, passwordRepeatClass } =
+        formData;
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prevFormData) => ({
+            ...prevFormData,
+            [name]: value,
+            passwordClass: '',
+            passwordRepeatClass: '',
+        }));
+    };
+
+    const validatePassword = () => {
+        let _error = '';
+
+        if (password === '') {
+            _error = 'Please type in your new password.';
+            setFormData((prevFormData) => ({
+                ...prevFormData,
+                passwordClass: 'inputError',
+            }));
+        } else {
+            if (password !== passwordRepeat) {
+                _error =
+                    'The password does not match, please re-type the password.';
+                setFormData((prevFormData) => ({
+                    ...prevFormData,
+                    passwordClass: 'inputError',
+                    passwordRepeatClass: 'inputError',
+                }));
+            } else {
+                if (!validator.isStrongPassword(password)) {
+                    _error =
+                        'Your password is too weak it must contain the following:<br />- Must contain at least 8 characters.<br />- Must contain at least one uppercase letter.<br />- Must contain at least one lowercase letter.<br />- Must contain at least one number.<br />- Must contain at least one symbol.<br />';
+                }
+            }
+        }
+
+        return _error;
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+            const errorMsg = validatePassword();
+
+            if (errorMsg === '') {
+                CustomFetch(
+                    '/password/reset',
+                    'POST',
+                    {
+                        code: code,
+                        password: password,
+                        password_confirmation: passwordRepeat,
+                    },
+                    function (result) {
+                        if (result.error === '') {
+                            toast.success(
+                                'You have successfully set a new password, please use your new password to login into the system.'
+                            );
+
+                            navigate('/login');
+                        } else {
+                            toast.error(result.error);
+                        }
+                    }
+                );
+            } else {
+                toast.error(<div>{parse(errorMsg)}</div>);
+            }
+        }
+    };
+
+    return (
+        <div className="lcontainer">
+            <div className="lwrap">
+                <aside className="aside"></aside>
+                <div className="logincontainer">
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className="login">
+                                <div className="formItem fwItem">
+                                    <h1>Reset your password</h1>
+                                </div>
+                                {errorMsg === '' ? (
+                                    <>
+                                        <div className="formItem fwItem">
+                                            <label className="fi__label">
+                                                <input
+                                                    type="password"
+                                                    name="password"
+                                                    value={password}
+                                                    onChange={handleInputChange}
+                                                    tabIndex="1"
+                                                    className={passwordClass}
+                                                />
+                                                <span className="fi__span">
+                                                    Password
+                                                </span>
+                                            </label>
+                                        </div>
+                                        <div className="formItem fwItem">
+                                            <label className="fi__label">
+                                                <input
+                                                    type="password"
+                                                    name="passwordRepeat"
+                                                    value={passwordRepeat}
+                                                    onChange={handleInputChange}
+                                                    tabIndex="2"
+                                                    className={
+                                                        passwordRepeatClass
+                                                    }
+                                                />
+                                                <span className="fi__span">
+                                                    Re-type Password
+                                                </span>
+                                            </label>
+                                        </div>
+                                        <div className="formItem fwItem lastItem">
+                                            <button
+                                                className="btn"
+                                                type="submit"
+                                                tabIndex="3"
+                                            >
+                                                Reset
+                                            </button>
+                                        </div>
+                                    </>
+                                ) : (
+                                    <p>{errorMsg}</p>
+                                )}
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Verify;