Add Verification Page

project-words.txt

@@ -11,3 +11,4 @@ linejoin
 mingcute
 shadcn
 clsx
+didn

src/app/auth/page.tsx

@@ -1,7 +1,7 @@
 import FormAuth from '@/components/pages/auth/form-auth'
-import ImageCard from '@/components/pages/auth/image-card'
 import Content from '@/components/ui/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() {

src/app/profile/page.tsx

@@ -1,7 +1,7 @@
-import ImageCard from '@/components/pages/auth/image-card'
 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() {

src/app/verification/page.tsx

@@ -0,0 +1,26 @@
+import ControlOtp from '@/components/pages/verification/control-otp'
+import Content from '@/components/ui/content'
+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 (
+    <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 items-center">
+              <h1 className="title-lg">Check your Email</h1>
+              <ThemeToggler />
+            </div>
+            <ControlOtp className="mt-5" />
+          </div>
+        </div>
+      </Content>
+    </section>
+  )
+}

src/components/pages/auth/form-auth.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import OtpInput from '@/components/pages/auth/otp-input'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
@@ -12,10 +11,9 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { LENGTH_OTP } from '@/constants'
-import { classnames } from '@/utils'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
 
@@ -27,8 +25,6 @@ const formSchema = z.object({
 })
 
 const AuthForm: FC<FormAuthProps> = ({ className }) => {
-  const [otp, setOtp] = useState<string>('')
-
   const form = useForm<z.infer<typeof formSchema>>({
     defaultValues: {
       agreement: false,
@@ -37,17 +33,15 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
     resolver: zodResolver(formSchema),
   })
 
-  const otpChange = (value: string) => setOtp(value.trim())
-
   function onSubmit(values: z.infer<typeof formSchema>) {
-    alert(JSON.stringify({ ...values, otp }))
+    alert(JSON.stringify(values))
     console.log(values)
   }
 
   return (
     <Form {...form}>
       <form
-        className={classnames('space-y-8', className)}
+        className={cn('space-y-8', className)}
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <FormField
@@ -65,7 +59,6 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <OtpInput length={LENGTH_OTP} onChange={otpChange} otpValue={otp} />
         <FormField
           control={form.control}
           name="agreement"

src/components/pages/profile/form-profile.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { PROFILE_NAME_LENGTH } from '@/constants'
-import { classnames } from '@/utils'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
@@ -40,7 +40,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
   return (
     <Form {...form}>
       <form
-        className={classnames('space-y-8 pr-[9.75rem]', className)}
+        className={cn('space-y-8 pr-[9.75rem]', className)}
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <FormField

src/components/pages/verification/control-otp.tsx

@@ -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&apos;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

src/components/pages/auth/otp-input.tsx → src/components/pages/verification/otp-input.tsx

@@ -142,7 +142,7 @@ const OtpInput: FC<OtpInputProps> = ({
         <Input
           autoComplete="one-time-code"
           className={cn(
-            'max-w-[3.5rem] text-center font-title py-5 text-[1.75rem] leading-[2.125rem] focus:border-bright-blue font-medium tracking-[0.0225rem]',
+            'flex-shrink-0 max-w-[3.5rem] text-center font-title py-5 text-[1.75rem] leading-[2.125rem] focus:border-bright-blue font-medium tracking-[0.0225rem]',
             isError && 'text-bright-red'
           )}
           inputMode="numeric"

src/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva('overflow-hidden inline-block text-center', {
     size: {
       default: 'py-3.5 px-5 rounded-2xl',
       icon: 'py-1 px-2 rounded-lg text-xs',
-      theme_icon: 'h-10 w-10',
+      theme_icon: 'p-[0.1875rem] rounded-lg',
     },
     variant: {
       default:
@@ -21,7 +21,7 @@ const buttonVariants = cva('overflow-hidden inline-block text-center', {
         'text-base-gray-4 bg-base-gray-3 dark:text-base-gray-8 dark:bg-base-gray-7',
       icon: 'text-base-gray-8 bg-base-gray-2',
       outline:
-        'border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'border border-base-gray-3 text-base-gray-9 dark:border-base-gray-4 dark:text-base-gray-4 hover:bg-base-gray-1 dark:hover:bg-base-gray-9',
     },
   },
 })

src/components/ui/content.tsx

@@ -1,4 +1,4 @@
-import { classnames } from '@/utils'
+import { cn } from '@/lib/utils'
 import { FC, ReactNode } from 'react'
 
 type ContentProps = {
@@ -7,11 +7,7 @@ type ContentProps = {
 }
 
 const Content: FC<ContentProps> = ({ children, className }) => {
-  return (
-    <div className={classnames('px-5 w-full h-full', className)}>
-      {children}
-    </div>
-  )
+  return <div className={cn('px-5 w-full h-full', className)}>{children}</div>
 }
 
 export default Content

src/components/ui/icons.tsx

@@ -82,6 +82,24 @@ export const Icons = {
       />
     </svg>
   ),
+  moon: ({ size, ...props }: IconProps) => {
+    const dimension = getIconDimension(size)
+    return (
+      <svg
+        fill="none"
+        height={dimension}
+        viewBox="0 0 24 24"
+        width={dimension}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M19.8173 13.5843C19.7368 13.5036 19.6359 13.4463 19.5253 13.4187C19.4147 13.3911 19.2987 13.394 19.1897 13.4273C17.9931 13.7892 16.7208 13.8195 15.5083 13.5151C14.2958 13.2107 13.1886 12.583 12.3047 11.6989C11.4207 10.8148 10.7931 9.70733 10.4888 8.49459C10.1845 7.28185 10.2148 6.00925 10.5766 4.8124C10.6102 4.70334 10.6134 4.58719 10.5859 4.47644C10.5584 4.36569 10.5012 4.26453 10.4206 4.18384C10.3399 4.10316 10.2388 4.04599 10.128 4.01849C10.0173 3.991 9.90118 3.99421 9.79214 4.02779C8.13778 4.53468 6.6854 5.55055 5.64167 6.93083C4.7289 8.14293 4.17214 9.58559 4.03393 11.0967C3.89572 12.6079 4.18154 14.1276 4.85927 15.4853C5.53701 16.8429 6.57981 17.9846 7.87052 18.7821C9.16124 19.5796 10.6487 20.0014 12.1659 20C13.9358 20.0054 15.6587 19.4299 17.0702 18.3617C18.4502 17.3178 19.4658 15.8651 19.9726 14.2104C20.0058 14.1017 20.0089 13.9861 19.9815 13.8758C19.9542 13.7656 19.8974 13.6648 19.8173 13.5843ZM16.3156 17.359C14.9864 18.3603 13.3402 18.8478 11.6803 18.7315C10.0203 18.6152 8.45813 17.9031 7.28141 16.7263C6.1047 15.5494 5.39262 13.987 5.27625 12.3267C5.15988 10.6664 5.64706 9.01988 6.6481 7.69032C7.30029 6.82888 8.14346 6.13057 9.11125 5.65035C9.05612 6.03734 9.02833 6.42773 9.0281 6.81863C9.03038 8.98206 9.89064 11.0562 11.4201 12.586C12.9496 14.1158 15.0233 14.9762 17.1863 14.9785C17.5779 14.9784 17.969 14.9506 18.3567 14.8953C17.8761 15.8635 17.1774 16.7068 16.3156 17.359Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  },
   photo_profile: (props: IconProps) => (
     <svg
       fill="none"
@@ -152,4 +170,22 @@ export const Icons = {
       </defs>
     </svg>
   ),
+  sun: ({ size, ...props }: IconProps) => {
+    const dimension = getIconDimension(size)
+    return (
+      <svg
+        fill="none"
+        height={dimension}
+        viewBox="0 0 24 24"
+        width={dimension}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M3.49611 11.6922C3.49611 11.5003 3.56014 11.3324 3.6962 11.1964C3.83227 11.0685 4.00035 11.0045 4.17643 11.0045H5.8092C5.99328 11.0045 6.14535 11.0685 6.27341 11.2044C6.39347 11.3404 6.4575 11.5003 6.4575 11.6922C6.4575 11.8841 6.40147 12.044 6.28142 12.18C6.16136 12.3159 6.00129 12.3799 5.8172 12.3799H4.18443C4.00035 12.3799 3.84027 12.3159 3.70421 12.18C3.6379 12.1173 3.58522 12.0416 3.54942 11.9577C3.51362 11.8738 3.49547 11.7834 3.49611 11.6922ZM5.78519 17.2336C5.78519 17.0497 5.84922 16.8898 5.96927 16.7458L7.14582 15.6024C7.26588 15.4744 7.42596 15.4184 7.61805 15.4184C7.81014 15.4184 7.97021 15.4824 8.09827 15.6024C8.22633 15.7223 8.29036 15.8742 8.29036 16.0581C8.29036 16.2501 8.22633 16.426 8.09827 16.5699L6.96174 17.7054C6.63358 17.9612 6.30543 17.9612 5.97728 17.7054C5.91489 17.6439 5.86569 17.5703 5.83267 17.4892C5.79965 17.4081 5.78349 17.3211 5.78519 17.2336ZM5.78519 6.1668C5.78519 5.98289 5.84922 5.82296 5.96927 5.67903C6.12935 5.54309 6.29743 5.47912 6.48151 5.47912C6.6576 5.47912 6.81767 5.54309 6.95373 5.67103L8.09827 6.84648C8.22633 6.96642 8.29036 7.12635 8.29036 7.31826C8.29036 7.51017 8.22633 7.67009 8.09827 7.79803C7.97021 7.92597 7.81014 7.98994 7.61805 7.98994C7.42596 7.98994 7.26588 7.92597 7.14582 7.79803L5.97728 6.65457C5.91405 6.59036 5.86445 6.51407 5.83145 6.43025C5.79844 6.34644 5.78271 6.25683 5.78519 6.1668ZM7.82614 11.6922C7.82614 10.9485 8.01023 10.2529 8.38641 9.61318C8.76258 8.97348 9.26682 8.46172 9.91512 8.0859C10.5634 7.71007 11.2518 7.52616 11.9961 7.52616C12.5564 7.52616 13.0926 7.63811 13.6129 7.862C14.1251 8.0859 14.5733 8.38176 14.9415 8.75758C15.3177 9.1334 15.6138 9.5732 15.8299 10.085C16.046 10.5967 16.1581 11.1405 16.1581 11.7002C16.1581 12.4518 15.974 13.1475 15.5978 13.7872C15.2216 14.4269 14.7174 14.9307 14.0771 15.3065C13.4368 15.6823 12.7405 15.8662 11.9881 15.8662C11.2357 15.8662 10.5394 15.6823 9.89912 15.3065C9.25882 14.9307 8.75458 14.4269 8.3784 13.7872C8.01823 13.1395 7.82614 12.4438 7.82614 11.6922ZM9.18678 11.6922C9.18678 12.4758 9.45891 13.1395 10.0112 13.6913C10.5554 14.243 11.2197 14.5229 12.0041 14.5229C12.7885 14.5229 13.4528 14.243 14.005 13.6913C14.5573 13.1395 14.8374 12.4758 14.8374 11.6922C14.8374 10.9246 14.5573 10.2689 14.005 9.71713C13.4528 9.17338 12.7885 8.90151 12.0041 8.90151C11.2277 8.90151 10.5634 9.17338 10.0192 9.71713C9.45891 10.2689 9.18678 10.9246 9.18678 11.6922ZM11.3158 17.9133C11.3158 17.7214 11.3798 17.5614 11.5159 17.4335C11.6519 17.3056 11.812 17.2416 11.9961 17.2416C12.1882 17.2416 12.3563 17.3056 12.4843 17.4335C12.6124 17.5614 12.6764 17.7214 12.6764 17.9133V19.5045C12.6764 19.6964 12.6124 19.8644 12.4763 20.0003C12.3403 20.1362 12.1802 20.2002 11.9961 20.2002C11.812 20.2002 11.6439 20.1362 11.5159 20.0003C11.4505 19.9356 11.3991 19.8583 11.3647 19.773C11.3303 19.6878 11.3136 19.5964 11.3158 19.5045V17.9133ZM11.3158 5.5191V3.88787C11.3158 3.70396 11.3798 3.54403 11.5159 3.4081C11.6519 3.27216 11.812 3.2002 12.0041 3.2002C12.1962 3.2002 12.3483 3.26417 12.4843 3.4001C12.6204 3.53604 12.6844 3.69596 12.6844 3.87988V5.5191C12.6844 5.70302 12.6204 5.85495 12.4843 5.98289C12.3483 6.11083 12.1882 6.1668 12.0041 6.1668C11.82 6.1668 11.6519 6.10283 11.5239 5.98289C11.3958 5.86294 11.3158 5.70302 11.3158 5.5191ZM15.7339 16.0581C15.7339 15.8742 15.7979 15.7223 15.9179 15.6104C16.038 15.4824 16.1901 15.4264 16.3662 15.4264C16.5582 15.4264 16.7183 15.4904 16.8464 15.6104L18.0149 16.7538C18.143 16.8898 18.207 17.0577 18.207 17.2416C18.207 17.4255 18.143 17.5854 18.0149 17.7134C17.6948 17.9612 17.3746 17.9612 17.0545 17.7134L15.9179 16.5779C15.7952 16.4329 15.7297 16.248 15.7339 16.0581ZM15.7339 7.32625C15.7339 7.12635 15.7979 6.96642 15.9179 6.85448L17.0545 5.67903C17.1806 5.5556 17.3502 5.48667 17.5267 5.48712C17.7188 5.48712 17.8789 5.55109 18.0069 5.68703C18.143 5.82296 18.207 5.98289 18.207 6.1668C18.207 6.36671 18.143 6.53463 18.0149 6.66257L16.8464 7.80603C16.7023 7.93397 16.5422 7.99794 16.3662 7.99794C16.1821 7.99794 16.038 7.93397 15.9179 7.80603C15.7979 7.67809 15.7339 7.51816 15.7339 7.32625ZM17.5427 11.6922C17.5427 11.5003 17.6067 11.3404 17.7348 11.1964C17.8629 11.0685 18.0149 11.0045 18.191 11.0045H19.8078C19.9919 11.0045 20.1519 11.0765 20.288 11.2124C20.4241 11.3484 20.4961 11.5083 20.4961 11.6922C20.4961 11.8761 20.4241 12.036 20.288 12.172C20.1519 12.3079 19.9919 12.3719 19.8078 12.3719H18.191C18.0069 12.3719 17.8468 12.3079 17.7268 12.172C17.6067 12.036 17.5427 11.8841 17.5427 11.6922Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  },
 }

src/components/pages/auth/image-card.tsx → src/components/ui/image-card.tsx

@@ -1,4 +1,4 @@
-import { classnames } from '@/utils'
+import { cn } from '@/lib/utils'
 import { FC, ReactNode } from 'react'
 
 type ImageCardProps = {
@@ -9,7 +9,7 @@ type ImageCardProps = {
 const ImageCard: FC<ImageCardProps> = ({ children, className }) => {
   return (
     <div
-      className={classnames(
+      className={cn(
         'flex items-center justify-center rounded-3xl bg-gradient-purple-blue',
         className
       )}

src/components/ui/theme-toggler.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Moon, Sun } from 'lucide-react'
+import { Icons } from '@/components/ui/icons'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 
@@ -22,8 +22,8 @@ export function ThemeToggler() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button size="theme_icon" variant="outline">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <Icons.sun className="dark:absolute scale-100 dark:scale-0" />
+          <Icons.moon className="absolute dark:static scale-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>