finished reset password & other changes

2024-04-24 22:37:55 +03:00 · 2024-04-24 22:37:55 +03:00 · 53cadc289a
commit 53cadc289a
parent b1ad7b5c3e
58 changed files with 1520 additions and 349 deletions
--- a/.gitignore
+++ b/.gitignore
@ -112,4 +112,6 @@ fabric.properties
 .idea/httpRequests

 # Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
+.idea/caches/build_file_checksums.ser
+/prisma/_____migrations___/
+/resources/images/
--- a/actions/login.ts
+++ b/actions/login.ts
@ -43,12 +43,12 @@ export const login = async (values: zInfer<typeof LoginSchema>) => {
          return { error: 'common.something_went_wrong' }
      }
    }
-
+    // TODO: logging must be implemented
    throw error
  }
 }

-export const SignInProvider = async (provider: 'google' | 'github' | 'facebook') => {
+export const SignInProvider = async (provider: 'google' | 'github') => {
  await signIn(provider, {
    redirectTo: DEFAULT_LOGIN_REDIRECT,
  })
--- a/actions/new-password.ts
+++ b/actions/new-password.ts
@ -0,0 +1,66 @@
+'use server'
+
+import { NewPasswordSchema } from '@/schemas'
+import { infer as zInfer } from 'zod'
+import bcrypt from 'bcryptjs'
+import { PASSWORD_SALT_LENGTH } from '@/config/validation'
+
+import { getPasswordResetTokenByToken } from '@/data/password-reset-token'
+import { getUserByEmail } from '@/data/user'
+import db from '@/lib/db'
+
+export const newPassword = async (values: zInfer<typeof NewPasswordSchema>, token?: string | null) => {
+  if (!token) {
+    return { error: 'auth.form.error.missing_token' }
+  }
+
+  const validatedFields = NewPasswordSchema.safeParse(values)
+
+  if (!validatedFields.success) {
+    return { error: 'auth.form.error.invalid_fields' }
+  }
+
+  const existingToken = await getPasswordResetTokenByToken(token)
+
+  if (!existingToken) {
+    return { error: 'auth.form.error.invalid_token' }
+  }
+
+  const hasExpired = new Date(existingToken.expires) < new Date()
+
+  if (hasExpired) {
+    return { error: 'auth.form.error.expired_token' }
+  }
+
+  const existingUser = await getUserByEmail(existingToken.email)
+
+  if (!existingUser) {
+    return { error: 'auth.form.error.invalid_email' }
+  }
+
+  const { password } = validatedFields.data
+  const hashedPassword = await bcrypt.hash(password, PASSWORD_SALT_LENGTH)
+
+  try {
+    await db.user.update({
+      where: { id: existingUser.id },
+      data: { password: hashedPassword },
+    })
+  } catch (err) {
+    console.error(err)
+    return { error: 'db.error.update.user_password' }
+  }
+
+  try {
+    await db.passwordResetToken.delete({
+      where: { id: existingToken.id },
+    })
+
+    return { success: 'db.success.update.password_updated' }
+  } catch (err) {
+    //TODO: Implement logging
+    console.error(err)
+  }
+
+  return { error: 'db.error.common.something_wrong' }
+}
--- a/actions/register.ts
+++ b/actions/register.ts
@ -1,9 +1,8 @@
 'use server'

+import { RegisterSchema } from '@/schemas'
 import { infer as zInfer } from 'zod'
 import bcrypt from 'bcryptjs'
-
-import { RegisterSchema } from '@/schemas'
 import { PASSWORD_SALT_LENGTH } from '@/config/validation'
 import db from '@/lib/db'
 import { getUserByEmail } from '@/data/user'
--- a/actions/reset.ts
+++ b/actions/reset.ts
@ -0,0 +1,24 @@
+'use server'
+
+import { infer as zInfer } from 'zod'
+import { ResetSchema } from '@/schemas'
+import { getUserByEmail } from '@/data/user'
+import { sendPasswordResetEmail } from '@/actions/send-verification-email'
+
+export const reset = async (values: zInfer<typeof ResetSchema>) => {
+  const validatedFields = ResetSchema.safeParse(values)
+
+  if (!validatedFields.success) {
+    return { error: 'auth.form.error.invalid_fields' }
+  }
+
+  const { email } = validatedFields.data
+
+  const existingUser = await getUserByEmail(email)
+
+  if (!existingUser) {
+    return { error: 'auth.email.success.reset_email_sent' }
+  }
+
+  return await sendPasswordResetEmail(existingUser.email as string, existingUser.name)
+}
--- a/actions/send-verification-email.ts
+++ b/actions/send-verification-email.ts
@ -1,18 +1,28 @@
 'use server'

 import mailer from '@/lib/mailer'
-import { AUTH_USER_VERIFICATION_URL } from '@/config/routes'
-import { generateVerificationToken } from '@/lib/tokens'
+import { AUTH_NEW_PASSWORD_URL, AUTH_USER_VERIFICATION_URL } from '@/config/routes'
+import { generatePasswordResetToken, generateVerificationToken } from '@/lib/tokens'
 import { env } from '@/lib/utils'
+import { __ct } from '@/lib/translate'
+import { body } from '@/templates/email/send-verification-email'

-const sendVerificationEmail = async (email: string, name?: string | null) => {
+const sendVerificationEmail = async (
+  email: string,
+  name?: string | null,
+) => {
  const verificationToken = await generateVerificationToken(email)
-  const confirmLink: string = [env('SITE_URL'), AUTH_USER_VERIFICATION_URL, verificationToken.token].join('')
+  const confirmLink: string = [env('SITE_URL'), AUTH_USER_VERIFICATION_URL, '/', verificationToken.token].join('')
+  const message = (await body({ confirmLink }))

  const { isOk, code, info, error } = await mailer({
    to: name ? { name: name?.toString(), address: verificationToken.email } : verificationToken.email,
-    subject: 'Complete email verification for A-Naklejka',
-    html: `<p>Click <a href="${confirmLink}">here</a> to confirm email</p>`,
+    subject: await __ct({
+      key: 'mailer.subject.send_verification_email',
+      params: { site_name: env('SITE_NAME') },
+    }),
+    text: message?.text,
+    html: message?.html,
  })

  if (isOk) {
@ -22,4 +32,24 @@ const sendVerificationEmail = async (email: string, name?: string | null) => {
  }
 }

-export { sendVerificationEmail }
+const sendPasswordResetEmail = async (
+  email: string,
+  name?: string | null,
+) => {
+  const resetToken = await generatePasswordResetToken(email)
+  const resetLink: string = [env('SITE_URL'), AUTH_NEW_PASSWORD_URL, '/', resetToken.token].join('')
+
+  const { isOk, code, info, error } = await mailer({
+    to: name ? { name: name?.toString(), address: resetToken.email } : resetToken.email,
+    subject: 'Reset your password at A-Naklejka',
+    html: `<p>Click <a href="${resetLink}">here</a> to reset password</p>`,
+  })
+
+  if (isOk) {
+    return { success: code === 250 ? 'auth.email.success.reset_email_sent' : info?.response }
+  } else {
+    return { error: env('DEBUG') === 'true' ? error?.response : 'auth.email.error.reset_password_sending_error' }
+  }
+}
+
+export { sendVerificationEmail, sendPasswordResetEmail }
--- a/actions/user-verification.ts
+++ b/actions/user-verification.ts
@ -25,7 +25,7 @@ export const userVerification = async (token: string) => {
    })
  } catch (e) {
    console.error(e)
-    return { error: 'Could not update user data! Please, try again by reloading page!' }
+    return { error: 'db.error.update.user_data' }
  }

  try {
--- a/app/[locale]/(root)/(routes)/about/page.tsx
+++ b/app/[locale]/(root)/(routes)/about/page.tsx
@ -6,9 +6,7 @@ export const metadata: Metadata = {
 }

 const AboutPage = () => {
-  return <>About
-    <hr/>
-  </>
+  return <>ABOUT</>
 }

 export default AboutPage
--- a/app/[locale]/(root)/page.tsx
+++ b/app/[locale]/(root)/page.tsx
@ -1,8 +1,11 @@
 import { Poppins } from 'next/font/google'
 import { getScopedI18n } from '@/locales/server'
-import { cn, env } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import LoginButton from '@/components/auth/login-button'
+import Image from 'next/image'
+import wolf from '@/img/Gray wolf portrait.jpg'
+import { Grid } from 'react-loader-spinner'

 const font = Poppins({
  subsets: ['latin'], weight: ['600'],
@ -18,10 +21,10 @@ export default async function Home () {
        🔐 {t('title')}
      </h1>
      <p className="text-lg text-white">{t('subtitle')}</p>
+      <Image src={wolf} alt="Picture of a wolf" width={430} placeholder="blur"/>
      <div>
        <LoginButton>
          <Button variant="secondary" size="lg">{t('sign_in')}</Button>
-
        </LoginButton>
      </div>
    </div>
--- a/app/[locale]/auth/new-password/[token]/page.tsx
+++ b/app/[locale]/auth/new-password/[token]/page.tsx
@ -0,0 +1,5 @@
+import { NewPasswordForm } from '@/components/auth/new-password-form'
+
+export default function NewPasswordPage ({ params }: { params: { token: string } }) {
+  return <NewPasswordForm token={params.token}/>
+}
--- a/app/[locale]/auth/reset/page.tsx
+++ b/app/[locale]/auth/reset/page.tsx
@ -0,0 +1,5 @@
+import { ResetForm } from '@/components/auth/reset-form'
+
+const ResetPage = () => <ResetForm/>
+
+export default ResetPage
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@ -8,6 +8,20 @@ body,
    height: 100%;
 }

+input[aria-invalid='true'], input:not(:placeholder-shown):invalid {
+
+    color: hsl(0 84.2% 60.2%);
+    border: 1px solid rgb(239, 68, 68);
+    outline-color: hsl(0 84.2% 92.2%) !important;
+}
+
+input[aria-invalid='false']:not(:placeholder-shown) {
+
+    color: hsl(140.8 53.1% 53.1%);
+    border: 1px solid rgb(72, 199, 116);
+    outline-color: hsl(140.8 53.1% 92.2%) !important;
+}
+
@layer base {
    :root {
        --background: 0 0% 100%;
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -4,6 +4,7 @@ import './globals.css'
 import { ReactElement } from 'react'
 import { I18nProviderClient } from '@/locales/client'
 import { lc } from '@/lib/utils'
+import { Loading } from '@/components/loading'

 const inter = Inter({ subsets: ['cyrillic'] })

@ -19,11 +20,13 @@ export default function RootLayout ({
  params: { locale }, children,
 }: Readonly<Props>) {

-  return (<html lang={lc(locale).java}>
+  return (<html lang={lc(locale)?.java}>
+  {/*<Suspense fallback={<Loading/>}>*/}
  <body className={inter.className}>
-  <I18nProviderClient locale={locale} fallback={<p>Loading...</p>}>
+  <I18nProviderClient locale={locale} fallback={<Loading/>}>
    {children}
  </I18nProviderClient>
  </body>
+  {/*</Suspense>*/}
  </html>)
 }
--- a/app/robots.ts
+++ b/app/robots.ts
@ -0,0 +1,25 @@
+// eslint-disable-next-line validate-filename/naming-rules
+import type { MetadataRoute } from 'next'
+import { env } from '@/lib/utils'
+
+export default function robots (): MetadataRoute.Robots {
+  const url = new URL(env('SITE_URL'))
+  const host = ['80', '443'].includes(url.port) ? url.hostname : url.host
+
+  return {
+    rules: [
+      {
+        userAgent: ['YandexBot', 'Applebot'],
+        disallow: ['/'],
+      },
+      {
+        userAgent: '*',
+        allow: ['/'],
+        disallow: ['/auth/', '/api/'],
+        crawlDelay: 3,
+      },
+    ],
+    //sitemap: 'https://acme.com/sitemap.xml',
+    host,
+  }
+}
--- a/components/auth/card-wrapper.tsx
+++ b/components/auth/card-wrapper.tsx
@ -3,6 +3,8 @@ 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/back-button'
+import { Suspense } from 'react'
+import { Loading } from '@/components/loading'

 type Props = {
  children: React.ReactNode
@ -24,32 +26,31 @@ export const CardWrapper = ({
  continueWithLabel,
 }: Props) => {
  return (
-    <Card
-      className={`max-w-[430px] w-[100%] shadow-md md:min-w-[430px] sm:w-full`}>
-      <CardHeader>
-        <Header label={headerLabel} title={headerTitle}/>
-      </CardHeader>
-      <CardContent>
-        {children}
-      </CardContent>
-      {showSocial && <CardFooter className="flex-wrap">
-        <div className="relative flex-none w-[100%] mb-4"
-             style={{ display: 'block' }}>
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t"></span>
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
+    <Suspense fallback={<Loading/>}>
+      <Card
+        className="border-8 border-muted shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
+        <CardHeader>
+          <Header label={headerLabel} title={headerTitle}/>
+        </CardHeader>
+        <CardContent>
+          {children}
+        </CardContent>
+        {showSocial && <CardFooter className="flex-wrap">
+          <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t"></span>
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
            <span
              className="bg-background px-2 text-muted-foreground">{continueWithLabel}</span>
+            </div>
          </div>
-        </div>
-
-        {/*<Separator className="my-4"/>*/}
-        <Social/>
-      </CardFooter>}
-      <CardFooter>
-        <BackButton label={backButtonLabel} href={backButtonHref}/>
-      </CardFooter>
-    </Card>
+          <Social/>
+        </CardFooter>}
+        <CardFooter>
+          <BackButton label={backButtonLabel} href={backButtonHref}/>
+        </CardFooter>
+      </Card>
+    </Suspense>
  )
 }
--- a/components/auth/error-card.tsx
+++ b/components/auth/error-card.tsx
@ -14,9 +14,9 @@ const ErrorCard = () => {
      backButtonLabel={t('auth.form.error.back_button_label')}
      backButtonHref={AUTH_LOGIN_URL}
    >
-      <div className="w-full flex items-center justify-center">
-        <TriangleAlert className="w-4 h-4 text-destructive"/>
-        <p>ssss</p>
+      <div className="w-full flex items-center justify-center text-destructive">
+        <TriangleAlert className="w-4 h-4 mr-1.5"/>
+        <p>Hush little baby... this is prohibited zone!</p>
      </div>
    </CardWrapper>
  )
--- a/components/auth/login-form.tsx
+++ b/components/auth/login-form.tsx
@ -21,7 +21,8 @@ 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'
+import { AUTH_REGISTER_URL, AUTH_RESET_PASSWORD_URL } from '@/config/routes'
+import Link from 'next/link'

 export const LoginForm = () => {
  const t = useI18n()
@ -61,12 +62,12 @@ export const LoginForm = () => {
    backButtonLabel={t('auth.form.login.back_button_label')}
    backButtonHref={AUTH_REGISTER_URL}
    showSocial
-    continueWithLabel={t('form.label.continue_with')}
+    continueWithLabel={t('auth.form.label.continue_with')}
  >
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-6"
+        className="space-y-0"
      >
        <div className="space-y-4">
          <FormField control={form.control} name="email"
@ -78,7 +79,7 @@ export const LoginForm = () => {
                           disabled={isPending}
                           placeholder={t('form.placeholder.email')}
                           type="email"
-                           autoComplete="username"
+                           autoComplete="email"
                         />
                       </FormControl>
                       <FormMessage className="text-xs"/>
@ -96,9 +97,14 @@ export const LoginForm = () => {
                           autoComplete="current-password"
                         />
                       </FormControl>
+                       <Button variant="link" size="sm" asChild
+                               className="mt-0 p-0 items-start font-light text-sky-900">
+                         <Link href={AUTH_RESET_PASSWORD_URL}>{t('auth.form.login.reset_password_link_text')}</Link>
+                       </Button>
                       <FormMessage className="text-xs"/>
                     </FormItem>)}/>
        </div>
+
        <FormSuccess message={success}/>
        <FormError message={error || urlError}/>
        <Button type="submit" className="w-full" disabled={isPending}>
@ -107,6 +113,4 @@ export const LoginForm = () => {
      </form>
    </Form>
  </CardWrapper>)
-}
-
-//1:30:00
+}
--- a/components/auth/new-password-form.tsx
+++ b/components/auth/new-password-form.tsx
@ -0,0 +1,88 @@
+'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 { NewPasswordSchema } from '@/schemas'
+import { AUTH_LOGIN_URL } from '@/config/routes'
+import { newPassword } from '@/actions/new-password'
+
+export const NewPasswordForm = ({ token }: { token: string }) => {
+  const t = useI18n()
+
+  const [error, setError] = useState<string | undefined>('')
+  const [success, setSuccess] = useState<string | undefined>('')
+  const [isPending, startTransition] = useTransition()
+
+  const form = useForm<zInfer<typeof NewPasswordSchema>>({
+    resolver: zodResolver(NewPasswordSchema), defaultValues: {
+      password: '',
+    },
+  })
+
+  const onSubmit = (values: zInfer<typeof NewPasswordSchema>) => {
+    setError('')
+    setSuccess('')
+
+    startTransition(() => {
+      newPassword(values, token).then((data) => {
+        // @ts-ignore
+        setError(t(data?.error))
+        // @ts-ignore
+        setSuccess(t(data?.success))
+      })
+    })
+  }
+
+  return (<CardWrapper
+    headerTitle={t('auth.title')}
+    headerLabel={t('auth.form.new_password.header_label')}
+    backButtonLabel={t('auth.form.new_password.back_button_label')}
+    backButtonHref={AUTH_LOGIN_URL}
+  >
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-4"
+      >
+        <div className="space-y-4">
+          <FormField control={form.control} name="password"
+                     render={({ field }) => (<FormItem>
+                       <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('auth.form.new_password.button')}
+        </Button>
+      </form>
+    </Form>
+  </CardWrapper>)
+}
--- a/components/auth/register-form.tsx
+++ b/components/auth/register-form.tsx
@ -24,6 +24,7 @@ import { RegisterSchema } from '@/schemas'
 import { AUTH_LOGIN_URL } from '@/config/routes'

 export const RegisterForm = () => {
+  // TODO: create repeat password field
  // const [currentPassword, setCurrentPassword] = useState('')
  // const [password, setPassword] = useState('')
  // const [passwordConfirmation, setPasswordConfirmation] = useState('')
@ -59,7 +60,7 @@ export const RegisterForm = () => {
    backButtonLabel={t('auth.form.register.back_button_label')}
    backButtonHref={AUTH_LOGIN_URL}
    showSocial
-    continueWithLabel={t('form.label.continue_with')}
+    continueWithLabel={t('auth.form.label.continue_with')}
  >
    <Form {...form}>
      <form
@ -91,7 +92,7 @@ export const RegisterForm = () => {
                           disabled={isPending}
                           placeholder={t('form.placeholder.email')}
                           type="email"
-                           autoComplete="username"
+                           autoComplete="email"
                         />
                       </FormControl>
                       <FormMessage className="text-xs"/>
@ -115,7 +116,7 @@ export const RegisterForm = () => {
        <FormSuccess message={success}/>
        <FormError message={error}/>
        <Button type="submit" className="w-full" disabled={isPending}>
-          {t('form.label.register')}
+          {t('auth.form.register.button')}
        </Button>
      </form>
    </Form>
--- a/components/auth/reset-form.tsx
+++ b/components/auth/reset-form.tsx
@ -0,0 +1,88 @@
+'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 { ResetSchema } from '@/schemas'
+import { AUTH_LOGIN_URL } from '@/config/routes'
+import { reset } from '@/actions/reset'
+
+export const ResetForm = () => {
+  const t = useI18n()
+
+  const [error, setError] = useState<string | undefined>('')
+  const [success, setSuccess] = useState<string | undefined>('')
+  const [isPending, startTransition] = useTransition()
+
+  const form = useForm<zInfer<typeof ResetSchema>>({
+    resolver: zodResolver(ResetSchema), defaultValues: {
+      email: '',
+    },
+  })
+
+  const onSubmit = (values: zInfer<typeof ResetSchema>) => {
+    setError('')
+    setSuccess('')
+
+    startTransition(() => {
+      reset(values).then((data) => {
+        // @ts-ignore
+        setError(t(data?.error))
+        // @ts-ignore
+        setSuccess(t(data?.success))
+      })
+    })
+  }
+
+  return (<CardWrapper
+    headerTitle={t('auth.title')}
+    headerLabel={t('auth.form.reset.header_label')}
+    backButtonLabel={t('auth.form.reset.back_button_label')}
+    backButtonHref={AUTH_LOGIN_URL}
+  >
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-4"
+      >
+        <div className="space-y-4">
+          <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="email"
+                         />
+                       </FormControl>
+                       <FormMessage className="text-xs"/>
+                     </FormItem>)}/>
+        </div>
+
+        <FormSuccess message={success}/>
+        <FormError message={error}/>
+        <Button type="submit" className="w-full" disabled={isPending}>
+          {t('auth.form.reset.button')}
+        </Button>
+      </form>
+    </Form>
+  </CardWrapper>)
+}
--- a/components/auth/social.tsx
+++ b/components/auth/social.tsx
@ -11,12 +11,12 @@ export const Social = () => {

  return (
    <div className="flex items-center w-full gap-x-2">
-      <Button size="lg" className="w-full" variant="outline"
-              onClick={() => SignInProvider('google')}>
+      <Button size="lg" className="w-full" variant="outline" role="button"
+              onClick={() => SignInProvider('google')} aria-label="Sign in with Google">
        <FcGoogle className="w-5 h-5"/>
      </Button>
-      <Button size="lg" className="w-full" variant="outline"
-              onClick={() => SignInProvider('github')}>
+      <Button size="lg" className="w-full" variant="outline" role="button"
+              onClick={() => SignInProvider('github')} aria-label="Sign in with Github">
        <FaGithub className="w-5 h-5"/>
      </Button>
      {/*<Button size="lg" className="w-full" variant="outline" onClick={() => {}}>
--- a/components/loading.tsx
+++ b/components/loading.tsx
@ -0,0 +1,20 @@
+'use client'
+
+import { Grid } from 'react-loader-spinner'
+
+export function Loading () {
+  return (
+    <h1>
+      <Grid
+        visible={true}
+        height="666"
+        width="666"
+        color="#4fa94d"
+        ariaLabel="grid-loading"
+        radius="12.5"
+        wrapperStyle={{}}
+        wrapperClass="grid-wrapper"
+      />
+    </h1>
+  )
+}
--- a/components/locale-switcher.tsx
+++ b/components/locale-switcher.tsx
@ -13,7 +13,7 @@ export default function LocaleSwitcher () {
  return (
    //@ts-ignore
    <select onChange={selectHandler} defaultValue={locale}
-            className={styles['yo-locale-switcher']}>
+            className={styles['yo-locale-switcher']} aria-label="Switch language">
      {LC.map(item => (
        <option key={item.iso} value={item.code}>
          {item.iso.toUpperCase()}
--- a/components/translate-client-fragment.tsx
+++ b/components/translate-client-fragment.tsx
@ -1,3 +1,4 @@
+'use client'
 import { useI18n } from '@/locales/client'

 export const __ = (key: any, params?: any): React.ReactNode => {
--- a/config/auth.ts
+++ b/config/auth.ts
@ -5,10 +5,12 @@ import db from '@/lib/db'
 import authConfig from '@/auth.config'
 import { getUserById } from '@/data/user'
 import { AUTH_ERROR_URL, AUTH_LOGIN_URL } from '@/config/routes'
+import { getCurrentLocale } from '@/locales/server'
+import { type loc } from '@/config/locales'

 declare module 'next-auth' {
  interface Session {
-    user: { role: UserRole }
+    user: { role: UserRole, locale: loc }
  }
 }

@ -47,6 +49,7 @@ export const {
      return true
    },
    async session ({ token, session }) {
+
      if (token.sub && session.user) {
        session.user.id = token.sub
      }
@ -55,6 +58,8 @@ export const {
        session.user.role = token.role as UserRole
      }

+      session.user.locale = getCurrentLocale()
+
      return session
    },
    async jwt ({ token }) {
--- a/config/routes.ts
+++ b/config/routes.ts
@ -1,11 +1,13 @@
-import { locales } from '@/config/locales'
 import { UUID_V4_REGEX } from '@/config/validation'

 export const USER_PROFILE_URL: string = '/cabinet'
-export const AUTH_LOGIN_URL: string = '/auth/login'
-export const AUTH_REGISTER_URL: string = '/auth/register'
-export const AUTH_ERROR_URL: string = '/auth/error'
-export const AUTH_USER_VERIFICATION_URL: string = '/auth/user-verification/'
+export const AUTH_URL: string = '/auth/'
+export const AUTH_LOGIN_URL: string = `${AUTH_URL}login`
+export const AUTH_REGISTER_URL: string = `${AUTH_URL}register`
+export const AUTH_RESET_PASSWORD_URL: string = `${AUTH_URL}reset`
+export const AUTH_ERROR_URL: string = `${AUTH_URL}error`
+export const AUTH_USER_VERIFICATION_URL: string = `${AUTH_URL}user-verification`
+export const AUTH_NEW_PASSWORD_URL: string = `${AUTH_URL}new-password`

 /**
 * An array of routes that accessible to the public.
@ -13,7 +15,7 @@ export const AUTH_USER_VERIFICATION_URL: string = '/auth/user-verification/'
 * @type {string[]}
 */
 export const publicRoutes: string[] = [
-  '/', '/about', `${AUTH_USER_VERIFICATION_URL}${UUID_V4_REGEX}`]
+  '/', '/((about)(|/.*))', `(${AUTH_USER_VERIFICATION_URL}|${AUTH_NEW_PASSWORD_URL})/${UUID_V4_REGEX}`]

 /**
 * An array of routes that are used for authentication.
@ -21,7 +23,11 @@ export const publicRoutes: string[] = [
 * @type {string[]}
 */
 export const authRoutes: string[] = [
-  AUTH_LOGIN_URL, AUTH_REGISTER_URL, AUTH_ERROR_URL]
+  AUTH_LOGIN_URL, AUTH_REGISTER_URL, AUTH_ERROR_URL, AUTH_RESET_PASSWORD_URL]
+
+export const authRoutesRegEx = [
+  AUTH_URL + '(' +
+  authRoutes.map((uri: string) => uri.replace(AUTH_URL, '')).join('|') + ')']

 /**
 * The prefix for API authentication routes.
@ -36,9 +42,3 @@ export const apiAuthPrefix: string = '/api/auth'
 */
 export const DEFAULT_LOGIN_REDIRECT: string = USER_PROFILE_URL

-export const testPathnameRegex = (
-  pages: string[], pathName: string): boolean => {
-  const pattern: string = `^(/(${locales.join('|')}))?(${pages.flatMap(
-    (p) => (p === '/' ? ['', '/'] : p)).join('|')})/?$`
-  return RegExp(pattern, 'is').test(pathName)
-}
--- a/data/password-reset-token.ts
+++ b/data/password-reset-token.ts
@ -0,0 +1,17 @@
+import db from '@/lib/db'
+
+export const getPasswordResetTokenByToken = async (token: string) => {
+  try {
+    return await db.passwordResetToken.findUnique({ where: { token } })
+  } catch {
+    return null
+  }
+}
+
+export const getPasswordResetTokenByEmail = async (email: string) => {
+  try {
+    return await db.passwordResetToken.findFirst({ where: { email } })
+  } catch {
+    return null
+  }
+}
--- a/data/verification-token.ts
+++ b/data/verification-token.ts
@ -1,5 +1,4 @@
 import db from '@/lib/db'
-import { VerificationToken } from '@prisma/client'

 export const getVerificationTokenByToken = async (token: string) => {
  try {
@ -9,7 +8,7 @@ export const getVerificationTokenByToken = async (token: string) => {
  }
 }

-export const getVerificationTokenByEmail = async (email: string): Promise<VerificationToken | null> => {
+export const getVerificationTokenByEmail = async (email: string) => {
  try {
    return await db.verificationToken.findFirst({ where: { email } })
  } catch {
--- a/lib/server.ts
+++ b/lib/server.ts
@ -0,0 +1,7 @@
+'use server'
+
+import { readdir } from 'fs/promises'
+
+export const getDirectories = async (source: string) => {
+  return (await readdir(source, { withFileTypes: true })).filter(dirent => dirent.isDirectory()).map(dirent => dirent.name)
+}
--- a/lib/tokens.ts
+++ b/lib/tokens.ts
@ -1,14 +1,38 @@
-import { v4 as uuid } from 'uuid'
+import { v4 as uuidV4 } from 'uuid'
 import {
  VERIFICATION_TOKEN_EXPIRATION_DURATION,
 } from '@/config/auth'
 import db from '@/lib/db'
 import { getVerificationTokenByEmail } from '@/data/verification-token'
+import { getPasswordResetTokenByEmail } from '@/data/password-reset-token'
+
+export const generatePasswordResetToken = async (email: string) => {
+  const token = uuidV4()
+  const expires = new Date(new Date().getTime() + VERIFICATION_TOKEN_EXPIRATION_DURATION)
+  const existingToken = await getPasswordResetTokenByEmail(email)
+
+  if (existingToken) {
+    await db.passwordResetToken.delete({
+      where: {
+        id: existingToken.id,
+      },
+    })
+  }
+
+  const passwordResetToken = await db.passwordResetToken.create({
+    data: {
+      email,
+      token,
+      expires,
+    },
+  })
+
+  return passwordResetToken
+}

 export const generateVerificationToken = async (email: string) => {
-  const token = uuid()
-  const expires = new Date(
-    new Date().getTime() + VERIFICATION_TOKEN_EXPIRATION_DURATION)
+  const token = uuidV4()
+  const expires = new Date(new Date().getTime() + VERIFICATION_TOKEN_EXPIRATION_DURATION)

  const existingToken = await getVerificationTokenByEmail(email)

--- a/lib/translate.ts
+++ b/lib/translate.ts
@ -1,29 +1,75 @@
-import { type loc, locales, fallbackLocale } from '@/config/locales'
+'use server'

-export const __c = async (key: string | null | undefined, locale?: loc) => {
+import { fallbackLocale, type loc, locales } from '@/config/locales'
+import { getCurrentLocale } from '@/locales/server'
+import { getDirectories } from '@/lib/server'
+
+type Params = { [index: string]: number | string }
+
+interface DoParamsProps {
+  key: string;
+  params?: Params | null | undefined;
+}
+
+const doParams = async ({ key, params }: DoParamsProps): Promise<string> => {
+  if (key.trim().length === 0 || Object?.keys({ params }).length === 0) return key
+
+  for (let val in params) {key = key.replace(`{${val}}`, params[val] as string)}
+
+  return key
+}
+
+export const __ct = async ({ key, params }: { key: string | null | undefined, params?: {} }, locale?: loc) => {
  key = (key ?? '').trim()
  if (key.length === 0) return key

-  if (!locales.includes(locale ??= fallbackLocale)) {
+  locale ??= getCurrentLocale()
+
+  if (!locales.includes(locale)) {
    locale = fallbackLocale
  }

-  let data: any = await import(`@/locales/custom.${locale}`).then(({ default: data }) => data).catch(() => false)
+  const keys = key.split('.')
+  const scopes = await getDirectories(`${process.cwd()}/locales/custom`)
+
+  if (keys.length < 2 && !scopes.includes(keys[0])) return key
+  const scope = keys.shift()
+
+  let data: any = await import(`@/locales/custom/${scope}/${locale}`).then(({ default: data }) => data).catch(() => false)
  if (data === false) return key

-  const x = key.split('.')
-  let c: number = x.length
+  let c: number = keys.length

  if (c === 1) {
-    return data.hasOwn(x[0]) && typeof data[x[0]] === 'string' ? data[x[0]] : key
+    const _ = data.hasOwnProperty(keys[0]) && typeof data[keys[0]] === 'string' ? data[keys[0]] : key
+    return await doParams({ key: _, params })
  }

-  for (let i in x) {
-    if (data.hasOwn(x[i])) {
-      data = data[x[i]]
+  for (let i in keys) {
+    if (data.hasOwnProperty(keys[i])) {
+      data = data[keys[i]]
      c--
    }
  }

-  return c === 0 ? data : key
+  return await doParams({ key: c === 0 ? data : key, params })
 }
+
+export const _ctBatch = async (keys: { [index: string]: string | [string, Params] }, scope?: string | null) => {
+
+  for (const k in keys) {
+    let key: string = scope ? scope + '.' : ''
+    let params: Params | undefined = undefined
+
+    if (Array.isArray(keys[k])) {
+      key += keys[k][0]
+      params = keys[k][1] as Params
+    } else {
+      key += keys[k]
+    }
+
+    keys[k] = await __ct({ key, params })
+  }
+
+  return keys
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import { LC } from '@/config/locales'
+import { LC, locales } from '@/config/locales'

 import { env as dotEnv } from 'process'

@ -16,6 +16,14 @@ export function env (variable: string, defaultValue?: string | ''): string {
  return (dotEnv[variable] ?? defaultValue ?? '')
 }

-export function tr (el: React.ReactNode, params: object) {
+export const testPathnameRegex = (
+  pages: string[], pathName: string): boolean => {
+  const pattern: string = `^(/(${locales.join('|')}))?(${pages.flatMap(
+    (p) => (p === '/' ? ['', '/'] : p)).join('|')})/?$`
+
+  //console.log(pattern)
+
+  return RegExp(pattern, 'is').test(pathName)
+}
+

-}
--- a/locales/custom.en.ts
+++ b/locales/custom.en.ts
@ -1,10 +0,0 @@
-export default {
-  single: 'I am the only one',
-  a: {
-    b: {
-      c: {
-        d: 'I am custom english {man}',
-      },
-    },
-  },
-} as const
--- a/locales/custom.uk.ts
+++ b/locales/custom.uk.ts
@ -1,10 +0,0 @@
-export default {
-  single: 'Я єдиний',
-  a: {
-    b: {
-      c: {
-        d: 'Я звичайний український {man}',
-      },
-    },
-  },
-} as const
--- a/locales/custom/mailer/en.ts
+++ b/locales/custom/mailer/en.ts
@ -0,0 +1,15 @@
+export default {
+  follow: 'Follow the link',
+  click: 'Click',
+  here: 'here',
+  confirmed_email: 'to confirm email',
+  subject: {
+    send_verification_email: 'Complete email verification for site {site_name}',
+  },
+  body: {
+    send_verification_email: {
+      p1: 'You just signed up for {site_name}',
+      p2: 'If you have not registered on this site, simply ignore this message.',
+    },
+  },
+} as const
--- a/locales/custom/mailer/uk.ts
+++ b/locales/custom/mailer/uk.ts
@ -0,0 +1,15 @@
+export default {
+  follow: 'Перейдіть за посиланням',
+  click: 'Клацніть',
+  here: 'тут',
+  confirmed_email: 'для підтвердження електронної пошти',
+  subject: {
+    send_verification_email: 'Завершіть верифікацію Вашої електронної пошти для сайту {site_name}',
+  },
+  body: {
+    send_verification_email: {
+      p1: 'Ви щойно зареструвалися на сайті {site_name}',
+      p2: 'Якщо Ви не реєструвалися на цьому сайті, просто проігноруйте дане повідомлення.',
+    },
+  },
+} as const
--- a/locales/en.ts
+++ b/locales/en.ts
@ -1,74 +1,13 @@
+import pages from '@/locales/en/pages'
+import auth from '@/locales/en/auth'
+import form from '@/locales/en/form'
+import schema from '@/locales/en/schema'
+import db from '@/locales/en/db'
+
 export default {
-  auth: {
-    title: 'Auth',
-    subtitle: 'Simple authentication service',
-    sign_in: 'Sign In',
-    common: {
-      something_went_wrong: 'Something went wrong!',
-    },
-    form: {
-      login: {
-        header_label: 'Welcome back',
-        back_button_label: 'Don\'t have an account?',
-      },
-      register: {
-        header_label: 'Create an account',
-        back_button_label: 'Already have an account?',
-      },
-      verification: {
-        header_label: 'Confirming your account',
-        back_button_label: 'Back to login',
-      },
-      error: {
-        email_in_use: 'Email already in use with different provider!',
-        header_label: 'Oops! Something went wrong!',
-        back_button_label: 'Back to login',
-        email_taken: 'Can\'t create an user! Wait for verification by provided email.',
-        invalid_fields: 'Invalid fields!',
-        invalid_credentials: 'Invalid Credentials!',
-        access_denied: 'Access denied!',
-      },
-    },
-    email: {
-      success: {
-        confirmation_email_sent: 'Confirmation email sent!',
-      },
-      error: {
-        verification_email_sending_error: 'Could not send verification email!',
-      },
-    },
-  },
-  schema: {
-    password: {
-      required: 'Password is required',
-      strength: {
-        acme: 'Password must contain at least a single lowercase, uppercase, digit and special character. The length must be between {min} and {max} characters.',
-      },
-      length: {
-        min: 'Password must be at least {min} characters',
-        max: 'Password must be  maximally {max} characters',
-      },
-    },
-    email: {
-      required: 'Invalid email address',
-    },
-    name: {
-      required: `Name is required`,
-    },
-  },
-  form: {
-    label: {
-      email: 'Email',
-      password: 'Password',
-      confirm_password: 'Confirm password',
-      login: 'Login',
-      name: 'Name',
-      register: 'Register',
-      continue_with: 'Or continue with',
-    },
-    placeholder: {
-      email: 'john.doe@example.com',
-      name: 'John Doe',
-    },
-  },
+  pages,
+  auth,
+  form,
+  schema,
+  db,
 } as const
--- a/locales/en/auth.ts
+++ b/locales/en/auth.ts
@ -0,0 +1,61 @@
+export default {
+  title: 'Auth',
+  subtitle: 'Simple authentication service',
+  sign_in: 'Sign In',
+  common: {
+    something_went_wrong: 'Something went wrong!',
+  },
+  form: {
+    label: {
+      continue_with: 'Or continue with',
+    },
+    login: {
+      header_label: 'Welcome back',
+      back_button_label: 'Don\'t have an account?',
+      reset_password_link_text: 'Forgot password?',
+    },
+    register: {
+      button: 'Register',
+      header_label: 'Create an account',
+      back_button_label: 'Already have an account?',
+    },
+    verification: {
+      header_label: 'Confirming your account',
+      back_button_label: 'Back to login',
+    },
+    reset: {
+      button: 'Send reset email',
+      header_label: 'Forgot your password?',
+      back_button_label: 'Back to login',
+    },
+    new_password: {
+      button: 'Reset password',
+      header_label: 'Enter a new password',
+      back_button_label: 'Back to login',
+    },
+    error: {
+      email_in_use: 'Email already in use with different provider!',
+      header_label: 'Oops! Something went wrong!',
+      back_button_label: 'Back to login',
+      email_taken: 'Can\'t create an user! Wait for verification by provided email.',
+      invalid_fields: 'Invalid fields!',
+      invalid_credentials: 'Invalid Credentials!',
+      invalid_email: 'Email does not exist!',
+      access_denied: 'Access denied!',
+      missing_token: 'Missing token!',
+      invalid_token: 'Invalid token!',
+      expired_token: 'Token has expired!',
+    },
+  },
+  email: {
+    success: {
+      confirmation_email_sent: 'Confirmation email sent!',
+      reset_email_sent: 'A password reset letter has been sent to the specified email address!',
+    },
+    error: {
+      verification_email_sending_error: 'Could not send verification email!',
+      reset_password_sending_error: 'Could not send reset password email!',
+
+    },
+  },
+} as const
--- a/locales/en/db.ts
+++ b/locales/en/db.ts
@ -0,0 +1,17 @@
+export default {
+  error: {
+    update: {
+      user_data: 'Could not update user data! Please, try again by reloading the page!',
+      user_password: 'Could not update user password! Please, try again by reloading the page!',
+    },
+    common: {
+      something_wrong: 'Oops! Something went wrong. Please, try again.',
+    },
+  },
+  success: {
+    update: {
+      password_updated: 'Password updated successfully!',
+    },
+  },
+
+} as const
--- a/locales/en/form.ts
+++ b/locales/en/form.ts
@ -0,0 +1,13 @@
+export default {
+  label: {
+    email: 'Email',
+    password: 'Password',
+    confirm_password: 'Confirm password',
+    login: 'Login',
+    name: 'Name',
+  },
+  placeholder: {
+    email: 'dead.end@acme.com',
+    name: 'John Doe',
+  },
+} as const
--- a/locales/en/pages.ts
+++ b/locales/en/pages.ts
@ -0,0 +1,6 @@
+export default {
+  404: {
+    status: '404 Not Found',
+    title: 'Page Not Found',
+  },
+} as const
--- a/locales/en/schema.ts
+++ b/locales/en/schema.ts
@ -0,0 +1,18 @@
+export default {
+  password: {
+    required: 'Password is required',
+    strength: {
+      acme: 'Password must contain at least a single lowercase, uppercase, digit and special character. The length must be between {min} and {max} characters.',
+    },
+    length: {
+      min: 'Password must be at least {min} characters',
+      max: 'Password must be  maximally {max} characters',
+    },
+  },
+  email: {
+    required: 'Email address is required or invalid format',
+  },
+  name: {
+    required: `Name is required`,
+  },
+} as const
--- a/locales/uk.ts
+++ b/locales/uk.ts
@ -1,75 +1,13 @@
-export default {
-  auth: {
-    title: 'Auth',
-    subtitle: 'Простий сервіс аутентифікації',
-    sign_in: 'Увійти',
-    common: {
-      something_went_wrong: 'Щось пішло не так!',
-    },
-    form: {
-      login: {
-        header_label: 'Вхід до облікового запису',
-        back_button_label: 'Не маєте облікового запису?',
-      },
-      register: {
-        header_label: 'Реєстрація облікового запису',
-        back_button_label: 'Вже маєте обліковий запис?',
-      },
+import pages from '@/locales/uk/pages'
+import auth from '@/locales/uk/auth'
+import form from '@/locales/uk/form'
+import schema from '@/locales/uk/schema'
+import db from '@/locales/uk/db'

-      verification: {
-        header_label: 'Підтвердження вашого облікового запису',
-        back_button_label: 'Повернутися до форми авторизації',
-      },
-      error: {
-        email_in_use: 'Електронна пошта вже використовується з іншим логін-провайдером!',
-        header_label: 'Отакої! Щось пішло не так!',
-        back_button_label: 'Назад до форми входу до облікового запису',
-        email_taken: 'Не можу створити користувача! Не пройдена верифікація за допомогою вказаної електронної пошти.',
-        invalid_fields: 'Недійсні поля!',
-        invalid_credentials: 'Недійсні облікові дані!',
-        access_denied: 'У доступі відмовлено!',
-      },
-    },
-    email: {
-      success: {
-        confirmation_email_sent: 'Лист із підтвердженням надіслано!',
-      },
-      error: {
-        verification_email_sending_error: 'Не вдалося надіслати електронний лист для підтвердження!',
-      },
-    },
-  },
-  schema: {
-    password: {
-      required: 'Необхідно ввести пароль',
-      length: {
-        min: 'Пароль має містити принаймні {min} символів',
-        max: 'Максимальна кількість символів у паролі: {max}',
-      },
-      strength: {
-        acme: 'Пароль повинен містити принаймні один малий, приписний, цифровий та спеціальний символ. Довжина паролю має бути від {min} до {max} символів.',
-      },
-    },
-    email: {
-      required: 'Невірна адреса електронної пошти',
-    },
-    name: {
-      required: `Необхідно вказати ім'я`,
-    },
-  },
-  form: {
-    label: {
-      email: 'Електронна пошта',
-      password: 'Пароль',
-      confirm_password: 'Підтвердьте пароль',
-      login: 'Лоґін',
-      name: 'Ім\'я та прізвище',
-      register: 'Створити обліковий запис',
-      continue_with: 'Або продовжити за допомогою',
-    },
-    placeholder: {
-      email: 'polina.melnyk@mocking.net',
-      name: 'Поліна Мельник',
-    },
-  },
+export default {
+  pages,
+  auth,
+  form,
+  schema,
+  db,
 } as const
--- a/locales/uk/auth.ts
+++ b/locales/uk/auth.ts
@ -0,0 +1,59 @@
+export default {
+  title: 'Auth',
+  subtitle: 'Простий сервіс аутентифікації',
+  sign_in: 'Увійти',
+  common: {
+    something_went_wrong: 'Щось пішло не так!',
+  },
+  form: {
+    label: {
+      continue_with: 'Або продовжити за допомогою',
+    },
+    login: {
+      header_label: 'Вхід до облікового запису',
+      back_button_label: 'Не маєте облікового запису?',
+      reset_password_link_text: 'Забули пароль?',
+    },
+    register: {
+      button: 'Створити обліковий запис',
+      header_label: 'Реєстрація облікового запису',
+      back_button_label: 'Вже маєте обліковий запис?',
+    },
+    verification: {
+      header_label: 'Підтвердження вашого облікового запису',
+      back_button_label: 'Назад до входу',
+    },
+    reset: {
+      button: 'Скинути пароль',
+      header_label: 'Забули ваш пароль?',
+      back_button_label: 'Назад до входу',
+    },
+    new_password: {
+      button: 'Підтвердити новий пароль',
+      header_label: 'Введіть новий пароль',
+      back_button_label: 'Назад до входу',
+    },
+    error: {
+      email_in_use: 'Електронна пошта вже використовується з іншим логін-провайдером!',
+      header_label: 'Отакої! Щось пішло не так!',
+      back_button_label: 'Назад до форми входу до облікового запису',
+      email_taken: 'Не можу створити користувача! Не пройдена верифікація за допомогою вказаної електронної пошти.',
+      invalid_fields: 'Недійсні поля!',
+      invalid_credentials: 'Недійсні облікові дані!',
+      invalid_email: 'Електронну пошту не знайдено!',
+      access_denied: 'У доступі відмовлено!',
+      missing_token: 'Відсутній токен!',
+      invalid_token: 'Недійсний токен!',
+      expired_token: 'Сплив термін дії токена!',
+    },
+  },
+  email: {
+    success: {
+      confirmation_email_sent: 'Лист із підтвердженням надіслано!',
+      reset_email_sent: 'Лист для скидання паролю надіслано на вказану електронну адресу',
+    },
+    error: {
+      verification_email_sending_error: 'Не вдалося надіслати електронний лист для підтвердження!',
+    },
+  },
+} as const
--- a/locales/uk/db.ts
+++ b/locales/uk/db.ts
@ -0,0 +1,16 @@
+export default {
+  error: {
+    update: {
+      user_data: 'Не вдалося оновити дані користувача! Будь ласка, спробуйте ще раз, оновивши сторінку!',
+      user_password: 'Не вдалося оновити пароль користувача! Будь ласка, спробуйте ще раз, оновивши сторінку!',
+    },
+    common: {
+      something_wrong: 'Отакої! Щось пішло не так. Будь ласка, спробуйте ще раз.',
+    },
+  },
+  success: {
+    update: {
+      password_updated: 'Пароль успішно оновлено!',
+    },
+  },
+} as const
--- a/locales/uk/form.ts
+++ b/locales/uk/form.ts
@ -0,0 +1,13 @@
+export default {
+  label: {
+    email: 'Електронна пошта',
+    password: 'Пароль',
+    confirm_password: 'Підтвердьте пароль',
+    login: 'Лоґін',
+    name: 'Ім\'я та прізвище',
+  },
+  placeholder: {
+    email: 'dead.end@acme.com',
+    name: 'Джон Доу',
+  },
+} as const
--- a/locales/uk/pages.ts
+++ b/locales/uk/pages.ts
@ -0,0 +1,6 @@
+export default {
+  404: {
+    status: '404 Не знайдено',
+    title: 'Сторінку не знайдено',
+  },
+} as const
--- a/locales/uk/schema.ts
+++ b/locales/uk/schema.ts
@ -0,0 +1,18 @@
+export default {
+  password: {
+    required: 'Необхідно ввести пароль',
+    length: {
+      min: 'Пароль має містити принаймні {min} символів',
+      max: 'Максимальна кількість символів у паролі: {max}',
+    },
+    strength: {
+      acme: 'Пароль повинен містити принаймні один малий, приписний, цифровий та спеціальний символ. Довжина паролю має бути від {min} до {max} символів.',
+    },
+  },
+  email: {
+    required: 'Адреса електронної пошти обов’язкова або не дійсна',
+  },
+  name: {
+    required: `Необхідно вказати ім'я`,
+  },
+} as const
--- a/middleware.ts
+++ b/middleware.ts
@ -1,17 +1,11 @@
+import { NextURL } from 'next/dist/server/web/next-url'
 import NextAuth from 'next-auth'
-import { createI18nMiddleware } from 'next-international/middleware'
 import { NextRequest, NextResponse } from 'next/server'
 import { defaultLocale, locales } from '@/config/locales'
 import authConfig from '@/auth.config'
-import {
-  apiAuthPrefix,
-  AUTH_LOGIN_URL,
-  authRoutes,
-  DEFAULT_LOGIN_REDIRECT,
-  publicRoutes,
-  testPathnameRegex,
-} from '@/config/routes'
-import { NextURL } from 'next/dist/server/web/next-url'
+import { apiAuthPrefix, AUTH_LOGIN_URL, authRoutesRegEx, DEFAULT_LOGIN_REDIRECT, publicRoutes } from '@/config/routes'
+import { testPathnameRegex } from '@/lib/utils'
+import { createI18nMiddleware } from 'next-international/middleware'

 interface AppRouteHandlerFnContext {
  params?: Record<string, string | string[]>;
@ -19,11 +13,12 @@ interface AppRouteHandlerFnContext {

 export const middleware = (request: NextRequest, event: AppRouteHandlerFnContext): NextResponse | null => {
  return NextAuth(authConfig).auth((request): any => {
+
    const { nextUrl }: { nextUrl: NextURL } = request
    const isLoggedIn: boolean = !!request.auth
    const isApiAuthRoute: boolean = nextUrl.pathname.startsWith(apiAuthPrefix)
    const isPublicRoute: boolean = testPathnameRegex(publicRoutes, nextUrl.pathname)
-    const isAuthRoute: boolean = testPathnameRegex(authRoutes, nextUrl.pathname)
+    const isAuthRoute: boolean = testPathnameRegex(authRoutesRegEx, nextUrl.pathname)

    if (isApiAuthRoute) {
      return null
@ -49,8 +44,23 @@ export const middleware = (request: NextRequest, event: AppRouteHandlerFnContext
  })(request, event) as NextResponse
 }

+// export const config = {
+//   matcher: [
+//     /*
+//    * Match all request paths except for the ones starting with:
+//    * - api (API routes)
+//    * - _next/static (static files)
+//    * - _next/image (image optimization files)
+//    * - favicon.ico (favicon file)
+//    */
+//     {
+//       source: '/((?!.+\\.[\\w]+$|api|_next/image|favicon.ico|robots.txt|trpc).*)', missing: [
+//         { type: 'header', key: 'next-router-prefetch' }, { type: 'header', key: 'purpose', value: 'prefetch' }],
+//     }],
+// }
+
 export const config = {
  matcher: [
-    '/((?!.+\\.[\\w]+$|_next).*)', '/(api|static|trpc)(.*)'],
-}
-
+    '/((?!.+\\.[\\w]+$|_next|_next/image|_next/static).*)', '/(api|trpc)(.*)',
+  ],
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -28,6 +28,8 @@
        "react-hook-form": "^7.51.2",
        "react-icons": "^5.0.1",
        "react-loader-spinner": "^6.1.6",
+        "sharp": "^0.33.3",
+        "shart": "^0.0.4",
        "tailwind-merge": "^2.2.2",
        "tailwindcss-animate": "^1.0.7",
        "uuid": "^9.0.1",
@ -126,6 +128,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
+      "integrity": "sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@emotion/is-prop-valid": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@ -275,6 +286,437 @@
      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
      "dev": true
    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
+      "integrity": "sha512-FaNiGX1MrOuJ3hxuNzWgsT/mg5OHG/Izh59WW2mk1UwYHUwtfbhk5QNKYZgxf0pLOhx9ctGiGa2OykD71vOnSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.3.tgz",
+      "integrity": "sha512-2QeSl7QDK9ru//YBT4sQkoq7L0EAJZA3rtV+v9p8xTKl4U1bUqTIaCnoC7Ctx2kCjQgwFXDasOtPTCT8eCTXvw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.3.tgz",
+      "integrity": "sha512-Q7Ee3fFSC9P7vUSqVEF0zccJsZ8GiiCJYGWDdhEjdlOeS9/jdkyJ6sUSPj+bL8VuOYFSbofrW0t/86ceVhx32w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.3.tgz",
+      "integrity": "sha512-Zf+sF1jHZJKA6Gor9hoYG2ljr4wo9cY4twaxgFDvlG0Xz9V7sinsPp8pFd1XtlhTzYo0IhDbl3rK7P6MzHpnYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.3.tgz",
+      "integrity": "sha512-vFk441DKRFepjhTEH20oBlFrHcLjPfI8B0pMIxGm3+yilKyYeHEVvrZhYFdqIseSclIqbQ3SnZMwEMWonY5XFA==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.3.tgz",
+      "integrity": "sha512-Q4I++herIJxJi+qmbySd072oDPRkCg/SClLEIDh5IL9h1zjhqjv82H0Seupd+q2m0yOfD+/fJnjSoDFtKiHu2g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.3.tgz",
+      "integrity": "sha512-qnDccehRDXadhM9PM5hLvcPRYqyFCBN31kq+ErBSZtZlsAc1U4Z85xf/RXv1qolkdu+ibw64fUDaRdktxTNP9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.3.tgz",
+      "integrity": "sha512-Jhchim8kHWIU/GZ+9poHMWRcefeaxFIs9EBqf9KtcC14Ojk6qua7ghKiPs0sbeLbLj/2IGBtDcxHyjCdYWkk2w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.3.tgz",
+      "integrity": "sha512-68zivsdJ0koE96stdUfM+gmyaK/NcoSZK5dV5CAjES0FUXS9lchYt8LAB5rTbM7nlWtxaU/2GON0HVN6/ZYJAQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.3.tgz",
+      "integrity": "sha512-CyimAduT2whQD8ER4Ux7exKrtfoaUiVr7HG0zZvO0XTFn2idUWljjxv58GxNTkFb8/J9Ub9AqITGkJD6ZginxQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.3.tgz",
+      "integrity": "sha512-viT4fUIDKnli3IfOephGnolMzhz5VaTvDRkYqtZxOMIoMQ4MrAziO7pT1nVnOt2FAm7qW5aa+CCc13aEY6Le0g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@ -1960,6 +2402,18 @@
        "node": ">=6"
      }
    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -1976,6 +2430,15 @@
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -2169,6 +2632,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/detect-node-es": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@ -2844,6 +3315,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/execSync": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/execSync/-/execSync-1.0.2.tgz",
+      "integrity": "sha512-ul1uCl3e2DLlTl8z8R7OFb9PDXI08YkXbgknWZQCrpQjZh7cpntAzDI6oEqetaWpx+RdySFcxHVyG98CFg2lTQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "temp": "~0.5.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -3408,6 +3891,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
    "node_modules/is-async-function": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@ -5131,7 +5619,6 @@
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
      "dependencies": {
        "lru-cache": "^6.0.0"
      },
@ -5146,7 +5633,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
      "dependencies": {
        "yallist": "^4.0.0"
      },
@ -5196,6 +5682,60 @@
      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
    },
+    "node_modules/sharp": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz",
+      "integrity": "sha512-vHUeXJU1UvlO/BNwTpT0x/r53WkLUVxrmb5JTgW92fdFCFk0ispLMAeu/jPO2vjkXM1fYUi3K7/qcLF47pwM1A==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.3",
+        "@img/sharp-darwin-x64": "0.33.3",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.3",
+        "@img/sharp-linux-arm64": "0.33.3",
+        "@img/sharp-linux-s390x": "0.33.3",
+        "@img/sharp-linux-x64": "0.33.3",
+        "@img/sharp-linuxmusl-arm64": "0.33.3",
+        "@img/sharp-linuxmusl-x64": "0.33.3",
+        "@img/sharp-wasm32": "0.33.3",
+        "@img/sharp-win32-ia32": "0.33.3",
+        "@img/sharp-win32-x64": "0.33.3"
+      }
+    },
+    "node_modules/shart": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/shart/-/shart-0.0.4.tgz",
+      "integrity": "sha512-J6wJB4wAHbblxDOIyeaTGQKyotAMAF9zdz3vAkDI8/ZrbmV/Eg/Gdqz10QjRAXaxTK02A/xQRXuLmd8ECGltuQ==",
+      "deprecated": "because this is a ridiculous package",
+      "dependencies": {
+        "execSync": "^1.0.1-pre"
+      },
+      "bin": {
+        "shart": "lib/shart.js"
+      },
+      "engines": {
+        "node": ">= 0.10.24"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -5244,6 +5784,14 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
    "node_modules/slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -5648,6 +6196,35 @@
        "node": ">=6"
      }
    },
+    "node_modules/temp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.5.1.tgz",
+      "integrity": "sha512-Gwc1QWGkf3f3d0y8wNyC9uvVqAsmVdUMPzdiLJDNVAHhlxZmSWlvVZAk1LmZcBuYcmhvJ0oHDVHksghU3VI/0w==",
+      "engines": [
+        "node >=0.8.0"
+      ],
+      "dependencies": {
+        "rimraf": "~2.1.4"
+      }
+    },
+    "node_modules/temp/node_modules/graceful-fs": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
+      "integrity": "sha512-iiTUZ5vZ+2ZV+h71XAgwCSu6+NAizhFU3Yw8aC/hH5SQ3SnISqEqAek40imAFGtDcwJKNhXvSY+hzIolnLwcdQ==",
+      "deprecated": "please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js",
+      "optional": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/temp/node_modules/rimraf": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.1.4.tgz",
+      "integrity": "sha512-tzwmX16YQhcFu0T/m0gHBcFKx6yQAg77Z6WWaQSJsUekXYa6yaAmHhrDdmFicgauX/er7GsdN+vRao3mBhA4kQ==",
+      "optionalDependencies": {
+        "graceful-fs": "~1"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -6135,8 +6712,7 @@
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
    },
    "node_modules/yaml": {
      "version": "2.4.1",
--- a/package.json
+++ b/package.json
@ -36,6 +36,8 @@
    "react-hook-form": "^7.51.2",
    "react-icons": "^5.0.1",
    "react-loader-spinner": "^6.1.6",
+    "sharp": "^0.33.3",
+    "shart": "^0.0.4",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1",
--- a/prisma/migrations/20240410180928_auth/migration.sql
+++ b/prisma/migrations/20240410180928_auth/migration.sql
@ -1,58 +0,0 @@
-- CreateEnum
-CREATE TYPE "UserRole" AS ENUM ('SUPERVISOR', 'ADMIN', 'EDITOR', 'SUPPLIER', 'CUSTOMER', 'USER', 'OBSERVER', 'SYSTEM', 'CRON');
-
-- CreateTable
-CREATE TABLE "User" (
-    "id" TEXT NOT NULL,
-    "name" TEXT,
-    "email" TEXT,
-    "emailVerified" TIMESTAMP(3),
-    "image" TEXT,
-    "password" TEXT,
-    "role" "UserRole" NOT NULL DEFAULT 'CUSTOMER',
-
-    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
-);
-
-- CreateTable
-CREATE TABLE "Account" (
-    "id" TEXT NOT NULL,
-    "userId" TEXT NOT NULL,
-    "type" TEXT NOT NULL,
-    "provider" TEXT NOT NULL,
-    "providerAccountId" TEXT NOT NULL,
-    "refresh_token" TEXT,
-    "access_token" TEXT,
-    "expires_at" INTEGER,
-    "token_type" TEXT,
-    "scope" TEXT,
-    "id_token" TEXT,
-    "session_state" TEXT,
-
-    CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
-);
-
-- CreateTable
-CREATE TABLE "VerificationToken" (
-    "id" TEXT NOT NULL,
-    "email" TEXT NOT NULL,
-    "token" TEXT NOT NULL,
-    "expires" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("id")
-);
-
-- CreateIndex
-CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
-
-- CreateIndex
-CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
-
-- CreateIndex
-CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
-
-- CreateIndex
-CREATE UNIQUE INDEX "VerificationToken_email_token_key" ON "VerificationToken"("email", "token");
-
-- AddForeignKey
-ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/prisma/migrations/20240410181603_added_ext_data_to_user/migration.sql
+++ b/prisma/migrations/20240410181603_added_ext_data_to_user/migration.sql
@ -1,2 +0,0 @@
-- AlterTable
-ALTER TABLE "User" ADD COLUMN     "extendedData" JSONB;
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@ -1,3 +0,0 @@
-# Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
-provider = "postgresql"
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -64,3 +64,12 @@ model VerificationToken {

  @@unique([email, token])
 }
+
+model PasswordResetToken {
+  id      String   @id @default(cuid())
+  email   String
+  token   String   @unique
+  expires DateTime
+
+  @@unique([email, token])
+}
--- a/schemas/index.ts
+++ b/schemas/index.ts
@ -1,21 +1,30 @@
 import { MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH, PASSWORD_STRENGTH_ACME } from '@/config/validation'
 import { object, string } from 'zod'

+// all translations is implemented in '@/components/ui/form' via TranslateClientFragment
+
 const minPasswordMessage = JSON.stringify(['schema.password.length.min', { min: MIN_PASSWORD_LENGTH }])
 const maxPasswordMessage = JSON.stringify(['schema.password.length.max', { max: MAX_PASSWORD_LENGTH }])
 const maxPasswordStrength = JSON.stringify(
  ['schema.password.strength.acme', { min: MIN_PASSWORD_LENGTH, max: MAX_PASSWORD_LENGTH }])

+const email = string().trim().toLowerCase().email({ message: 'schema.email.required' })
+const password = string().trim().regex(new RegExp(PASSWORD_STRENGTH_ACME, 'mg'),
+  { message: maxPasswordStrength }).min(MIN_PASSWORD_LENGTH, { message: minPasswordMessage }).
+  max(MAX_PASSWORD_LENGTH, { message: maxPasswordMessage })
+
 export const LoginSchema = object({
-  email: string().trim().toLowerCase().email({ message: 'schema.email.required' }),
-  password: string().trim().min(1, { message: 'schema.password.required' }),
+  email, password: string().trim().min(1, { message: 'schema.password.required' }),
 })

 export const RegisterSchema = object({
-  email: string().email({ message: 'schema.email.required' }).toLowerCase(),
-  password: string().trim().regex(new RegExp(PASSWORD_STRENGTH_ACME, 'mg'), { message: maxPasswordStrength }).
-    min(MIN_PASSWORD_LENGTH, { message: minPasswordMessage }).max(MAX_PASSWORD_LENGTH, { message: maxPasswordMessage }),
-  name: string().trim().min(1, { message: 'schema.name.required' }),
+  email, password, name: string().trim().min(1, { message: 'schema.name.required' }),
 })

-// Password must contain at least a single lowercase, uppercase, digit and special character.
+export const ResetSchema = object({
+  email,
+})
+
+export const NewPasswordSchema = object({
+  password,
+})
--- a/templates/email/send-verification-email.ts
+++ b/templates/email/send-verification-email.ts
@ -0,0 +1,28 @@
+import { _ctBatch } from '@/lib/translate'
+import { env } from '@/lib/utils'
+
+type Props = {
+  confirmLink: string
+}
+
+const keys: any = {
+  follow: 'follow',
+  click: 'click',
+  here: 'here',
+  confirm: 'confirmed_email',
+  p1: ['body.send_verification_email.p1', { site_name: env('SITE_NAME') }],
+  p2: 'body.send_verification_email.p2',
+} as const
+
+export const body = async ({ confirmLink }: Props) => {
+  const t: any = await _ctBatch(keys, 'mailer')
+
+  return {
+    text: `${t?.p1}\n
+          ${t?.follow}: ${confirmLink} ${t?.confirm}
+          ${t?.p2}` as const,
+    html: `<p>${t?.p1}</p>
+          <p>${t?.click} <a href="${confirmLink}">${t?.here}</a> ${t?.confirm}</p>
+          <p>${t?.p2}</p>` as const,
+  } as const
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -38,6 +38,9 @@
      "@/locales/*": [
        "./locales/*"
      ],
+      "@/img/*": [
+        "./resources/images/*"
+      ],
      "@/components/*": [
        "./components/*"
      ],