fix: UI fixes for sign up page (#1031)

* fix: UI fixes for sign up page

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

* fix: sonarlint issues

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

* fix: ellips suggestions on PR

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

---------

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

Author: pranalidhanavade

nextjs/src/features/auth/components/EmailVerificationForm.tsx

@@ -2,7 +2,6 @@
 
 import * as Yup from 'yup'
 
-import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Formik, Form as FormikForm } from 'formik'
 import React, { useState } from 'react'
 import { apiStatusCodes, emailRegex } from '@/config/CommonConstant'
@@ -12,6 +11,7 @@ import {
   sendVerificationMail,
 } from '@/app/api/Auth'
 
+import { AlertComponent } from '@/components/AlertComponent'
 import { AxiosResponse } from 'axios'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -30,12 +30,8 @@ export default function EmailVerificationForm({
 }: StepEmailProps): React.ReactElement {
   const [loading, setLoading] = useState(false)
   const [verifyLoader, setVerifyLoader] = useState(false)
-
-  const [showEmailVerification, setShowEmailVerification] = useState<{
-    message: string
-    isError: boolean
-    type: string
-  }>({ message: '', isError: false, type: '' })
+  const [emailSuccess, setEmailSuccess] = useState<string | null>(null)
+  const [addFailure, setAddFailure] = useState<string | null>(null)
 
   const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -58,34 +54,26 @@ export default function EmailVerificationForm({
       const { data } = userRsp as AxiosResponse
 
       if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-        setShowEmailVerification({
-          message: data?.message,
-          isError: false,
-          type: 'success',
-        })
+        setEmailSuccess(data?.message)
+        setAddFailure(null)
       } else {
-        setShowEmailVerification({
-          message: data?.message,
-          isError: true,
-          type: 'danger',
-        })
+        setAddFailure(userRsp as string)
+        setEmailSuccess(null)
       }
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('Error during sending verification email:', err)
-      setShowEmailVerification({
-        message: 'An error occurred while sending verification email.',
-        isError: true,
-        type: 'danger',
-      })
+      setAddFailure('An error occurred while sending verification email.')
+      setEmailSuccess(null)
     } finally {
       setVerifyLoader(false)
     }
   }
 
   const handleVerifyEmail = async (emailValue: string): Promise<void> => {
     setLoading(true)
-    setShowEmailVerification({ message: '', isError: false, type: '' })
+    setEmailSuccess(null)
+    setAddFailure(null)
 
     try {
       const userRsp = await checkUserExist(emailValue)
@@ -95,11 +83,7 @@ export default function EmailVerificationForm({
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
         if (isEmailVerified) {
           if (isRegistrationCompleted) {
-            setShowEmailVerification({
-              message: 'Email is already registered.',
-              isError: true,
-              type: 'danger',
-            })
+            setAddFailure(data?.data?.message)
           } else {
             setEmail(emailValue)
             goToNext()
@@ -108,20 +92,12 @@ export default function EmailVerificationForm({
           await handleSendVerificationEmail(emailValue)
         }
       } else {
-        setShowEmailVerification({
-          message: data?.data?.message ?? 'Something went wrong.',
-          isError: true,
-          type: 'danger',
-        })
+        setAddFailure(data?.data?.message ?? 'Something went wrong.')
       }
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('Unexpected error during email verification:', err)
-      setShowEmailVerification({
-        message: 'An unexpected error occurred. Please try again.',
-        isError: true,
-        type: 'danger',
-      })
+      setAddFailure('An unexpected error occurred. Please try again.')
     } finally {
       setLoading(false)
     }
@@ -147,29 +123,31 @@ export default function EmailVerificationForm({
 
         return (
           <FormikForm className="space-y-4">
-            {showEmailVerification.message && (
-              <Alert
-                variant={
-                  showEmailVerification.type === 'success'
-                    ? 'default'
-                    : 'destructive'
-                }
-                className={`mb-4 ${
-                  showEmailVerification.type === 'success'
-                    ? 'bg-success'
-                    : 'bg-error'
-                }`}
-              >
-                <AlertDescription
-                  className={
-                    showEmailVerification.type === 'success'
-                      ? 'text-success'
-                      : 'text-error'
-                  }
-                >
-                  {showEmailVerification.message}
-                </AlertDescription>
-              </Alert>
+            {emailSuccess && (
+              <div className="w-full" role="alert">
+                <AlertComponent
+                  message={emailSuccess}
+                  type={'success'}
+                  onAlertClose={() => {
+                    if (emailSuccess) {
+                      setEmailSuccess(null)
+                    }
+                  }}
+                />
+              </div>
+            )}
+            {addFailure && (
+              <div className="w-full" role="alert">
+                <AlertComponent
+                  message={addFailure}
+                  type={'failure'}
+                  onAlertClose={() => {
+                    if (addFailure) {
+                      setAddFailure(null)
+                    }
+                  }}
+                />
+              </div>
             )}
 
             <div className="h-12">

nextjs/src/features/auth/components/SignUpUser.tsx

@@ -57,7 +57,9 @@ export default function SignUpUser(): React.JSX.Element {
         <div className="text-muted-foreground mt-4 text-center text-sm">
           Already have an account?{' '}
           <Link href="/auth/sign-in">
-            <span className="text-secondary hover:underline">Sign in</span>
+            <span className="text-muted-foreground hover:text-foreground hover:underline">
+              Sign in
+            </span>
           </Link>
         </div>
       </div>

nextjs/src/features/auth/components/user-auth-form.tsx

@@ -323,7 +323,9 @@ export default function SignInViewPage(): React.JSX.Element {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Email</FormLabel>
+                  <FormLabel className="data-[error=true]:text-foreground">
+                    Email
+                  </FormLabel>
                   <FormControl>
                     <div className="relative">
                       <Mail className="text-muted-foreground absolute top-2.5 left-3 h-4 w-4" />

nextjs/src/features/passkey/AddPasskey.tsx

@@ -269,11 +269,6 @@ const AddPasskey = ({
               />
             </div>
           )}
-          <Alert variant={addSuccess ? 'default' : 'destructive'}>
-            <AlertDescription>
-              {addSuccess || addFailure || error}
-            </AlertDescription>
-          </Alert>
         </div>
       )}
       <div className="relative flex h-full flex-auto flex-col p-3 sm:p-4">