From c9056733172591c8f8020dc9631e99118bd7a8e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 15 Oct 2020 20:43:51 +0200
Subject: [PATCH] Some improvements in the login page

---
 src/client/pages/loginPage.scss | 27 +++++++++++++++++++++++++++
 src/client/pages/loginPage.tsx  | 33 ++++++++++++++++++++++-----------
 2 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/client/pages/loginPage.scss

diff --git a/src/client/pages/loginPage.scss b/src/client/pages/loginPage.scss
new file mode 100644
index 000000000..c6793dde4
--- /dev/null
+++ b/src/client/pages/loginPage.scss
@@ -0,0 +1,27 @@
+.LoginPage {
+    border: 1px solid #cccccc;
+    border-radius: 15px;
+    width: 450px;
+    height: 400px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .username, .password {
+        margin-bottom: 5px;
+        label {
+            display: inline-block;
+            width: 140px;
+        }
+        input {
+            display: inline-block;
+            width: 250px;
+            border: 1px solid #cccccc;
+            border-radius: 4px;
+        }
+    }
+    .Button {
+        margin-top: 10px;
+    }
+}
diff --git a/src/client/pages/loginPage.tsx b/src/client/pages/loginPage.tsx
index b37203600..4a82cd0c2 100644
--- a/src/client/pages/loginPage.tsx
+++ b/src/client/pages/loginPage.tsx
@@ -1,5 +1,9 @@
 import React from "react"
 
+import Button from '../components/button'
+
+import './loginPage.scss'
+
 type Props = {}
 
 type State = {
@@ -20,17 +24,24 @@ export default class LoginPage extends React.Component<Props, State> {
     public render(): React.ReactNode {
         return (
             <div className='LoginPage'>
-                <label htmlFor='login-username'>Username</label>
-                <input
-                    id='login-username'
-                    value={this.state.username}
-                    onChange={(e) => this.setState({username: e.target.value})}
-                />
-                <label htmlFor='login-username'>Password</label>
-                <input
-                    id='login-password'
-                />
-                <button onClick={this.handleLogin}>Login</button>
+                <div className='username'>
+                    <label htmlFor='login-username'>Username</label>
+                    <input
+                        id='login-username'
+                        value={this.state.username}
+                        onChange={(e) => this.setState({username: e.target.value})}
+                    />
+                </div>
+                <div className='password'>
+                    <label htmlFor='login-username'>Password</label>
+                    <input
+                        id='login-password'
+                        type='password'
+                        value={this.state.password}
+                        onChange={(e) => this.setState({password: e.target.value})}
+                    />
+                </div>
+                <Button onClick={this.handleLogin}>Login</Button>
             </div>
         )
     }