Implemented email verification

components/auth/card-wrapper.tsx

@@ -1,8 +1,8 @@
 'use client'
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
-import { Header } from '@/components/auth/Header'
-import { Social } from '@/components/auth/Social'
-import { BackButton } from '@/components/auth/BackButton'
+import { Header } from '@/components/auth/header'
+import { Social } from '@/components/auth/social'
+import { BackButton } from '@/components/auth/back-button'
 
 type Props = {
   children: React.ReactNode
@@ -25,7 +25,7 @@ export const CardWrapper = ({
 }: Props) => {
   return (
     <Card
-      className="max-w-[414px] w-[100%] shadow-md md:min-w-[414px] sm:w-full">
+      className={`max-w-[430px] w-[100%] shadow-md md:min-w-[430px] sm:w-full`}>
       <CardHeader>
         <Header label={headerLabel} title={headerTitle}/>
       </CardHeader>

components/auth/error-card.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CardWrapper } from '@/components/auth/CardWrapper'
+import { CardWrapper } from '@/components/auth/card-wrapper'
 import { AUTH_LOGIN_URL } from '@/config/routes'
 import { useI18n } from '@/locales/client'
 import { TriangleAlert } from 'lucide-react'

components/auth/login-form.tsx

@@ -14,11 +14,11 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { CardWrapper } from '@/components/auth/CardWrapper'
+import { CardWrapper } from '@/components/auth/card-wrapper'
 import { useI18n } from '@/locales/client'
 import { Button } from '@/components/ui/button'
-import FormError from '@/components/FormError'
-import FormSuccess from '@/components/FormSuccess'
+import FormError from '@/components/form-error'
+import FormSuccess from '@/components/form-success'
 import { login } from '@/actions/login'
 import { LoginSchema } from '@/schemas'
 import { AUTH_REGISTER_URL } from '@/config/routes'

components/auth/navbar.tsx

@@ -1,6 +1,4 @@
-'use client'
-//import { useScopedI18n } from '@/locales/client'
-import LocaleSwitcher from '@/components/LocaleSwitcher'
+import LocaleSwitcher from '@/components/locale-switcher'
 
 export default function Navbar () {
   //const t = useScopedI18n('navbar')

components/auth/register-form.tsx

@@ -13,11 +13,11 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { CardWrapper } from '@/components/auth/CardWrapper'
+import { CardWrapper } from '@/components/auth/card-wrapper'
 import { useI18n } from '@/locales/client'
 import { Button } from '@/components/ui/button'
-import FormError from '@/components/FormError'
-import FormSuccess from '@/components/FormSuccess'
+import FormError from '@/components/form-error'
+import FormSuccess from '@/components/form-success'
 
 import { register } from '@/actions/register'
 import { RegisterSchema } from '@/schemas'

components/auth/user-verification-form.tsx

@@ -0,0 +1,43 @@
+'use client'
+import { CardWrapper } from '@/components/auth/card-wrapper'
+import { AUTH_LOGIN_URL } from '@/config/routes'
+import { useI18n } from '@/locales/client'
+import { useCallback, useEffect, useState } from 'react'
+import { userVerification } from '@/actions/user-verification'
+import FormSuccess from '@/components/form-success'
+import FormError from '@/components/form-error'
+import { Bars } from 'react-loader-spinner'
+
+const UserVerificationForm = ({ token }: { token: string }) => {
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [success, setSuccess] = useState<string | undefined>(undefined)
+
+  const onSubmit = useCallback(() => {
+
+    userVerification(token).then(data => {
+      setSuccess(data?.success)
+      setError(data?.error)
+    }).catch(() => {
+      setError('something went wrong')
+    })
+  }, [token])
+
+  useEffect(() => onSubmit(), [onSubmit])
+
+  const t = useI18n()
+
+  return (<CardWrapper
+    headerTitle={t('auth.title')}
+    headerLabel={t('auth.form.verification.header_label')}
+    backButtonLabel={t('auth.form.verification.back_button_label')}
+    backButtonHref={AUTH_LOGIN_URL}
+  >
+    <div className="w-full flex items-center justify-center">
+      <Bars visible={!success && !error} color="hsl(var(--primary))" ariaLabel="loading" wrapperClass="opacity-50"/>
+      <FormSuccess message={success}/>
+      <FormError message={error}/>
+    </div>
+  </CardWrapper>)
+}
+
+export default UserVerificationForm