From 53f190f8fffb3d078b991b979cf10a5c367c26d0 Mon Sep 17 00:00:00 2001
From: Prabhakar acharya <acharyap03@gmail.com>
Date: Sat, 28 Dec 2024 09:53:54 +1100
Subject: [PATCH 1/3] remove console

---
 src/services/apiAuthentication.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/services/apiAuthentication.js b/src/services/apiAuthentication.js
index 4e56f09..6ff4f47 100644
--- a/src/services/apiAuthentication.js
+++ b/src/services/apiAuthentication.js
@@ -10,9 +10,6 @@ export async function login({ email, password }) {
 		console.error(error);
 		throw new Error(error.message || 'Login failed');
 	}
-
-	console.log('Authenticated user:', data);
-
 	return data;
 }
 

From 9e8dff4f9da60ca274ae762fa82b15ca25147004 Mon Sep 17 00:00:00 2001
From: Prabhakar acharya <acharyap03@gmail.com>
Date: Sat, 28 Dec 2024 09:54:23 +1100
Subject: [PATCH 2/3] using react hook form for form management

---
 src/features/authentication/SignupForm.jsx | 51 +++++++++++++++++-----
 src/pages/Users.jsx                        |  8 +++-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/features/authentication/SignupForm.jsx b/src/features/authentication/SignupForm.jsx
index 192a9ef..09a2ef8 100644
--- a/src/features/authentication/SignupForm.jsx
+++ b/src/features/authentication/SignupForm.jsx
@@ -1,25 +1,56 @@
 import { Button } from '@/ui/Buttons';
 import { Form, FormRow, Input } from '@/ui/FormComponent';
-
+import { useForm } from 'react-hook-form';
 // Email regex: /\S+@\S+\.\S+/
 
 function SignupForm() {
+	const { register, formState, handleSubmit } = useForm();
+	const { errors } = formState;
+
+	function onSubmit(data) {
+		console.log(data);
+	}
 	return (
-		<Form>
-			<FormRow label='Full name' error={''}>
-				<Input type='text' id='fullName' />
+		<Form onSubmit={handleSubmit(onSubmit)}>
+			<FormRow label='Full name' error={errors?.fullName?.message}>
+				<Input
+					type='text'
+					id='fullName'
+					{...register('fullName', { required: 'This field is required' })}
+				/>
 			</FormRow>
 
-			<FormRow label='Email address' error={''}>
-				<Input type='email' id='email' />
+			<FormRow label='Email address' error={errors?.email?.message}>
+				<Input
+					type='email'
+					id='email'
+					{...register('email', {
+						required: 'This field is required',
+						pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email address' },
+					})}
+				/>
 			</FormRow>
 
-			<FormRow label='Password (min 8 characters)' error={''}>
-				<Input type='password' id='password' />
+			<FormRow label='Password (min 8 characters)' error={errors?.password?.message}>
+				<Input
+					type='password'
+					id='password'
+					{...register('password', {
+						required: 'This field is required',
+						minLength: { value: 8, message: 'Password must be at least 8 characters' },
+					})}
+				/>
 			</FormRow>
 
-			<FormRow label='Repeat password' error={''}>
-				<Input type='password' id='passwordConfirm' />
+			<FormRow label='Repeat password' error={errors?.passwordConfirm?.message}>
+				<Input
+					type='password'
+					id='passwordConfirm'
+					{...register('passwordConfirm', {
+						required: 'This field is required',
+						validate: (value) => value === getValues().password || 'Passwords do not match',
+					})}
+				/>
 			</FormRow>
 
 			<FormRow>
diff --git a/src/pages/Users.jsx b/src/pages/Users.jsx
index 9f991af..c139a02 100644
--- a/src/pages/Users.jsx
+++ b/src/pages/Users.jsx
@@ -1,7 +1,13 @@
 import { Heading } from '@/ui/Common';
+import { SignupForm } from '@/features/authentication';
 
 function NewUsers() {
-	return <Heading as='h1'>Create a new user</Heading>;
+	return (
+		<>
+			<Heading as='h1'>Create a new user</Heading>
+			<SignupForm />
+		</>
+	);
 }
 
 export default NewUsers;

From f3c908afdfa859fcde3eccf8a021866b93d1ecfa Mon Sep 17 00:00:00 2001
From: Prabhakar acharya <acharyap03@gmail.com>
Date: Sat, 28 Dec 2024 10:22:03 +1100
Subject: [PATCH 3/3] confirm email

---
 src/features/authentication/SignupForm.jsx |  8 +++++---
 src/features/authentication/useSignup.js   | 15 +++++++++++++++
 src/services/apiAuthentication.js          | 16 ++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/features/authentication/useSignup.js

diff --git a/src/features/authentication/SignupForm.jsx b/src/features/authentication/SignupForm.jsx
index 09a2ef8..43b7ce7 100644
--- a/src/features/authentication/SignupForm.jsx
+++ b/src/features/authentication/SignupForm.jsx
@@ -1,14 +1,16 @@
 import { Button } from '@/ui/Buttons';
 import { Form, FormRow, Input } from '@/ui/FormComponent';
 import { useForm } from 'react-hook-form';
+import { useSignup } from './useSignup';
 // Email regex: /\S+@\S+\.\S+/
 
 function SignupForm() {
-	const { register, formState, handleSubmit } = useForm();
+	const { signup, isLoading } = useSignup();
+	const { register, formState, handleSubmit, reset, getValues } = useForm();
 	const { errors } = formState;
 
-	function onSubmit(data) {
-		console.log(data);
+	function onSubmit({ email, password, fullName }) {
+		signup({ email, password, fullName }, { onSettled: reset });
 	}
 	return (
 		<Form onSubmit={handleSubmit(onSubmit)}>
diff --git a/src/features/authentication/useSignup.js b/src/features/authentication/useSignup.js
new file mode 100644
index 0000000..1456980
--- /dev/null
+++ b/src/features/authentication/useSignup.js
@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { signup as signupApi } from '../../services/apiAuthentication';
+import toast from 'react-hot-toast';
+
+export function useSignup() {
+	const { mutate: signup, isLoading } = useMutation({
+		mutationFn: signupApi,
+		onSuccess: (user) => {
+			console.log('User signed up successfully', user);
+			toast.success('User signed up successfully, please verify your email');
+		},
+	});
+
+	return { signup, isLoading };
+}
diff --git a/src/services/apiAuthentication.js b/src/services/apiAuthentication.js
index 6ff4f47..99e8ef2 100644
--- a/src/services/apiAuthentication.js
+++ b/src/services/apiAuthentication.js
@@ -1,5 +1,21 @@
 import supabase from './supabase';
 
+export async function signup({ email, password, fullName }) {
+	const { data, error } = await supabase.auth.signUp({
+		email,
+		password,
+		options: {
+			data: { fullName, avatar: '', role: 'user' },
+		},
+	});
+
+	if (error) {
+		console.error(error);
+		throw new Error(error.message || 'Signup failed');
+	}
+	return data;
+}
+
 export async function login({ email, password }) {
 	const { data, error } = await supabase.auth.signInWithPassword({
 		email,