Implement password change endpoint

* move email templates to server

apps/client/src/features/auth/services/auth-service.ts

@@ -1,12 +1,24 @@
 import api from "@/lib/api-client";
-import { ILogin, IRegister, ITokenResponse } from "@/features/auth/types/auth.types";
+import {
+  IChangePassword,
+  ILogin,
+  IRegister,
+  ITokenResponse,
+} from "@/features/auth/types/auth.types";
 
-export async function login(data: ILogin): Promise<ITokenResponse>{
+export async function login(data: ILogin): Promise<ITokenResponse> {
   const req = await api.post<ITokenResponse>("/auth/login", data);
-  return req.data as ITokenResponse;
+  return req.data;
 }
 
-export async function register(data: IRegister): Promise<ITokenResponse>{
+export async function register(data: IRegister): Promise<ITokenResponse> {
   const req = await api.post<ITokenResponse>("/auth/register", data);
-  return req.data as ITokenResponse;
+  return req.data;
+}
+
+export async function changePassword(
+  data: IChangePassword,
+): Promise<IChangePassword> {
+  const req = await api.post<IChangePassword>("/auth/change-password", data);
+  return req.data;
 }

apps/client/src/features/auth/types/auth.types.ts

@@ -1,18 +1,23 @@
 export interface ILogin {
-  email: string,
-  password: string
+  email: string;
+  password: string;
 }
 
 export interface IRegister {
-  email: string,
-  password: string
+  email: string;
+  password: string;
 }
 
 export interface ITokens {
-  accessToken: string,
-  refreshToken: string
+  accessToken: string;
+  refreshToken: string;
 }
 
 export interface ITokenResponse {
-  tokens: ITokens
+  tokens: ITokens;
+}
+
+export interface IChangePassword {
+  oldPassword: string;
+  newPassword: string;
 }

apps/client/src/features/user/components/change-email.tsx

@@ -27,15 +27,17 @@ export default function ChangeEmail() {
         </Text>
       </div>
 
+      {/*
       <Button onClick={open} variant="default">
         Change email
       </Button>
+      */}
 
       <Modal opened={opened} onClose={close} title="Change email" centered>
         <Text mb="md">
           To change your email, you have to enter your password and new email.
         </Text>
-        <ChangePasswordForm />
+        <ChangeEmailForm />
       </Modal>
     </Group>
   );
@@ -50,7 +52,7 @@ const formSchema = z.object({
 
 type FormValues = z.infer<typeof formSchema>;
 
-function ChangePasswordForm() {
+function ChangeEmailForm() {
   const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm<FormValues>({

apps/client/src/features/user/components/change-password.tsx

@@ -1,9 +1,11 @@
-import { Button, Group, Text, Modal, PasswordInput } from '@mantine/core';
-import * as z from 'zod';
-import { useState } from 'react';
-import { useDisclosure } from '@mantine/hooks';
-import * as React from 'react';
-import { useForm, zodResolver } from '@mantine/form';
+import { Button, Group, Text, Modal, PasswordInput } from "@mantine/core";
+import * as z from "zod";
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import * as React from "react";
+import { useForm, zodResolver } from "@mantine/form";
+import { changePassword } from "@/features/auth/services/auth-service.ts";
+import { notifications } from "@mantine/notifications";
 
 export default function ChangePassword() {
   const [opened, { open, close }] = useDisclosure(false);
@@ -17,55 +19,72 @@ export default function ChangePassword() {
         </Text>
       </div>
 
-      <Button onClick={open} variant="default">Change password</Button>
+      <Button onClick={open} variant="default">
+        Change password
+      </Button>
 
       <Modal opened={opened} onClose={close} title="Change password" centered>
         <Text mb="md">Your password must be a minimum of 8 characters.</Text>
-        <ChangePasswordForm />
-
+        <ChangePasswordForm onClose={close} />
       </Modal>
     </Group>
   );
 }
 
 const formSchema = z.object({
-  current: z.string({ required_error: 'your current password is required' }).min(1),
-  password: z.string({ required_error: 'New password is required' }).min(8),
-  confirm_password: z.string({ required_error: 'Password confirmation is required' }).min(8),
-}).refine(data => data.password === data.confirm_password, {
-  message: 'Your new password and confirmation does not match.',
-  path: ['confirm_password'],
+  oldPassword: z
+    .string({ required_error: "your current password is required" })
+    .min(8),
+  newPassword: z.string({ required_error: "New password is required" }).min(8),
 });
 
-type FormValues = z.infer<typeof formSchema>
+type FormValues = z.infer<typeof formSchema>;
 
-function ChangePasswordForm() {
+interface ChangePasswordFormProps {
+  onClose?: () => void;
+}
+function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
   const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm<FormValues>({
     validate: zodResolver(formSchema),
     initialValues: {
-      current: '',
-      password: '',
-      confirm_password: '',
+      oldPassword: "",
+      newPassword: "",
     },
   });
 
-  function handleSubmit(data: FormValues) {
+  async function handleSubmit(data: FormValues) {
     setIsLoading(true);
-    console.log(data);
+    try {
+      await changePassword({
+        oldPassword: data.oldPassword,
+        newPassword: data.newPassword,
+      });
+      notifications.show({
+        message: "Password changed successfully",
+      });
+
+      onClose();
+    } catch (err) {
+      notifications.show({
+        message: `Error: ${err.response.data.message}`,
+        color: "red",
+      });
+    }
+    setIsLoading(false);
   }
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
-
       <PasswordInput
         label="Current password"
-        name="current"
+        name="oldPassword"
         placeholder="Enter your current password"
         variant="filled"
         mb="md"
-        {...form.getInputProps('current')}
+        data-autofocus
+        {...form.getInputProps("oldPassword")}
       />
 
       <PasswordInput
@@ -73,7 +92,7 @@ function ChangePasswordForm() {
         placeholder="Enter your new password"
         variant="filled"
         mb="md"
-        {...form.getInputProps('password')}
+        {...form.getInputProps("newPassword")}
       />
 
       <Button type="submit" disabled={isLoading} loading={isLoading}>