[go: up one dir, main page]
Scribd
Upload
17 views6 pages

User Registration and Login Form

The document outlines a React component named ClientForm that utilizes hooks for form handling and user authentication. It integrates form validation using Zod and provides user feedback through toast notifications. The form captures user details and handles user registration and login, redirecting to a new appointment page upon successful login.

Uploaded by

vedbhor25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views6 pages

User Registration and Login Form

The document outlines a React component named ClientForm that utilizes hooks for form handling and user authentication. It integrates form validation using Zod and provides user feedback through toast notifications. The form captures user details and handles user registration and login, redirecting to a new appointment page upon successful login.

Uploaded by

vedbhor25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

// 'use client';

// import { zodResolver } from '@hookform/resolvers/zod';


// import { useRouter } from 'next/navigation';
// import { useContext, useEffect, useState } from 'react';
// import { useForm } from 'react-hook-form';
// import { z } from 'zod';

// import { Form } from '@/components/ui/form';


// import { UserFormValidation } from '@/lib/validation';

// import 'react-phone-number-input/[Link]';
// import CustomFormField, { FormFieldType } from '../CustomFormField';
// import SubmitButton from '../SubmitButton';
// import { toast, Toaster } from 'sonner';
// import {
// createUser,
// registerUserDocument,
// } from '../../lib/actions/[Link]';
// import { UserContext } from '@/context/UserContext';

// export const ClientForm = () => {


// const userContext = useContext(UserContext);

// // Handle the case when `userContext` is undefined


// if (!userContext) {
// throw new Error('ClientForm must be used within a UserContextProvider');
// }

// const { isLoggedIn, setIsLoggedIn } = userContext;


// const router = useRouter();
// const [isLoading, setIsLoading] = useState(false);

// useEffect(() => {
// if (isLoggedIn) {
// [Link]('Hmm Looks like you are already logged in 🤔');
// }
// }, [isLoggedIn]);

// const form = useForm<[Link]<typeof UserFormValidation>>({


// resolver: zodResolver(UserFormValidation),
// defaultValues: {
// name: '',
// email: '',
// phone: '',
// password: '',
// },
// });

// const onSubmit = async (values: [Link]<typeof UserFormValidation>) => {


// setIsLoading(true);

// try {
// const user = {
// name: [Link],
// email: [Link],
// phone: [Link],
// password: [Link],
// };
// // Create user and handle response
// const newUser = await createUser(user);

// const response = await fetch('/api/signin', {


// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: [Link]({ email: [Link], password: [Link] }),
// });
// [Link]('response', response);

// const data = await [Link]();


// [Link]('data', data);

// if (data && [Link] === 'success') {


// const fetchData = async () => {
// const result = await fetch('/api/user'); // Replace with your API
endpoint
// const userData = await [Link]();

// if (userData && [Link] === 'success') {


// const id = userData?.user?.$id;

// const newUserDoc = {
// userId: id,
// name: [Link],
// email: [Link],
// phone: [Link],
// password: [Link],
// };
// [Link]('newUserDoc', newUserDoc);
// // registers user document in database and handles response
// await registerUserDocument(newUserDoc);
// [Link]('Login Successful! 🎉');
// [Link](`/clients/${id}/new-appointment`);
// [Link]('im here 123 newUserDoc', newUserDoc);

// setIsLoggedIn(true);
// } else {
// [Link]('User data fetch failed.');
// }
// };
// } else {
// [Link]('Error during user registration blabla:', data);
// [Link](`Login Failed: ${data?.error}.`);
// }
// } catch (error) {
// [Link]('Error during user registration or login:', error);
// [Link]('An error occurred. Please try again.');
// } finally {
// setIsLoading(false);
// }
// };

// return (
// <Form {...form}>
// <form onSubmit={[Link](onSubmit)} className='flex-1 space-y-6'>
// <section className='mb-12 space-y-4'>
// <h1 className='header'>Hi there 👋</h1>
// <p className='text-dark-700'>Get started with appointments.</p>
// </section>

// <CustomFormField
// fieldType={[Link]}
// control={[Link]}
// name='name'
// label='Full name'
// placeholder='Enter your Name'
// iconSrc='/assets/icons/[Link]'
// iconAlt='user'
// />

