From d4f1848ab8595a8f9710e287e7877132bf480b04 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 14 Jan 2021 16:47:26 -0800
Subject: [PATCH] Basic login and register UX pass

---
 webapp/src/pages/loginPage.scss    | 16 ++++++++++++++--
 webapp/src/pages/loginPage.tsx     | 21 +++++++++++++++++----
 webapp/src/pages/registerPage.scss | 13 +++++++++++--
 webapp/src/pages/registerPage.tsx  |  7 ++++++-
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/webapp/src/pages/loginPage.scss b/webapp/src/pages/loginPage.scss
index c6793dde4..d9f12d10b 100644
--- a/webapp/src/pages/loginPage.scss
+++ b/webapp/src/pages/loginPage.scss
@@ -8,20 +8,32 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
+
     .username, .password {
-        margin-bottom: 5px;
+        margin-bottom: 10px;
+
         label {
             display: inline-block;
             width: 140px;
         }
+
         input {
             display: inline-block;
             width: 250px;
             border: 1px solid #cccccc;
             border-radius: 4px;
+            min-height: 30px;
         }
     }
-    .Button {
+
+    > .Button {
+        min-width: 120px;
         margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .error {
+        color: #900000;
     }
 }
diff --git a/webapp/src/pages/loginPage.tsx b/webapp/src/pages/loginPage.tsx
index a2376e401..5a87057cf 100644
--- a/webapp/src/pages/loginPage.tsx
+++ b/webapp/src/pages/loginPage.tsx
@@ -17,10 +17,11 @@ type Props = RouteComponentProps
 type State = {
     username: string
     password: string
+    errorMessage?: string
 }
 
 class LoginPage extends React.PureComponent<Props, State> {
-    state = {
+    state: State = {
         username: '',
         password: '',
     }
@@ -29,6 +30,8 @@ class LoginPage extends React.PureComponent<Props, State> {
         const logged = await client.login(this.state.username, this.state.password)
         if (logged) {
             this.props.history.push('/')
+        } else {
+            this.setState({errorMessage: 'Login failed'})
         }
     }
 
@@ -40,7 +43,7 @@ class LoginPage extends React.PureComponent<Props, State> {
                     <input
                         id='login-username'
                         value={this.state.username}
-                        onChange={(e) => this.setState({username: e.target.value})}
+                        onChange={(e) => this.setState({username: e.target.value, errorMessage: undefined})}
                     />
                 </div>
                 <div className='password'>
@@ -49,11 +52,21 @@ class LoginPage extends React.PureComponent<Props, State> {
                         id='login-password'
                         type='password'
                         value={this.state.password}
-                        onChange={(e) => this.setState({password: e.target.value})}
+                        onChange={(e) => this.setState({password: e.target.value, errorMessage: undefined})}
                     />
                 </div>
-                <Button onClick={this.handleLogin}>{'Login'}</Button>
+                <Button
+                    filled={true}
+                    onClick={this.handleLogin}
+                >
+                    {'Login'}
+                </Button>
                 <Link to='/register'>{'or create an account if you don\'t have one'}</Link>
+                {this.state.errorMessage &&
+                    <div className='error'>
+                        {this.state.errorMessage}
+                    </div>
+                }
             </div>
         )
     }
diff --git a/webapp/src/pages/registerPage.scss b/webapp/src/pages/registerPage.scss
index 4cdbb4a29..65b8682a3 100644
--- a/webapp/src/pages/registerPage.scss
+++ b/webapp/src/pages/registerPage.scss
@@ -8,22 +8,31 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
+
     .email, .username, .password {
-        margin-bottom: 5px;
+        margin-bottom: 10px;
+
         label {
             display: inline-block;
             width: 140px;
         }
+
         input {
             display: inline-block;
             width: 250px;
             border: 1px solid #cccccc;
             border-radius: 4px;
+            min-height: 30px;
         }
     }
-    .Button {
+
+    > .Button {
         margin-top: 10px;
+        margin-bottom: 10px;
+        min-width: 120px;
     }
+
     .error {
         color: #900000;
     }
diff --git a/webapp/src/pages/registerPage.tsx b/webapp/src/pages/registerPage.tsx
index fe876ec99..9b983e9dc 100644
--- a/webapp/src/pages/registerPage.tsx
+++ b/webapp/src/pages/registerPage.tsx
@@ -76,7 +76,12 @@ class RegisterPage extends React.PureComponent<Props, State> {
                         onChange={(e) => this.setState({password: e.target.value})}
                     />
                 </div>
-                <Button onClick={this.handleRegister}>{'Register'}</Button>
+                <Button
+                    filled={true}
+                    onClick={this.handleRegister}
+                >
+                    {'Register'}
+                </Button>
                 <Link to='/login'>{'or login if you already have an account'}</Link>
                 {this.state.errorMessage &&
                     <div className='error'>