Login Page Authorization for IEC Security

DHI · Aug 12, 2024 · 3fea191 · 3fea191
1 parent b0f2885
commit 3fea191
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/packages/react-components/src/Auth/LoginForm/LoginForm.tsx b/packages/react-components/src/Auth/LoginForm/LoginForm.tsx
@@ -10,8 +10,8 @@ import {
   TextField,
   Typography,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
-import React, { useEffect, useState } from 'react';
+import { Alert } from '@material-ui/lab';
+import { useEffect, useState } from 'react';
 import AuthService from '../AuthService';
 import LoginFormProps from './types';
 import useStyles from './useStyles';
@@ -37,6 +37,7 @@ const LoginForm = (props: LoginFormProps) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [twoFA, setTwoFA] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
   const [otpAuthenticatorIds, setOtpAuthenticatorIds] = useState([]);
   const [form, setForm] = useState({
     id: '',
@@ -77,22 +78,22 @@ const LoginForm = (props: LoginFormProps) => {
         setLoading(false);
       },
       (user, token) => {
-        console.log('login success');
         setLoading(false);
 
         if (onSuccess != null) {
           onSuccess(user, token);
         }
       },
-      (error) => {
-        console.log('login error');
+      (error: Error | string) => {
+        const errorMsg = typeof error === 'string' ? error : error.message;
+        setErrorMessage(errorMsg);
         setLoading(false);
         setError(true);
 
         if (onError != null) {
-          onError(error);
+          onError(errorMsg);
         }
-      },
+      }
     );
   };
 
@@ -121,9 +122,7 @@ const LoginForm = (props: LoginFormProps) => {
   return (
     <form onSubmit={handleSubmit}>
       {error && (
-        <Alert severity="error">{`Username ${
-          twoFA ? 'or One Time Password is invalid' : 'and/or password is invalid'
-        }`}</Alert>
+        <Alert severity="error"> {errorMessage}</Alert>
       )}
 
       {twoFA ? (

diff --git a/packages/react-components/src/api/helpers.ts b/packages/react-components/src/api/helpers.ts
@@ -54,19 +54,24 @@ const fetchUrl = (endPoint: RequestInfo, options?: Options, authHost?: string) =
   }
 
   return from(fetch(endPoint, mergedOptions as any)).pipe(
-    // tap((response) => console.log(`Response status: ${response.status}`)),
-    map((response) => {
+    flatMap((response) => {
       if (response.status >= 400) {
-        throw new Error(`Error: ${response.status}, reason: ${response.statusText}`);
+        return response.text().then((errorText) => {
+          throw new Error(errorText);
+        });
       } else {
-        return response;
+        return of(response);
       }
     }),
     flatMap((response) => checkStatus(response)),
-    catchError((error) => throwError(error)),
+    catchError((error) => {
+      console.error('An error occurred:', error);
+      return throwError(error);
+    })
   );
 };
 
+
 const refreshToken = async (authHost: string) => {
   const refreshToken = localStorage.getItem('refreshToken');
   const response = await fetch(`${authHost}/api/tokens/refresh`, {