Send change password request to backend

Samfundet · Nov 22, 2024 · e50eaa2 · e50eaa2
1 parent 88fd6fa
commit e50eaa2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx b/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx
@@ -1,18 +1,27 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import i18next from 'i18next';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { z } from 'zod';
 import { Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '~/Components';
+import { changePassword } from '~/api';
 import { KEY } from '~/i18n/constants';
 import { PASSWORD } from '~/schema/user';
-import { lowerCapitalize } from '~/utils';
+import { handleServerFormErrors, lowerCapitalize } from '~/utils';
 import styles from './ChangePasswordForm.module.scss';
 
-const schema = z.object({
-  current_password: PASSWORD,
-  new_password: PASSWORD,
-  repeat_password: PASSWORD,
-});
+const schema = z
+  .object({
+    current_password: PASSWORD,
+    new_password: PASSWORD,
+    repeat_password: PASSWORD,
+  })
+  .refine((data) => data.new_password === data.repeat_password, {
+    message: i18next.t(KEY.loginpage_passwords_must_match),
+    path: ['repeat_password'],
+  });
 
 type SchemaType = z.infer<typeof schema>;
 
@@ -28,8 +37,23 @@ export function ChangePasswordForm() {
     },
   });
 
+  const { mutate, isPending } = useMutation({
+    mutationFn: ({ current_password, new_password }: { current_password: string; new_password: string }) =>
+      changePassword(current_password, new_password),
+    onSuccess: () => {
+      form.reset();
+      toast.success(t(KEY.common_update_successful));
+    },
+    onError: (error) =>
+      handleServerFormErrors(error, form, {
+        'Incorrect current': 'Ugyldig nåværende passord',
+        'too short': 'Passordet er for kort. Det må inneholde minst 8 karakterer',
+        'too common': 'Passordet er for vanlig.',
+      }),
+  });
+
   function onSubmit(values: SchemaType) {
-    console.log('Values:', values);
+    mutate({ current_password: values.current_password, new_password: values.new_password });
   }
 
   return (
@@ -38,6 +62,7 @@ export function ChangePasswordForm() {
         <FormField
           name="current_password"
           control={form.control}
+          disabled={isPending}
           render={({ field }) => (
             <FormItem>
               <FormLabel>{lowerCapitalize(`${t(KEY.common_current)} ${t(KEY.common_password)}`)}</FormLabel>
@@ -51,6 +76,7 @@ export function ChangePasswordForm() {
         <FormField
           name="new_password"
           control={form.control}
+          disabled={isPending}
           render={({ field }) => (
             <FormItem>
               <FormLabel>{lowerCapitalize(t(KEY.new_password))}</FormLabel>
@@ -64,6 +90,7 @@ export function ChangePasswordForm() {
         <FormField
           name="repeat_password"
           control={form.control}
+          disabled={isPending}
           render={({ field }) => (
             <FormItem>
               <FormLabel>{lowerCapitalize(`${t(KEY.common_repeat)} ${t(KEY.new_password)}`)}</FormLabel>
@@ -76,7 +103,7 @@ export function ChangePasswordForm() {
         />
 
         <div className={styles.action_row}>
-          <Button type="submit" theme="green">
+          <Button type="submit" theme="green" disabled={isPending}>
             {t(KEY.common_save)}
           </Button>
         </div>

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
@@ -86,6 +86,11 @@ export async function register(data: RegistrationDto): Promise<number> {
   return response.status;
 }
 
+export async function changePassword(current_password: string, new_password: string): Promise<AxiosResponse> {
+  const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__change_password;
+  return await axios.post(url, { current_password, new_password }, { withCredentials: true });
+}
+
 export async function getUser(): Promise<UserDto> {
   const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__user;
   const response = await axios.get<UserDto>(url, { withCredentials: true });