Add newPassword page

api/cache/read/useReadHasCurrentUserCache.ts

@@ -1,6 +1,7 @@
 import type { ApolloClient, InMemoryCache } from '@apollo/client';
 
-import HasCurrentUserFragment from 'graphql/fragments/currentUser/hasCurrentUser.graphql';
+// TODO: Maybe rename query?
+import HasCurrentUserFragment from 'graphql/fragments/hasCurrentUser.graphql';
 
 import type { Me } from 'api/types/user/user';
 import { readCacheFragmentApi } from 'api/hooks/useReadCacheFragmentHook';

api/mutations/update/useUpdatePasswordMutation.ts

@@ -0,0 +1,26 @@
+import type { MutationHookOptions, MutationTuple, MutationResult } from '@apollo/client';
+
+import UpdatePasswordMutation from 'graphql/mutations/updatePassword.graphql';
+
+import type { UpdatePasswordVariables, UpdatePasswordData } from '../../types/user/updatePasswordApiType';
+import useMutation from '../../hooks/useMutationHook';
+
+type UpdatePasswordResponseData = {
+  updatePassword: UpdatePasswordData;
+};
+
+type UpdatePasswordRequestVariables = {
+  input: UpdatePasswordVariables;
+};
+
+type UpdatePasswordMutationOptions = MutationHookOptions<UpdatePasswordResponseData, UpdatePasswordRequestVariables>;
+
+type UpdatePasswordMutationTuple = MutationTuple<UpdatePasswordResponseData, UpdatePasswordRequestVariables>;
+
+export type UpdatePasswordMutationResult = MutationResult<UpdatePasswordResponseData>;
+
+const useUpdatePasswordMutation = (options: UpdatePasswordMutationOptions): UpdatePasswordMutationTuple => {
+  return useMutation<UpdatePasswordResponseData, UpdatePasswordRequestVariables>(UpdatePasswordMutation, options);
+};
+
+export default useUpdatePasswordMutation;

api/types/user/updatePasswordApiType.ts

@@ -0,0 +1,8 @@
+export type UpdatePasswordData = {
+  accessToken: string;
+};
+
+export type UpdatePasswordVariables = {
+  password: string;
+  resetToken: string | string[] | undefined;
+};

components/pages/newPassword/NewPasswordPage.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Router from 'next/router';
+
+import { withApolloClient } from 'lib/withApolloClient';
+import WithAuth from 'lib/auth/withAuth';
+
+import { HOME } from 'config/routes';
+import { NotifierProvider } from 'contexts/NotifierContext';
+
+import DefaultTemplate from 'components/shared/templates/DefaultTemplate';
+import Notifier from 'components/shared/atoms/Notifier';
+
+import NewPasswordForm from './components/NewPasswordForm';
+
+import { PageContentWrapper } from './styled';
+
+const NewPasswordPage = ({ query }) => {
+  return (
+    <NotifierProvider>
+      <DefaultTemplate testId="new-password-page">
+        <PageContentWrapper>
+          <NewPasswordForm query={query} />
+        </PageContentWrapper>
+        <Notifier />
+      </DefaultTemplate>
+    </NotifierProvider>
+  );
+};
+
+NewPasswordPage.getInitialProps = ({ res, accessTokenManager }) => {
+  if (accessTokenManager.accessToken) {
+    if (res) {
+      res.redirect(302, HOME);
+    } else {
+      Router.push(HOME);
+    }
+  }
+  return {};
+};
+
+export default withApolloClient(WithAuth(NewPasswordPage));

components/pages/newPassword/components/NewPasswordForm/NewPasswordForm.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Form, Formik, FormikProps } from 'formik';
+import * as Yup from 'yup';
+import { useRouter } from 'next/router';
+
+import useUpdatePassword from 'lib/apollo/hooks/actions/useUpdatePassword';
+
+import Button from 'components/shared/atoms/Button';
+import FormFieldInput from 'components/shared/atoms/FormField';
+import Loader from 'components/shared/atoms/Loader';
+import { FormFieldType } from 'types/formsType';
+import passwordRegExp from 'config/passwordRegExp';
+
+import { FieldWrapper, FormContentWrapper, SubmitButtonWrapper } from './styled';
+
+const SignInValidationSchema = Yup.object().shape({
+  password: Yup.string()
+    .required('This field is required')
+    .trim()
+    .min(6, 'The minimum password length is 6 characters')
+    .matches(passwordRegExp, 'Password must contain upper and lower case characters and numbers'),
+  passwordConfirmation: Yup.string()
+    .oneOf([Yup.ref('password')], 'Password does not match')
+    .required('This field is required'),
+});
+
+type FormValues = {
+  password: string;
+  passwordConfirmation: string;
+};
+
+const initialValues: FormValues = {
+  password: '',
+  passwordConfirmation: '',
+};
+
+const SignInFormContent = ({ isSubmitting }: FormikProps<FormValues>) => (
+  <FormContentWrapper>
+    <Form>
+      <FieldWrapper>
+        <FormFieldInput name="password" type={FormFieldType.password} label="New Password" />
+      </FieldWrapper>
+      <FieldWrapper>
+        <FormFieldInput name="passwordConfirmation" type={FormFieldType.password} label="New Password Confirmation" />
+      </FieldWrapper>
+      <SubmitButtonWrapper>
+        <Button type={FormFieldType.submit} testID="submit-button" disabled={isSubmitting}>
+          Submit
+        </Button>
+      </SubmitButtonWrapper>
+    </Form>
+  </FormContentWrapper>
+);
+
+const NewPasswordForm = () => {
+  const { query } = useRouter();
+  const { reset_token: resetToken } = query;
+  const [updatePassword, updatePasswordState] = useUpdatePassword();
+
+  const onSubmit = async ({ password }: { password: string }) => {
+    await updatePassword({ password, resetToken });
+  };
+
+  return (
+    <>
+      <Formik
+        initialValues={initialValues}
+        onSubmit={onSubmit}
+        component={SignInFormContent}
+        validationSchema={SignInValidationSchema}
+      />
+      {updatePasswordState.loading && <Loader testId="form-loader">Loading...</Loader>}
+    </>
+  );
+};
+
+export default NewPasswordForm;