// <CustomFormField
// fieldType={[Link]}
// control={[Link]}
// name='email'
// label='Email'
// placeholder='Enter your Email'
// iconSrc='/assets/icons/[Link]'
// iconAlt='email'
// />

// <CustomFormField
// fieldType={[Link]}
// control={[Link]}
// name='password'
// label='Password'
// placeholder='Enter your Password'
// iconSrc='/assets/icons/[Link]'
// iconAlt='password'
// />

// <CustomFormField
// fieldType={FormFieldType.PHONE_INPUT}
// control={[Link]}
// name='phone'
// label='Phone number'
// placeholder='Enter your Phone number'
// />

// <SubmitButton isLoading={isLoading}>Get Started</SubmitButton>


// </form>
// <Toaster />
// </Form>
// );
// };

'use client';

import { zodResolver } from '@hookform/resolvers/zod';


import { useRouter } from 'next/navigation';
import { useContext, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { Form } from '@/components/ui/form';


import { UserFormValidation } from '@/lib/validation';

import 'react-phone-number-input/[Link]';
import CustomFormField, { FormFieldType } from '../CustomFormField';
import SubmitButton from '../SubmitButton';
import { toast, Toaster } from 'sonner';
import {
createUser,
registerUserDocument,
} from '../../lib/actions/[Link]';
import { UserContext } from '@/context/UserContext';

export const ClientForm = () => {


const userContext = useContext(UserContext);

if (!userContext) {
throw new Error('ClientForm must be used within a UserContextProvider');
}

const { isLoggedIn, setIsLoggedIn } = userContext;


const router = useRouter();
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
if (isLoggedIn) {
[Link]('Hmm Looks like you are already logged in 🤔');
[Link]('/'); // Redirect the user if already logged in
}
}, [isLoggedIn, router]);

const form = useForm<[Link]<typeof UserFormValidation>>({


resolver: zodResolver(UserFormValidation),
defaultValues: {
name: '',
email: '',
phone: '',
password: '',
},
});

const onSubmit = async (values: [Link]<typeof UserFormValidation>) => {


setIsLoading(true);

try {
// Create the user
await createUser({
name: [Link],
email: [Link],
phone: [Link],
password: [Link],
});

// Log the user in


const response = await fetch('/api/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: [Link]({
email: [Link],
password: [Link],
}),
});

const data = await [Link]();


[Link]('data', data);

if ([Link] === 'success') {


const result = await fetch('/api/user');
const userData = await [Link]();
[Link]('userData', userData);

if (userData && [Link] === 'success') {


const id = userData?.user?.$id;

const newUserDoc = {
userId: id,
name: [Link],
email: [Link],
phone: [Link],
password: [Link],
};

await registerUserDocument(newUserDoc);
[Link]('Login Successful! 🎉');
setIsLoggedIn(true);
[Link](`/clients/${id}/new-appointment`);
} else {
[Link]('User data fetch failed.');
}
} else {
[Link](`Login Failed: ${data?.error}.`);
}
} catch (error) {
[Link]('Error during user registration or login:', error);
[Link]('An error occurred. Please try again.');
} finally {
setIsLoading(false);
}
};

return (
<Form {...form}>
<form onSubmit={[Link](onSubmit)} className='flex-1 space-y-6'>
<section className='mb-12 space-y-4'>
<h1 className='header'>Hi there 👋</h1>
<p className='text-dark-700'>Get started with appointments.</p>
</section>

<CustomFormField
fieldType={[Link]}
control={[Link]}
name='name'
label='Full name'
placeholder='Enter your Name'
iconSrc='/assets/icons/[Link]'
iconAlt='user'
/>
<CustomFormField
fieldType={[Link]}
control={[Link]}
name='email'
label='Email'
placeholder='Enter your Email'
iconSrc='/assets/icons/[Link]'
iconAlt='email'
/>

<CustomFormField
fieldType={[Link]}
control={[Link]}
name='password'
label='Password'
placeholder='Enter your Password'
iconSrc='/assets/icons/[Link]'
iconAlt='password'
/>

<CustomFormField
fieldType={FormFieldType.PHONE_INPUT}
control={[Link]}
name='phone'
label='Phone number'
placeholder='Enter your Phone number'
/>

<SubmitButton isLoading={isLoading}>Get Started</SubmitButton>


</form>
<Toaster />
</Form>
);
};

You might also like