Implemented email verification

2024-04-12 13:52:16 +03:00
parent 78107d4ec7
commit b1ad7b5c3e
51 changed files with 604 additions and 213 deletions
--- a/components/auth/register-form.tsx
+++ b/components/auth/register-form.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import { infer as zInfer } from 'zod'
+import { useState, useTransition } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { CardWrapper } from '@/components/auth/card-wrapper'
+import { useI18n } from '@/locales/client'
+import { Button } from '@/components/ui/button'
+import FormError from '@/components/form-error'
+import FormSuccess from '@/components/form-success'
+
+import { register } from '@/actions/register'
+import { RegisterSchema } from '@/schemas'
+import { AUTH_LOGIN_URL } from '@/config/routes'
+
+export const RegisterForm = () => {
+  // const [currentPassword, setCurrentPassword] = useState('')
+  // const [password, setPassword] = useState('')
+  // const [passwordConfirmation, setPasswordConfirmation] = useState('')
+  const [error, setError] = useState<string | undefined>('')
+  const [success, setSuccess] = useState<string | undefined>('')
+  const [isPending, startTransition] = useTransition()
+
+  const t = useI18n()
+
+  const form = useForm<zInfer<typeof RegisterSchema>>({
+    resolver: zodResolver(RegisterSchema), defaultValues: {
+      email: '', password: '', name: '',
+    },
+  })
+
+  const onSubmit = (values: zInfer<typeof RegisterSchema>) => {
+    setError('')
+    setSuccess('')
+
+    startTransition(() => {
+      register(values).then((data) => {
+        // @ts-ignore
+        setError(t(data?.error))
+        // @ts-ignore
+        setSuccess(t(data?.success))
+      })
+    })
+  }
+
+  return (<CardWrapper
+    headerLabel={t('auth.form.register.header_label')}
+    headerTitle={t('auth.title')}
+    backButtonLabel={t('auth.form.register.back_button_label')}
+    backButtonHref={AUTH_LOGIN_URL}
+    showSocial
+    continueWithLabel={t('form.label.continue_with')}
+  >
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+      >
+        <div className="space-y-4">
+          {/*Name*/}
+          <FormField control={form.control} name="name"
+                     render={({ field }) => (<FormItem>
+                       <FormLabel>{t('form.label.name')}</FormLabel>
+                       <FormControl>
+                         <Input
+                           {...field}
+                           disabled={isPending}
+                           placeholder={t('form.placeholder.name')}
+                           type="text"
+                         />
+                       </FormControl>
+                       <FormMessage className="text-xs"/>
+                     </FormItem>)}/>
+          {/*Email*/}
+          <FormField control={form.control} name="email"
+                     render={({ field }) => (<FormItem>
+                       <FormLabel>{t('form.label.email')}</FormLabel>
+                       <FormControl>
+                         <Input
+                           {...field}
+                           disabled={isPending}
+                           placeholder={t('form.placeholder.email')}
+                           type="email"
+                           autoComplete="username"
+                         />
+                       </FormControl>
+                       <FormMessage className="text-xs"/>
+                     </FormItem>)}/>
+          {/*Password*/}
+          <FormField control={form.control} name="password"
+                     render={({ field }) => (<FormItem className="zhopa">
+                       <FormLabel>{t('form.label.password')}</FormLabel>
+                       <FormControl>
+                         <Input
+                           {...field}
+                           disabled={isPending}
+                           type="password"
+                           placeholder="******"
+                           autoComplete="new-password"
+                         />
+                       </FormControl>
+                       <FormMessage className="text-xs"/>
+                     </FormItem>)}/>
+        </div>
+        <FormSuccess message={success}/>
+        <FormError message={error}/>
+        <Button type="submit" className="w-full" disabled={isPending}>
+          {t('form.label.register')}
+        </Button>
+      </form>
+    </Form>
+  </CardWrapper>)
+}