Implemented email verification

components/TranslateClientFragment.tsx

@@ -1,26 +0,0 @@
-import { useI18n } from '@/locales/client'
-
-type Props = {
-  message: string
-}
-
-const _ = (message: string): string => {
-  const t = useI18n()
-  if (message.startsWith('["')) {
-    const data = JSON.parse(message)
-    if (data.length > 1) {
-      message = data.shift()
-      // @ts-ignore
-      return t(message, ...data)
-    }
-  }
-
-  // @ts-ignore
-  return t(message)
-}
-
-const TranslateClientFragment = ({ message }: Props) => {
-  return <>{_(message)}</>
-}
-
-export default TranslateClientFragment

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

components/locale-switcher.tsx

@@ -2,7 +2,7 @@
 import { useChangeLocale, useCurrentLocale } from '@/locales/client'
 import { LC, type loc } from '@/config/locales'
 import { ChangeEvent } from 'react'
-import styles from '@/styles/LocaleSwitcher.module.scss'
+import styles from '@/styles/locale-switcher.module.scss'
 
 export default function LocaleSwitcher () {
   const changeLocale = useChangeLocale()

components/translate-client-fragment.tsx

@@ -0,0 +1,23 @@
+import { useI18n } from '@/locales/client'
+
+export const __ = (key: any, params?: any): React.ReactNode => {
+  const t = useI18n()
+
+  if (key.startsWith('["')) {
+    const data = JSON.parse(key)
+
+    if (data.length > 1) {
+      key = data.shift()
+      // @ts-ignore
+      return t(key, ...data)
+    }
+  }
+
+  return t(key, params)
+}
+
+const TranslateClientFragment = ({ message, args }: { message: any, args?: any }) => {
+  return <>{__(message, args)}</>
+}
+
+export default TranslateClientFragment

components/ui/form.tsx

@@ -10,9 +10,9 @@ import {
   useFormContext,
 } from 'react-hook-form'
 
-import { cn } from '@/lib/utils'
+import { cn, env } from '@/lib/utils'
 import { Label } from '@/components/ui/label'
-import TranslateClientFragment from '@/components/TranslateClientFragment'
+import TranslateClientFragment from '@/components/translate-client-fragment'
 
 const Form = FormProvider
 
@@ -132,8 +132,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
       className={cn('text-sm font-medium text-destructive', className)}
       {...props}
     >
-      {!process.env.IS_SERVER_FLAG && typeof body === 'string' &&
-      body.includes('schema.message')
+      {!env('IS_SERVER_FLAG') && typeof body === 'string' && body.match(/^(|\[")schema\./)
         ? <TranslateClientFragment message={body}/>
         : body}
     </p>)