Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auth page UI Update #716

Closed
wants to merge 3 commits into from
Closed

Auth page UI Update #716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79ddcf2
Fix: on the second social button, change it from 'sign in with google…
Jul 29, 2024
fcd8435
Fix: adjust buttons and input fields heights and set max-width of for…
Jul 29, 2024
8ec23e0
Feat: Add register auth
Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/(auth-routes)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const LoginPage = () => {
}, []);
return (
<div className="flex min-h-full items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div className="w-full max-w-[34.5rem] space-y-8">
<div className="text-center">
<h1 className="font-inter text-neutralColor-dark-2 mb-5 text-center text-2xl font-semibold leading-tight">
Login
Expand Down
337 changes: 187 additions & 150 deletions src/app/(auth-routes)/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,166 +53,203 @@ const SignUp = () => {
})();
};

const [data, setData] = useState(null);
const handleSubmit = () => {
form.handleSubmit(handleFormSubmit)();
// useEffect(() => {
const { fullname, email, password } = form.control._formValues;
const names = fullname.split(" ");
const first_name = names[0];
const last_name = names[1];
// console.log(form.control._formValues);
async function fetchData() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}api/v1/auth/register`,
{
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({
email,
first_name,
last_name,
password,
}),
},
);
const result = await response.json();
setData(result);
}

fetchData();
// // }, []);
};

return (
<div>
<div className="flex flex-col items-center gap-2">
<h1 className="text-2xl font-bold">Sign Up</h1>
<p className="my-4 text-gray-500">
Create an account to get started with us.
</p>
</div>
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
<Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/google.svg"
width={20}
height={20}
alt="Goggle"
className="mr-2"
/>
Sign in with Google
</Button>
<Button className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/facebook.svg"
width={20}
height={20}
alt="Facebook"
className="mr-2"
/>
Sign in with Google
</Button>
</div>
<div className="mx-auto py-4 md:w-2/4">
<Form {...form}>
<form
className="space-y-8"
onSubmit={(event) => {
event.preventDefault();
handleSubmit();
}}
>
<FormField
control={form.control}
name="fullname"
render={({ field }) => (
<FormItem className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<FormLabel>Fullname</FormLabel>
<FormControl>
<Input
placeholder="Enter your fullname"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="Enter your email address"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
<div className="flex flex-col items-center">
<div className="gap- flex w-full max-w-[34.5rem] flex-col gap-6">
<div className="flex flex-col items-center gap-4">
<h1 className="text-2xl font-bold">Sign Up</h1>
<p className="text-gray-500">
Create an account to get started with us.
</p>
</div>
<div className="flex h-16 flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
<Button className="flex !h-full w-full items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/google.svg"
width={20}
height={20}
alt="Goggle"
className="mr-2"
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<FormLabel>Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your password"
type="password"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
Sign in with Google
</Button>
<Button className="flex !h-full w-full items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/facebook.svg"
width={20}
height={20}
alt="Facebook"
className="mr-2"
/>
<Button type="submit" className="w-full" onClick={handleSubmit}>
Create Account
</Button>
<DialogDemo open={open} onOpenChanged={setOpen}>
<DialogContent
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
className="flex w-full flex-col items-center gap-4"
Sign in with Facebook
</Button>
</div>
<div className="flex flex-col">
<Form {...form}>
<form
className="space-y-8"
onSubmit={(event) => {
event.preventDefault();
handleSubmit();
}}
>
<FormField
control={form.control}
name="fullname"
render={({ field }) => (
<FormItem className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<FormLabel>Fullname</FormLabel>
<FormControl>
<Input
placeholder="Enter your fullname"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="Enter your email address"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<FormLabel>Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your password"
type="password"
{...field}
value={field.value || ""}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
/>
<Button
type="submit"
className="!h-16 w-full"
onClick={handleSubmit}
>
<DialogTitle className="text-xl font-bold text-[#0F172A]">
Sign Up
</DialogTitle>
<div className="flex flex-col items-center">
<p className="text-xs text-gray-600">
Choose your sign-up method:
</p>
<ul className="flex list-disc flex-col items-center text-xs text-gray-600">
<li>Use the temporary sign-in code sent to your mail or</li>
<li>Continue with email and password</li>
</ul>
</div>
<p className="text-xs">
Please paste (or type) your 6-digit code:{" "}
</p>
<InputOTP maxLength={6}>
{...[0, 1, 2, 3, 4, 5].map((number_) => (
<InputOTPGroup key={number_}>
<InputOTPSlot index={number_} />
</InputOTPGroup>
))}
</InputOTP>
<Button type="submit" className="w-full">
Continue
</Button>
<div className="flex flex-col items-center">
<p className="text-xs text-gray-500">
Would you rather use email and password?
Create Account
</Button>
<DialogDemo open={open} onOpenChanged={setOpen}>
<DialogContent
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
className="flex w-full flex-col items-center gap-4"
>
<DialogTitle className="text-xl font-bold text-[#0F172A]">
Sign Up
</DialogTitle>
<div className="flex flex-col items-center">
<p className="text-xs text-gray-600">
Choose your sign-up method:
</p>
<ul className="flex list-disc flex-col items-center text-xs text-gray-600">
<li>
Use the temporary sign-in code sent to your mail or
</li>
<li>Continue with email and password</li>
</ul>
</div>
<p className="text-xs">
Please paste (or type) your 6-digit code:{" "}
</p>
<p className="text-xs text-orange-500">
Continue with email and password
<InputOTP maxLength={6}>
{...[0, 1, 2, 3, 4, 5].map((number_) => (
<InputOTPGroup key={number_}>
<InputOTPSlot index={number_} />
</InputOTPGroup>
))}
</InputOTP>
<Button type="submit" className="w-full">
Continue
</Button>
<div className="flex flex-col items-center">
<p className="text-xs text-gray-500">
Would you rather use email and password?
</p>
<p className="text-xs text-orange-500">
Continue with email and password
</p>
</div>
<p className="text-center text-xs text-gray-500">
We would process your data as set forth in our Terms of Use,
Privacy Policy and Data Processing Agreement
</p>
</div>
<p className="text-center text-xs text-gray-500">
We would process your data as set forth in our Terms of Use,
Privacy Policy and Data Processing Agreement
</p>
</DialogContent>
</DialogDemo>
<div className="flex justify-center gap-2">
<p className="text-sm">Already Have An Account?</p>
<Link className="text-sm text-orange-500" href="/login">
Login
</Link>
</div>
</form>
</Form>
</DialogContent>
</DialogDemo>
<div className="flex justify-center gap-2">
<p className="text-sm">Already Have An Account?</p>
<Link className="text-sm text-orange-500" href="/login">
Login
</Link>
</div>
</form>
</Form>
</div>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProperties>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={reference}
Expand Down
Loading