feat(client): add password updated info screen (#119)

* feat(client): add password updated info screen
Jozwiaczek · Mar 17, 2021 · 8367596 · 8367596
1 parent dc91bac
commit 8367596
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 10 deletions.
diff --git a/packages/client/src/containers/PasswordRecovery/UpdatePassword/UpdatePassword.styled.ts b/packages/client/src/containers/PasswordRecovery/UpdatePassword/UpdatePassword.styled.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const ShieldIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 30px 0 60px;
+`;
diff --git a/packages/client/src/containers/PasswordRecovery/UpdatePassword/UpdatePassword.types.d.ts b/packages/client/src/containers/PasswordRecovery/UpdatePassword/UpdatePassword.types.d.ts
@@ -0,0 +1,3 @@
+interface UpdatePasswordInputs {
+  password: string;
+}
diff --git a/packages/client/src/containers/PasswordRecovery/UpdatePassword/index.tsx b/packages/client/src/containers/PasswordRecovery/UpdatePassword/index.tsx
@@ -1,27 +1,33 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 
 import { routes } from '../../../constants';
 import { Button, CardLayout, Form, Link, TextField } from '../../../elements';
 import { useAuth, useSnackbar } from '../../../hooks';
 import useAnimated from '../../../hooks/useAnimated';
-import { ConfirmLockIcon } from '../../../icons';
+import { ConfirmLockIcon, ShieldLock } from '../../../icons';
 import { onlyOnDevEnv } from '../../../utils';
-import { LoginInputs } from '../../Login/Login.types';
+import { ShieldIconWrapper } from './UpdatePassword.styled';
 
 const UpdatePassword = () => {
   const { updatePassword } = useAuth();
-  const history = useHistory();
   const showSnackbar = useSnackbar();
   const { t } = useTranslation();
+  const [isSent, setIsSent] = useState(false);
   const [loading, setLoading] = useState(false);
   const { trigger: triggerCardShake, ref: animatedCardRef } = useAnimated<HTMLDivElement>({
     type: 'shake',
     opt: { autoTrigger: false },
   });
-  const { register, handleSubmit, errors, reset, trigger, getValues } = useForm<LoginInputs>();
+  const {
+    register,
+    handleSubmit,
+    errors,
+    reset,
+    trigger,
+    getValues,
+  } = useForm<UpdatePasswordInputs>();
 
   const onBeforeSubmit = async () => {
     const isValid = await trigger();
@@ -30,12 +36,12 @@ const UpdatePassword = () => {
     }
   };
 
-  const onSubmit = async (values: LoginInputs) => {
+  const onSubmit = async ({ password }: UpdatePasswordInputs) => {
     setLoading(true);
     try {
-      await updatePassword(values);
+      await updatePassword({ password, email: 'EMAIL_HERE' });
       reset();
-      history.push(routes.home);
+      setIsSent(true);
     } catch (error) {
       onlyOnDevEnv(() => console.error(error));
       showSnackbar({ message: t('form.errors.onSubmitError'), severity: 'error' });
@@ -44,8 +50,8 @@ const UpdatePassword = () => {
     }
   };
 
-  return (
-    <CardLayout.Container ref={animatedCardRef}>
+  const formStep = (
+    <>
       <CardLayout.Title>{t('routes.passwordRecovery.updatePassword.title')}</CardLayout.Title>
       <CardLayout.Description>
         <Trans
@@ -86,6 +92,26 @@ const UpdatePassword = () => {
           {t('routes.passwordRecovery.iRememberPassword')}
         </Link>
       </CardLayout.ActionsContainer>
+    </>
+  );
+
+  const infoStep = (
+    <>
+      <CardLayout.Title>
+        {t('routes.passwordRecovery.updatePasswordConfirmation.title')}
+      </CardLayout.Title>
+      <ShieldIconWrapper>
+        <ShieldLock />
+      </ShieldIconWrapper>
+      <Button fullWidth withArrow to={routes.home}>
+        {t('routes.passwordRecovery.updatePasswordConfirmation.back')}
+      </Button>
+    </>
+  );
+
+  return (
+    <CardLayout.Container ref={animatedCardRef}>
+      {isSent ? infoStep : formStep}
     </CardLayout.Container>
   );
 };

diff --git a/packages/client/src/i18n/resources/en.ts b/packages/client/src/i18n/resources/en.ts
@@ -62,6 +62,10 @@ const en = {
           description: 'Update your password for <b>{{email}}</b>.',
           updatePassword: 'Update Password',
         },
+        updatePasswordConfirmation: {
+          title: 'Password updated',
+          back: 'Back to login',
+        },
         iRememberPassword: 'I remember my password now',
       },
       pageNotFound: {

diff --git a/packages/client/src/i18n/resources/pl.ts b/packages/client/src/i18n/resources/pl.ts
@@ -64,6 +64,10 @@ const pl: TranslationStructure = {
           description: 'Zaktualizuj swoje hasło dla <b>{{email}}</b>.',
           updatePassword: 'Zaktualizuj hasło',
         },
+        updatePasswordConfirmation: {
+          title: 'Hasło zaktualizowane',
+          back: 'Wróc do strony logowania',
+        },
         iRememberPassword: 'Przypomniałem sobie hasło',
       },
       pageNotFound: {