Update error handling logic for Login page

2 files changed, 11 insertions, 2 deletions

diff --git a/frontend/src/actions/auth.tsx b/frontend/src/actions/auth.tsx
index 5dba687f..47f67f7e 100644
--- a/frontend/src/actions/auth.tsx
+++ b/frontend/src/actions/auth.tsx
@@ -34,6 +34,8 @@ export const login = (nexusURL: string, username: string, password: string) => {
         .then((response) => {
           if (response.ok) {
             return response.json();
+          } else if (response.status === 401) {
+            throw new Error('Invalid credentials');
           }
           throw new Error('Cannot connect to server');
         })
diff --git a/frontend/src/components/login/Index.tsx b/frontend/src/components/login/Index.tsx
index 15f2b507..979a047a 100644
--- a/frontend/src/components/login/Index.tsx
+++ b/frontend/src/components/login/Index.tsx
@@ -15,6 +15,10 @@ const Login = ({ loginConnect }: Props) => {
   const [username, setUsername] = useState('admin');
   const [password, setPassword] = useState('x');
   const [authenticationFailure, setAuthenticationFailure] = useState(false);
+  const [
+    authenticationFailureMessage,
+    setAuthenticationFailureMessage,
+  ] = useState('');
 
   const layout = {
     wrapperCol: { span: 32 },
@@ -25,7 +29,10 @@ const Login = ({ loginConnect }: Props) => {
       .then(() => {
         setAuthenticationFailure(false);
       })
-      .catch((err) => setAuthenticationFailure(true));
+      .catch((err) => {
+        setAuthenticationFailure(true);
+        setAuthenticationFailureMessage(err);
+      });
   };
 
   const enterPressed = (event) => {
@@ -40,7 +47,7 @@ const Login = ({ loginConnect }: Props) => {
       {authenticationFailure ? (
         <Alert
           message="Error"
-          description="Invalid credentials"
+          description={String(authenticationFailureMessage)}
           type="error"
           showIcon
         />