feat(font): adding change password + edit forms

Sweetiez · Jun 6, 2022 · 9e4d95f · 9e4d95f
1 parent 778ecfd
commit 9e4d95f
Show file tree

Hide file tree

Showing 13 changed files with 308 additions and 220 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -177,7 +177,19 @@
       "validate": "Validate",
       "editPassword": {
         "btn": "change password",
-        "title": "Choose a new password"
+        "title": "Choose a new password",
+        "currentPassword": "Current password",
+        "newPassword": "New password",
+        "confirmNewPassword": "Confirm new password",
+        "error": {
+          "newPasswordLength": "The new password must contain more than 8 characters",
+          "newPasswordFormat": "The new password must contain at least one lower case letter, one upper case letter and one number",
+          "newPasswordConfirmed": "Passwords not matching"
+        },
+        "apiResponses": {
+          "success": "Your password has been modified",
+          "failure": "An error has occurred in the changing your password"
+        }
       },
       "editProfile": {
         "btn": "edit",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -177,7 +177,19 @@
       "validate": "Valider",
       "editPassword": {
         "btn": "modifier son password",
-        "title": "Choisir un nouveau password"
+        "title": "Choisir un nouveau password",
+        "currentPassword": "Mot de passe actuel",
+        "newPassword": "Nouveau mot de passe",
+        "confirmNewPassword": "Confirmer nouveau mot de passe",
+        "error": {
+          "newPasswordLength": "Le nouveau mot de passe doit contenir plus de 8 caractères",
+          "newPasswordFormat": "Le nouveau mot de passe doit contenir au moins une minuscule, une majuscule et un chiffre",
+          "newPasswordConfirmed": "Les mots de passe ne correspondent pas"
+        },
+        "apiResponses": {
+          "success": "Votre mot de passe a été modifié",
+          "failure": "Une erreur s'est produite dans la modification de votre mot de passe"
+        }
       },
       "editProfile": {
         "btn": "éditer",

diff --git a/src/components/Authentication/LoginForm.tsx b/src/components/Authentication/LoginForm.tsx
@@ -8,6 +8,7 @@ import { login } from '../../hooks/auth/register';
 import { useToken } from '../../hooks/auth/token';
 import Label from '../utils/Label';
 import {useRefreshToken} from "../../hooks/auth/refreshToken";
+import PasswordInput from "../utils/PasswordInput";
 
 interface LoginProps {
   setModalContent: (content: ModalContent) => void;
@@ -19,14 +20,10 @@ const LoginForm: React.FC<LoginProps> = ({
   setModalState,
 }) => {
   const { t } = useTranslation();
-  const [passwordShown, setPasswordShown] = useState(false);
   const { setToken } = useToken();
   const { setRefreshToken } = useRefreshToken();
   const [status, setStatus] = useState('');
   const [message, setMessage] = useState('');
-  const togglePassword = () => {
-    setPasswordShown(!passwordShown);
-  };
 
   const signInUser = async (event: any) => {
     event.preventDefault();
@@ -66,52 +63,8 @@ const LoginForm: React.FC<LoginProps> = ({
               placeholder={t('authentication.login.email')}
             />
           </div>
-          <div className="mb-1 flex items-center">
-            <input
-              className="shadow appearance-none -mr-8 border-gray-400 rounded w-full py-2 px-3 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gold-100 focus:border-transparent"
-              id="password"
-              type={passwordShown ? 'text' : 'password'}
-              placeholder={t('authentication.login.password')}
-            />
-            <svg
-              style={
-                !passwordShown ? { display: 'block' } : { display: 'none' }
-              }
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePassword}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            </svg>
-
-            <svg
-              style={passwordShown ? { display: 'block' } : { display: 'none' }}
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePassword}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-              />
-            </svg>
+          <div className="mb-1">
+            <PasswordInput id={'password'} placeholder={t('authentication.login.password')}/>
           </div>
           <div className="flex items-center justify-end mb-8">
             <TextButton

diff --git a/src/components/Authentication/RegisterForm.tsx b/src/components/Authentication/RegisterForm.tsx
@@ -10,6 +10,7 @@ import PhoneInput from 'react-phone-number-input';
 import RegisterRequest from '../../hooks/auth/requests/RegisterRequest';
 import { register } from '../../hooks/auth/register';
 import { wait } from '@testing-library/user-event/dist/utils';
+import PasswordInput from "../utils/PasswordInput";
 
 interface RegisterProps {
   setModalContent: (content: ModalContent) => void;
@@ -18,16 +19,8 @@ interface RegisterProps {
 const RegisterForm: React.FC<RegisterProps> = ({ setModalContent }) => {
   const { t } = useTranslation();
   const [value, setValue] = useState<any>();
-  const [passwordShown, setPasswordShown] = useState(false);
-  const [passwordConfirmedShown, setPasswordConfirmedShown] = useState(false);
   const [status, setStatus] = useState('');
   const [message, setMessage] = useState('');
-  const togglePassword = () => {
-    setPasswordShown(!passwordShown);
-  };
-  const togglePasswordConfirmed = () => {
-    setPasswordConfirmedShown(!passwordConfirmedShown);
-  };
 
   const registerUser = async (event: any) => {
     event.preventDefault();
@@ -139,108 +132,12 @@ const RegisterForm: React.FC<RegisterProps> = ({ setModalContent }) => {
             />
           </div>
 
-          <div className="mb-4 flex items-center">
-            <input
-              className="shadow appearance-none -mr-8 border-gray-400 rounded w-full py-2 px-3 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gold-100 focus:border-transparent"
-              id="password"
-              type={passwordShown ? 'text' : 'password'}
-              placeholder={t('authentication.register.password')}
-              required={true}
-            />
-            <svg
-              style={
-                !passwordShown ? { display: 'block' } : { display: 'none' }
-              }
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePassword}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            </svg>
-
-            <svg
-              style={passwordShown ? { display: 'block' } : { display: 'none' }}
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePassword}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-              />
-            </svg>
+          <div className="mb-4">
+            <PasswordInput id={'password'} placeholder={t('authentication.register.password')}/>
           </div>
 
-          <div className="mb-8 flex items-center">
-            <input
-              className="shadow appearance-none -mr-8 border-gray-400 rounded w-full py-2 px-3 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gold-100 focus:border-transparent"
-              id="passwordConfirmed"
-              type={passwordConfirmedShown ? 'text' : 'password'}
-              placeholder={t('authentication.register.confirmPassword')}
-              required={true}
-            />
-            <svg
-              style={
-                !passwordConfirmedShown
-                  ? { display: 'block' }
-                  : { display: 'none' }
-              }
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePasswordConfirmed}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            </svg>
-
-            <svg
-              style={
-                passwordConfirmedShown
-                  ? { display: 'block' }
-                  : { display: 'none' }
-              }
-              className="h-6 w-6 text-black"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              onClick={togglePasswordConfirmed}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-              />
-            </svg>
+          <div className="mb-8">
+            <PasswordInput id={'passwordConfirmed'} placeholder={t('authentication.register.confirmPassword')}/>
           </div>
 
           <div className="flex justify-center mb-4 inline-flex items-center">