components/pages/newPassword/components/NewPasswordForm/index.ts

@@ -0,0 +1 @@
+export { default } from './NewPasswordForm';

components/pages/newPassword/components/NewPasswordForm/styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const FormContentWrapper = styled.div`
+  width: 40rem;
+`;
+
+export const FieldWrapper = styled.div`
+  margin-top: 1rem;
+`;
+
+export const SubmitButtonWrapper = styled.div`
+  margin-top: 2rem;
+`;

components/pages/newPassword/index.ts

@@ -0,0 +1 @@
+export { default } from './NewPasswordPage';

components/pages/newPassword/styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const PageContentWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;

components/pages/signUp/components/SignUpForm/SignUpForm.tsx

@@ -8,11 +8,10 @@ import Button from 'components/shared/atoms/Button';
 import FormFieldInput from 'components/shared/atoms/FormField';
 import Loader from 'components/shared/atoms/Loader';
 import { FormFieldType } from 'types/formsType';
+import passwordRegExp from 'config/passwordRegExp';
 
 import { FieldWrapper, FormContentWrapper, SubmitButtonWrapper } from './styled';
 
-const passwordRegularExp = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])([0-9A-Za-z#$@&!?.*^{}<>;,)(~'"=_%+-]+)$/;
-
 const initialValues = {
   firstName: '',
   lastName: '',
@@ -28,7 +27,7 @@ const SignUpValidationSchema = Yup.object().shape({
     .required('This field is required')
     .trim()
     .min(6, 'The minimum password length is 6 characters')
-    .matches(passwordRegularExp, 'Password must contain upper and lower case characters and numbers'),
+    .matches(passwordRegExp, 'Password must contain upper and lower case characters and numbers'),
 });
 
 type ValuesFromFormik = Parameters<ReturnType<typeof useSignUp>[0]>[0];

config/passwordRegExp.ts

@@ -0,0 +1 @@
+export default /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])([0-9A-Za-z#$@&!?.*^{}<>;,)(~'"=_%+-]+)$/;

config/routes.ts

@@ -6,3 +6,4 @@ export const STATIC_PAGE = '/static-page';
 export const SIGNIN = '/signin';
 export const SIGNUP = '/signup';
 export const RECOVERY_PASSWORD = '/recovery-password';
+export const NEW_PASSWORD = '/new-password';

graphql/mutations/updatePassword.graphql

@@ -0,0 +1,6 @@
+mutation UpdatePassword($input: UpdatePasswordInput!) {
+  updatePassword(input: $input) {
+    accessToken
+    refreshToken
+  }
+}

lib/apollo/hooks/actions/useUpdatePassword.ts

@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router';
+
+import { SIGNIN } from 'config/routes';
+import { useNotifier } from 'contexts/NotifierContext';
+
+import type { UpdatePasswordVariables } from 'api/types/user/updatePasswordApiType';
+import type { UpdatePasswordMutationResult } from 'api/mutations/update/useUpdatePasswordMutation';
+import useUpdatePasswordMutation from 'api/mutations/update/useUpdatePasswordMutation';
+
+const useUpdatePassword = (): [(variables: UpdatePasswordVariables) => Promise<void>, UpdatePasswordMutationResult] => {
+  const { setError, setSuccess } = useNotifier();
+  const router = useRouter();
+
+  const onCompleted = () => {
+    setSuccess('Пароль успешно изменен');
+    setTimeout(() => router.push(SIGNIN), 1000);
+  };
+
+  const [mutation, mutationResult] = useUpdatePasswordMutation({
+    onCompleted,
+  });
+
+  const mutate = async ({ password, resetToken }: UpdatePasswordVariables) => {
+    const updatePasswordInput = { password, resetToken };
+
+    try {
+      await mutation({ variables: { input: updatePasswordInput } });
+    } catch (error) {
+      if (setError) setError(error);
+    }
+  };
+
+  return [mutate, mutationResult];
+};
+
+export default useUpdatePassword;

pages/new-password.ts

@@ -0,0 +1 @@
+export { default } from 'components/pages/newPassword';