feat: user integration

WBG-Coach · Aug 3, 2023 · 39c5c76 · 39c5c76
1 parent 60c8fc4
commit 39c5c76
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@formkit/auto-animate": "^1.0.0-beta.6",
+    "@hookform/resolvers": "^3.1.1",
     "@superset-ui/embedded-sdk": "^0.1.0-alpha.9",
     "@types/styled-system": "^5.1.16",
     "axios": "^1.3.4",
@@ -31,7 +32,8 @@
     "react-router-dom": "6.4.3",
     "react-toastify": "^9.1.1",
     "styled-system": "^5.1.5",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "yup": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

diff --git a/src/contexts/UserContext/index.tsx b/src/contexts/UserContext/index.tsx
@@ -37,20 +37,21 @@ const UserContextProvider = ({ children }: Props) => {
     StorageService.setAccessToken(response.headers.token || '');
   };
 
-  const handleUpdateUser = async (userToUpdate: Partial<IUser>) => {
+  const handleUpdateUser = async (userToUpdate: Partial<IUser & { currentPassword?: string }>) => {
     try {
       if (user) {
         const newUser = { ...user, ...userToUpdate };
-        await UserService.updateUser(newUser.id || user?.id, newUser);
+        await UserService.updateUser(newUser.id || user?.id, userToUpdate);
         setUser(newUser);
       }
     } catch (err) {
-      toast.error('An error as ocurred on update user');
+      toast.error(
+        !!userToUpdate.currentPassword ? 'Your current password is wrong' : 'An error as ocurred on update user',
+      );
     }
   };
 
   const logout = () => {
-    console.log('saindo');
     setUser(undefined);
     StorageService.cleanStorage();
   };

diff --git a/src/pages/Settings/ChangePassword/index.tsx b/src/pages/Settings/ChangePassword/index.tsx
@@ -2,23 +2,36 @@ import Icon from '@/components/Base/Icon';
 import Loader from '@/components/Base/Loader';
 import { UserContext } from '@/contexts/UserContext';
 import { IUser } from '@/types';
-import { Button, Center, FormControl, FormErrorMessage, FormLabel, Input, Text, VStack } from '@chakra-ui/react';
+import { Button, Center, FormControl, FormLabel, Input, Text, VStack } from '@chakra-ui/react';
 import React, { useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 const ChangePassword = () => {
-  const { user, handleUpdateUser } = useContext(UserContext);
+  const { handleUpdateUser } = useContext(UserContext);
   const [isLoading, setIsLoading] = useState(false);
 
+  const schema = yup
+    .object({
+      currentPassword: yup.string().required('This field is required'),
+      password: yup.string().required('This field is required'),
+      confirmPassword: yup
+        .string()
+        .required('This field is required')
+        .oneOf([yup.ref('password')], 'Password not equals'),
+    })
+    .required();
+
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm();
+  } = useForm({ resolver: yupResolver(schema) });
 
-  const handleSubmitForm = (user: Partial<IUser>) => {
+  const handleSubmitForm = async (user: Partial<IUser & { repassword: string; currentPassword: string }>) => {
     setIsLoading(true);
-    handleUpdateUser(user);
+    await handleUpdateUser({ password: user.password, currentPassword: user.currentPassword } as any);
     setIsLoading(false);
   };
 
@@ -41,28 +54,42 @@ const ChangePassword = () => {
             onSubmit={handleSubmit(handleSubmitForm)}
             style={{ width: '100%', display: 'flex', flexDirection: 'column', marginTop: '40px' }}
           >
-            <FormControl isInvalid={!!errors.name}>
+            <FormControl>
               <FormLabel htmlFor="name">Current password</FormLabel>
-              <Input {...register('name', { required: true })} />
-              <FormErrorMessage>
-                {errors.name && errors.name.type === 'required' && 'Name is required'}
-              </FormErrorMessage>
+              <Input
+                isInvalid={!!errors.currentPassword}
+                type="password"
+                {...register('currentPassword', { required: true })}
+              />
+              <Text mt={'8px'} color={'red'}>
+                {errors.currentPassword?.message}
+              </Text>
             </FormControl>
 
-            <FormControl isInvalid={!!errors.email} style={{ marginTop: '16px' }}>
+            <FormControl style={{ marginTop: '16px' }}>
               <FormLabel htmlFor="name">New password</FormLabel>
-              <Input id="password" {...register('password', { required: true })} />
-              <FormErrorMessage>
-                {errors.email && errors.email.type === 'required' && 'Email is required'}
-              </FormErrorMessage>
+              <Input
+                isInvalid={!!errors.password}
+                id="password"
+                type="password"
+                {...register('password', { required: true })}
+              />
+              <Text mt={'8px'} color={'red'}>
+                {errors.password?.message}
+              </Text>
             </FormControl>
 
-            <FormControl isInvalid={!!errors.email} style={{ marginTop: '16px' }}>
-              <FormLabel htmlFor="name">Confirm password</FormLabel>
-              <Input id="password" {...register('re-password', { required: true })} />
-              <FormErrorMessage>
-                {errors.email && errors.email.type === 'required' && 'Email is required'}
-              </FormErrorMessage>
+            <FormControl style={{ marginTop: '16px' }}>
+              <FormLabel htmlFor="repassword">Confirm password</FormLabel>
+              <Input
+                isInvalid={!!errors.confirmPassword}
+                id="password"
+                type="password"
+                {...register('confirmPassword', { required: true })}
+              />
+              <Text mt={'8px'} color={'red'}>
+                {errors.confirmPassword?.message}
+              </Text>
             </FormControl>
 
             <Button colorScheme="blue" type="submit" w={'100%'} mt={'40px'}>

diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -13,7 +13,6 @@ const SettingsPage: React.FC = () => {
   const { t } = useTranslation();
   const { user } = useContext(UserContext);
 
-  console.log(user);
   const [currentOption, setCurrentOption] = useState(0);
   const options = [
     {

diff --git a/src/services/user/index.ts b/src/services/user/index.ts
@@ -7,7 +7,7 @@ export const UserService = {
   getUsers: async (): Promise<IUser[]> => (await _axios.get('users/admin')).data,
   removeUser: async (user_id: IUser['id']): Promise<void> => (await _axios.delete(`users/admin/${user_id}`)).data,
   updateUser: async (user_id: IUser['id'], body: Partial<IUser>): Promise<IUser[]> =>
-    (await _axios.patch(`users/admin/${user_id}`, body)).data,
+    await _axios.patch(`users/admin/${user_id}`, body),
 };
 
 export default UserService;
diff --git a/yarn.lock b/yarn.lock
@@ -1279,6 +1279,11 @@
   resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-pre-alpha.3.tgz#8e6143a6232700e5be31f74fc6faffde05ce4e24"
   integrity sha512-lMVZ3LFUIu0RIxCEwmV8nUUJQ46M2bv2NDU3hrhZivViuR1EheC8Mj5sx/ACqK5QLK8XB8z7GDIZBUGdU/9OZQ==
 
+"@hookform/resolvers@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.1.1.tgz#b374d33e356428fff9c6ef3c933441fe15e40784"
+  integrity sha512-tS16bAUkqjITNSvbJuO1x7MXbn7Oe8ZziDTJdA9mMvsoYthnOOiznOTGBYwbdlYBgU+tgpI/BtTU3paRbCuSlg==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -3668,6 +3673,11 @@ prop-types@^15, prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -4110,6 +4120,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 tiny-invariant@^1.0.6:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
@@ -4137,6 +4152,11 @@ toggle-selection@^1.0.6:
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
   integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 ts-api-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.1.tgz#8144e811d44c749cd65b2da305a032510774452d"
@@ -4174,6 +4194,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 typed-array-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
@@ -4355,3 +4380,13 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.2.0.tgz#9e51af0c63bdfc9be0fdc6c10aa0710899d8aff6"
+  integrity sha512-PPqYKSAXjpRCgLgLKVGPA33v5c/WgEx3wi6NFjIiegz90zSwyMpvTFp/uGcVnnbx6to28pgnzp/q8ih3QRjLMQ==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"