From 3a8299a052107400090e4a8e24fa1158dc4ddf89 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Tue, 15 Jan 2019 15:46:07 +0200
Subject: [PATCH] Add error message for failed login attempts

---
 src/pages/AdminLoginPage/AdminLoginPage.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/pages/AdminLoginPage/AdminLoginPage.tsx b/src/pages/AdminLoginPage/AdminLoginPage.tsx
index 4b8b398..a7f71f6 100644
--- a/src/pages/AdminLoginPage/AdminLoginPage.tsx
+++ b/src/pages/AdminLoginPage/AdminLoginPage.tsx
@@ -13,6 +13,7 @@ export interface AdminLoginPageState {
   username: string;
   password: string;
   existingToken: string;
+  error: string;
 }
 
 class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPageState> {
@@ -22,6 +23,7 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
       username: "",
       password: "",
       existingToken: getTokenCookie(),
+      error: "",
     };
   }
 
@@ -37,6 +39,9 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
 
       history.push("/admin");
     } catch (err) {
+      this.setState({
+        error: "Failed to log in!",
+      });
       console.error("Failed to log in!");
     }
   }
@@ -53,6 +58,17 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
     });
   }
 
+  renderError = () => {
+    const { error } = this.state;
+    if (!error) return null;
+
+    return (
+      <div className="error">
+        { error }
+      </div>
+    );
+  }
+
   render() {
     const { username, password, existingToken } = this.state;
     if (existingToken) {
@@ -73,6 +89,7 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
           </label>
           <input type="submit" />
         </form>
+        { this.renderError() }
       </div>
     );
   }