-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
15 changed files
with
199 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,3 +11,4 @@ linejoin | |
| mingcute | ||
| shadcn | ||
| clsx | ||
| didn | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,22 @@ | ||
| import FormAuth from '@/components/pages/auth/form-auth' | ||
| import ImageCard from '@/components/pages/auth/image-card' | ||
| import Content from '@/components/ui/content' | ||
| import AuthContent from '@/components/pages/auth-content' | ||
| import { Icons } from '@/components/ui/icons' | ||
| import ImageCard from '@/components/ui/image-card' | ||
| import { ThemeToggler } from '@/components/ui/theme-toggler' | ||
|
|
||
| export default function Auth() { | ||
| return ( | ||
| <section className="h-screen w-screen bg-gradient-blue-white"> | ||
| <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8"> | ||
| <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black"> | ||
| <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex pt-24 pr-8 pb-36 pl-5"> | ||
| <Icons.golub /> | ||
| </ImageCard> | ||
| <div> | ||
| <div className="flex justify-between pb-2"> | ||
| <h1 className="title-lg">Authentication</h1> | ||
| <ThemeToggler /> | ||
| </div> | ||
| <FormAuth className="mt-5" /> | ||
| </div> | ||
| </div> | ||
| </Content> | ||
| </section> | ||
| <AuthContent> | ||
| <ImageCard className="-my-[4.375rem] hidden sm:flex"> | ||
| <Icons.golub /> | ||
| </ImageCard> | ||
| <article> | ||
| <header className="flex justify-between pb-2"> | ||
| <h1 className="title-lg">Authentication</h1> | ||
| <ThemeToggler /> | ||
| </header> | ||
| <FormAuth className="mt-5" /> | ||
| </article> | ||
| </AuthContent> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,22 @@ | ||
| import ImageCard from '@/components/pages/auth/image-card' | ||
| import AuthContent from '@/components/pages/auth-content' | ||
| import FileInput from '@/components/pages/profile/file-input' | ||
| import FormProfile from '@/components/pages/profile/form-profile' | ||
| import Content from '@/components/ui/content' | ||
| import ImageCard from '@/components/ui/image-card' | ||
| import { ThemeToggler } from '@/components/ui/theme-toggler' | ||
|
|
||
| export default function Profile() { | ||
| return ( | ||
| <section className="h-screen w-screen bg-gradient-blue-white"> | ||
| <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8"> | ||
| <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black"> | ||
| <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex py-32 px-[3.25rem]"> | ||
| <FileInput /> | ||
| </ImageCard> | ||
| <div> | ||
| <div className="flex justify-between pb-2 mt-8"> | ||
| <h1 className="title-lg">Profile</h1> | ||
| <ThemeToggler /> | ||
| </div> | ||
| <FormProfile className="mt-5" /> | ||
| </div> | ||
| </div> | ||
| </Content> | ||
| </section> | ||
| <AuthContent> | ||
| <ImageCard className="-my-[4.375rem] hidden sm:flex py-32 px-[3.25rem]"> | ||
| <FileInput /> | ||
| </ImageCard> | ||
| <article> | ||
| <header className="flex justify-between pb-2 mt-8"> | ||
| <h1 className="title-lg">Profile</h1> | ||
| <ThemeToggler /> | ||
| </header> | ||
| <FormProfile className="mt-5" /> | ||
| </article> | ||
| </AuthContent> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import AuthContent from '@/components/pages/auth-content' | ||
| import ControlOtp from '@/components/pages/verification/control-otp' | ||
| import { Icons } from '@/components/ui/icons' | ||
| import ImageCard from '@/components/ui/image-card' | ||
| import { ThemeToggler } from '@/components/ui/theme-toggler' | ||
|
|
||
| export default function Verification() { | ||
| return ( | ||
| <AuthContent> | ||
| <ImageCard className="-my-[4.375rem] hidden sm:flex"> | ||
| <Icons.golub /> | ||
| </ImageCard> | ||
| <article> | ||
| <header className="flex justify-between items-center"> | ||
| <h1 className="title-lg">Check your Email</h1> | ||
| <ThemeToggler /> | ||
| </header> | ||
| <ControlOtp className="mt-5" /> | ||
| </article> | ||
| </AuthContent> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import Content from '@/components/ui/content' | ||
| import { cn } from '@/lib/utils' | ||
| import { FC, ReactNode } from 'react' | ||
|
|
||
| type AuthContentProps = { | ||
| children: ReactNode | ||
| className?: string | ||
| } | ||
|
|
||
| const AuthContent: FC<AuthContentProps> = ({ children, className }) => { | ||
| return ( | ||
| <div className={cn('h-screen w-screen bg-gradient-blue-white', className)}> | ||
| <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8"> | ||
| <section className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black"> | ||
| {children} | ||
| </section> | ||
| </Content> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default AuthContent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| 'use client' | ||
|
|
||
| import OtpInput from '@/components/pages/verification/otp-input' | ||
| import { Button } from '@/components/ui/button' | ||
| import { LENGTH_OTP } from '@/constants' | ||
| import { cn } from '@/lib/utils' | ||
| import { FC, useState } from 'react' | ||
|
|
||
| type ControlOtpProps = { className?: string } | ||
|
|
||
| const MOCK_OTP = '12345' // TODO: remove | ||
|
|
||
| const ControlOtp: FC<ControlOtpProps> = ({ className }) => { | ||
| const [otp, setOtp] = useState<string>('') | ||
| const [otpIsInvalid, setOtpIsInvalid] = useState<boolean>(false) | ||
|
|
||
| const otpIncomplete = otp.length < LENGTH_OTP | ||
|
|
||
| const otpChange = (value: string) => { | ||
| if (otpIsInvalid) { | ||
| setOtpIsInvalid(false) | ||
| } | ||
| setOtp(value.trim()) | ||
| } | ||
|
|
||
| const validateOtp = () => { | ||
| if (otp !== MOCK_OTP) { | ||
| setOtpIsInvalid(true) | ||
| return | ||
| } | ||
|
|
||
| // TODO: send otp to server | ||
| } | ||
|
|
||
| return ( | ||
| <div className={cn('lg:pr-28', className)}> | ||
| <p | ||
| className={cn( | ||
| 'cursor-default text-base-gray-6', | ||
| otpIsInvalid && 'text-bright-red' | ||
| )} | ||
| > | ||
| {otpIsInvalid | ||
| ? 'The code is not correct. Try again' | ||
| : 'Paste dynamically generated code'} | ||
| </p> | ||
| <OtpInput | ||
| className="mt-3" | ||
| isError={otpIsInvalid} | ||
| length={LENGTH_OTP} | ||
| onChange={otpChange} | ||
| otpValue={otp} | ||
| /> | ||
| <button className="block mt-4 text-bright-orange"> | ||
| Didn't get anything? Resend me code. | ||
| </button> | ||
| <Button | ||
| className="w-full mt-3" | ||
| disabled={otpIncomplete} | ||
| onClick={validateOtp} | ||
| variant={otpIncomplete ? 'disabled' : 'default'} | ||
| > | ||
| Next | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ControlOtp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.