feat(login): Add error message during login

seiKiMo-Inc · Apr 7, 2024 · ea2e077 · ea2e077
1 parent 4ebaf63
commit ea2e077
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/css/pages/LoginPage.scss b/src/css/pages/LoginPage.scss
@@ -25,7 +25,7 @@
     @apply transform -translate-x-1/2 -translate-y-1/2;
 
     width: 400px;
-    height: 465px;
+    height: fit-content;
 
     padding: 30px;
     box-sizing: border-box;

diff --git a/src/ui/pages/LoginPage.tsx b/src/ui/pages/LoginPage.tsx
@@ -19,6 +19,7 @@ interface IProps {
 interface IState {
     username: string;
     password: string;
+    status: string | null;
 }
 
 class LoginPage extends React.Component<IProps, IState> {
@@ -27,7 +28,8 @@ class LoginPage extends React.Component<IProps, IState> {
 
         this.state = {
             username: "",
-            password: ""
+            password: "",
+            status: null
         };
     }
 
@@ -83,7 +85,8 @@ class LoginPage extends React.Component<IProps, IState> {
 
             // Check if the login was successful.
             if (response.status != 200) {
-                // TODO: Display login error.
+                this.setState({ status: "Invalid account. Double-check the username & password!" });
+                setTimeout(() => this.setState({ status: null }), 5000);
                 return;
             }
 
@@ -95,7 +98,8 @@ class LoginPage extends React.Component<IProps, IState> {
             // Redirect to the redirect URL.
             window.location.href = this.getRedirectUrl();
         } catch (e) {
-            // TODO: Display login error.
+            this.setState({ status: "An error occurred while logging in. Please try again later." });
+            setTimeout(() => this.setState({ status: null }), 5000);
         }
     }
 
@@ -180,6 +184,12 @@ class LoginPage extends React.Component<IProps, IState> {
                         </form>
                     </div>
 
+                    { this.state.status && (
+                        <span className={"text-red-500"}>
+                            {this.state.status}
+                        </span>
+                    )}
+
                     <div className={"LoginPage_Divider"}>
                         <div className={"LoginPage_Line"}></div>
                         OR