Signing up new user

src/features/authentication/SignupForm.jsx

@@ -1,25 +1,58 @@
 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 { signup, isLoading } = useSignup();
+	const { register, formState, handleSubmit, reset, getValues } = useForm();
+	const { errors } = formState;
+
+	function onSubmit({ email, password, fullName }) {
+		signup({ email, password, fullName }, { onSettled: reset });
+	}
 	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>

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 };
+}

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;

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,
@@ -10,9 +26,6 @@ export async function login({ email, password }) {
 		console.error(error);
 		throw new Error(error.message || 'Login failed');
 	}
-
-	console.log('Authenticated user:', data);
-
 	return data;
 }