fix: bug login page design and bugs

frontend/src/components/Primitives/Input.tsx

@@ -235,11 +235,10 @@ const Input: React.FC<InputProps> = ({
   const isValueEmpty = isEmpty(value);
 
   const autoState = useMemo(() => {
-    if (message) return 'error';
-    if (isValueEmpty) return 'default';
+    if (errors[id]) return 'error';
     if (!message && !isValueEmpty) return 'valid';
     return undefined;
-  }, [message, isValueEmpty]);
+  }, [errors, message, isValueEmpty]);
 
   const currentState = useMemo(() => {
     if (disabled && !touchedFields[id] && !forceState) return 'default';
@@ -277,6 +276,7 @@ const Input: React.FC<InputProps> = ({
               css={{
                 width: '$24',
                 height: '$24',
+                color: '$primary300',
               }}
             />
           )}

frontend/src/components/auth/LoginForm/index.tsx

@@ -11,7 +11,6 @@ import { DotsLoading } from '@/components/loadings/DotsLoading';
 import Flex from '@/components/Primitives/Flex';
 import Input from '@/components/Primitives/Input';
 import Text from '@/components/Primitives/Text';
-import { getAuthError } from '@/errors/auth-messages';
 import useUser from '@/hooks/useUser';
 import SchemaLoginForm from '@/schema/schemaLoginForm';
 import { toastState } from '@/store/toast/atom/toast.atom';
@@ -74,10 +73,12 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
 
     setLoginErrorCode(result.status);
     if (result.error) {
+      methods.setError('email', { type: 'custom', message: '' });
+      methods.setError('password', { type: 'custom', message: '' });
       setToastState({
         open: true,
         type: ToastStateEnum.ERROR,
-        content: getAuthError(result.status),
+        content: result.error,
       });
     }
 

frontend/src/components/auth/SignUp/SignUpForm.tsx

@@ -16,7 +16,6 @@ import { toastState } from '@/store/toast/atom/toast.atom';
 import { EmailUser } from '@/types/user/user';
 import { NEXT_PUBLIC_ENABLE_AZURE } from '@/utils/constants';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
-import isEmpty from '@/utils/isEmpty';
 import { SignUpEnum } from '@/utils/signUp.enum';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
@@ -29,8 +28,15 @@ interface SignUpFormProps {
 
 const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, emailName }) => {
   const setToastState = useSetRecoilState(toastState);
-  const [valueHelperText, setValueHelperText] = useState('');
   const [valueState, setValueState] = useState(false);
+  const methods = useForm<EmailUser>({
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      email: emailName.email,
+    },
+    resolver: joiResolver(SchemaEmail),
+  });
   useQuery(
     ['checkUserExists', emailName],
     () =>
@@ -51,7 +57,7 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
           return;
         }
 
-        setValueHelperText(' This email already exists');
+        methods.setError('email', { type: 'custom', message: 'This email already exists' });
         setValueState(true);
       },
 
@@ -72,14 +78,6 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
       },
     },
   );
-  const methods = useForm<EmailUser>({
-    mode: 'onSubmit',
-    reValidateMode: 'onSubmit',
-    defaultValues: {
-      email: emailName.email,
-    },
-    resolver: joiResolver(SchemaEmail),
-  });
 
   const handleCheckUserExists = async (email: string) => {
     setEmailName({ goback: false, email });
@@ -108,9 +106,9 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
         <Text css={{ mt: '$8', color: '$primary500' }} size="md">
           Enter your email address to proceed further
         </Text>
+
         <Input
           css={{ mt: '$32' }}
-          helperText={isEmpty(valueHelperText) ? undefined : valueHelperText}
           id="email"
           placeholder="Email address"
           state={!valueState ? 'default' : 'error'}

frontend/src/pages/api/auth/[...nextauth].tsx

@@ -16,6 +16,7 @@ import {
   UNDEFINED,
 } from '@/utils/constants';
 import { DASHBOARD_ROUTE, ERROR_500_PAGE, START_PAGE_ROUTE } from '@/utils/routes';
+import { getAuthError } from '@/errors/auth-messages';
 
 async function getNewAccessToken(prevToken: JWT): Promise<JWT> {
   try {
@@ -52,21 +53,31 @@ export default NextAuth({
           email: credentials?.email,
           password: credentials?.password,
         };
-        const data = await login(loginUser);
-        const { firstName, lastName, isSAdmin, accessToken, refreshToken, _id, email } = data || {};
-        if (!_id || !accessToken || !refreshToken) return null;
 
-        const token = {
-          firstName,
-          lastName,
-          isSAdmin,
-          accessToken,
-          refreshToken,
-          id: _id,
-          email,
-          strategy: 'local',
-        };
-        return token;
+        try {
+          const data = await login(loginUser);
+
+          const { firstName, lastName, isSAdmin, accessToken, refreshToken, _id, email } =
+            data || {};
+          if (!_id || !accessToken || !refreshToken) return null;
+
+          const token = {
+            firstName,
+            lastName,
+            isSAdmin,
+            accessToken,
+            refreshToken,
+            id: _id,
+            email,
+            strategy: 'local',
+          };
+          return token;
+        } catch (error: any) {
+          const code = error.response.status;
+          throw Error(getAuthError(code));
+        }
+
+        // getAuthError(result.status),
       },
     }),
   ],

frontend/src/pages/index.tsx

@@ -43,7 +43,7 @@ const Home: NextPage = () => {
   const renderFooter = () => {
     if (!NEXT_PUBLIC_LOGIN_SSO_ONLY) {
       return currentTab === 'login' ? (
-        <Text css={{ mb: '15%', textAlign: 'center', mt: '$10' }}>
+        <Text css={{ mb: '5%', textAlign: 'center', mt: '$10' }}>
           No account yet?{' '}
           <Text
             onClick={handleTabState}
@@ -53,7 +53,7 @@ const Home: NextPage = () => {
           </Text>
         </Text>
       ) : (
-        <Text css={{ mb: '15%', textAlign: 'center', mt: '$10' }}>
+        <Text css={{ mb: '5%', textAlign: 'center', mt: '$10' }}>
           Already have an account?{' '}
           <Text
             onClick={handleTabState}
@@ -109,6 +109,7 @@ const Home: NextPage = () => {
             ml: '$72',
             mr: '$72',
             mt: '9.7%',
+            mb: '$24',
             height: '100%',
             justifyContent: 'space-between',
           }}
@@ -125,7 +126,7 @@ const Home: NextPage = () => {
           flexShrink: 0,
         }}
       >
-        <ImageBackground />
+        <ImageBackground css={{ boxShadow: '-8px 8px 24px rgba(0, 0, 0, 0.16)' }} />
       </Flex>
     </Flex>
   );