feat: submit sign in form and show errors

components/log-In/ForgetPassword/ForgetPassword.tsx

@@ -3,7 +3,7 @@ import { useTranslate } from 'hooks'
 const ForgetPassword = () => {
  return (
  <div className='text-sm'>
- <a className='font-medium cursor-pointer text-blue-600 hover:text-blue-500'>
+ <a className='font-medium cursor-pointer text-blue-600 hover:underline hover:text-blue-700'>
  {useTranslate('auth:forget-password')}
  </a>
  </div>

components/log-In/LogInForm/LogInForm.tsx

@@ -9,10 +9,12 @@ import {
 } from 'components'
 
 const LogInForm = () => {
- const { formInitialValues, submitHandler } = useLogInForm()
+ const { formInitialValues, submitHandler, fetchError } = useLogInForm()
 
  return (
  <Formik
+ validateOnChange={fetchError ? false : true}
+ validateOnBlur={fetchError ? false : true}
  initialValues={formInitialValues}
  validationSchema={logInSchema}
  onSubmit={submitHandler}

components/log-In/LogInForm/useLogInForm.ts

@@ -1,10 +1,44 @@
+import { FormProperties, SignInFormData } from 'types'
+import { useMutation } from 'react-query'
+import { authorization } from 'services'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
 export const useLogInForm = () => {
+ const [fetchError, setFetchError] = useState(false)
+
+ const { mutate } = useMutation(authorization)
+ const { push } = useRouter()
+
  const formInitialValues = {
  password: '',
  email: '',
  }
 
- const submitHandler = () => {}
+ const submitHandler = (
+ formData: SignInFormData,
+ { setFieldError }: FormProperties
+ ) => {
+ mutate(formData, {
+ onSuccess: () => {},
+ onError: (error: any) => {
+ const status = error.response.status
+ if (status === 401) {
+ setFieldError('email', 'incorrect-credentials')
+ setFieldError('password', 'incorrect-credentials')
+ } else if (status === 403) {
+ setFieldError('email', 'inactive-account')
+ setFieldError('password', 'inactive-account')
+ } else if (status === 429) {
+ push('/requests-exceed')
+ } else {
+ alert(error.message)
+ }
+
+ setFetchError(true)
+ },
+ })
+ }
 
- return { formInitialValues, submitHandler }
+ return { formInitialValues, submitHandler, fetchError }
 }

components/shared/SuccessModal/SuccessModal.tsx

@@ -1,20 +1,21 @@
 import { CheckIcon } from '@heroicons/react/24/outline'
 import { Dialog, Transition } from '@headlessui/react'
-import { Fragment, useRef, useState } from 'react'
+import { SuccessModalProps } from './types.d'
+import { Fragment, useRef } from 'react'
 import { useTranslate } from 'hooks'
 
-const SuccessModal = () => {
- const [open, setOpen] = useState(true)
+const SuccessModal: React.FC<SuccessModalProps> = (props) => {
+ const { setSignUpSuccess, signUpSuccess } = props
 
  const cancelButtonRef = useRef(null)
 
  return (
- <Transition.Root show={open} as={Fragment}>
+ <Transition.Root show={signUpSuccess} as={Fragment}>
  <Dialog
  as='div'
  className='relative z-10'
  initialFocus={cancelButtonRef}
- onClose={setOpen}
+ onClose={setSignUpSuccess}
  >
  <Transition.Child
  as={Fragment}
@@ -41,9 +42,9 @@ const SuccessModal = () => {
  >
  <Dialog.Panel className='relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6'>
  <div>
- <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100'>
+ <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100'>
  <CheckIcon
- className='h-6 w-6 text-green-600 text-blue-600'
+ className='h-6 w-6 text-emerald-600'
  aria-hidden='true'
  />
  </div>
@@ -72,7 +73,7 @@ const SuccessModal = () => {
  <button
  type='button'
  className='mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 sm:col-start-1 sm:mt-0 sm:text-sm'
- onClick={() => setOpen(false)}
+ onClick={() => setSignUpSuccess(false)}
  ref={cancelButtonRef}
  >
  {useTranslate('common:close')}

components/shared/SuccessModal/types.d.ts

@@ -0,0 +1,6 @@
+import { SetState } from 'types'
+
+export type SuccessModalProps = {
+ setSignUpSuccess: SetState<boolean>
+ signUpSuccess: boolean
+}

components/sign-up/SignUpForm/SignUpForm.tsx

@@ -4,7 +4,8 @@ import { signUpSchema } from 'schemas'
 import { Form, Formik } from 'formik'
 
 const SignUpForm = () => {
- const { formInitialValues, submitHandler, signUpSuccess } = useSignUpForm()
+ const { formInitialValues, submitHandler, signUpSuccess, setSignUpSuccess } =
+ useSignUpForm()
 
  return (
  <Formik
@@ -15,7 +16,12 @@ const SignUpForm = () => {
  {() => {
  return (
  <>
- {signUpSuccess && <SuccessModal />}
+ {signUpSuccess && (
+ <SuccessModal
+ setSignUpSuccess={setSignUpSuccess}
+ signUpSuccess={signUpSuccess}
+ />
+ )}
 
  <Form className='flex flex-col gap-1'>
  <InputField name='username' type='text' />

components/sign-up/SignUpForm/useSignUpForm.ts

@@ -34,6 +34,8 @@ export const useSignUpForm = () => {
  setFieldError('email', 'email-exists')
  } else if (status === 429) {
  push('/requests-exceed')
+ } else {
+ alert(error.message)
  }
  },
  })

public/locales/en/inputs.json

@@ -23,5 +23,7 @@
  "log-in": "Log in",
  "sign-up": "Sign up",
 
- "email-exists": "Email is already in use"
+ "email-exists": "Email is already in use",
+ "incorrect-credentials": "Email or password is incorrect",
+ "inactive-account": "Account is not activated"
 }

public/locales/ka/inputs.json

@@ -23,5 +23,7 @@
  "log-in": "შესვლა",
  "sign-up": "რეგისტრაცია",
 
- "email-exists": "ეს ელ-ფოსტა უკვე გამოყენებულია"
+ "email-exists": "ეს ელ-ფოსტა უკვე გამოყენებულია",
+ "incorrect-credentials": "ელ-ფოსტა ან პაროლი არასწორია",
+ "inactive-account": "ანგარიში არ არის გააქტიურებული"
 }

services/authService.ts

@@ -1,9 +1,15 @@
-import { SignUpFormData, Status } from 'types'
+import { SignUpFormData, SignInFormData, Message, AccessToken } from 'types'
 import { AxiosResponse } from 'axios'
 import axios from './axios'
 
 export const registerUSer = (
  data: SignUpFormData
-): Promise<AxiosResponse<Status>> => {
+): Promise<AxiosResponse<Message>> => {
  return axios.post('/authentication/sign-up', data)
 }
+
+export const authorization = (
+ data: SignInFormData
+): Promise<AxiosResponse<AccessToken>> => {
+ return axios.post('/authentication/sign-in', data)
+}

types/global.d.ts

@@ -16,6 +16,11 @@ export type SignUpFormData = {
  email: string
 }
 
+export type SignInFormData = {
+ password: string
+ email: string
+}
+
 export type AccessToken = {
  accessToken: string
 }
@@ -24,6 +29,10 @@ export type Status = {
  status: number
 }
 
+export type Message = {
+ message: string
+}
+
 export type FormProperties = {
  setFieldError: (field: string, message: string) => void
  setFieldValue: (field: string, value: string) => void