From b9a6088f50e1680fbab3c7fa3ef4a03cfaf3caca Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 30 Jul 2021 14:54:40 +0800
Subject: [PATCH] WIP: Add login page, nav bar buttons

---
 src/icon.js            |  4 +--
 src/layouts/Layout.vue | 10 ++++++
 src/main.js            |  7 ++--
 src/pages/Login.vue    | 78 ++++++++++++++++++++++++++++++++++++++++++
 src/pages/Settings.vue |  6 ----
 5 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Login.vue

diff --git a/src/icon.js b/src/icon.js
index d8ea36d6..7911e9cc 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faCog, faEdit, faList, faPause, faPlay, faPlus, faTachometerAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faEdit, faList, faPause, faPlay, faPlus, faSignInAlt, faSignOutAlt, faTachometerAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
 //import { fa } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 
 // Add Free Font Awesome Icons here
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
-library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList)
+library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList, faSignInAlt, faSignOutAlt)
 
 export { FontAwesomeIcon }
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 8e725500..2f5b1cb8 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -23,6 +23,16 @@
                     <font-awesome-icon icon="cog" /> Settings
                 </router-link>
             </li>
+            <li class="nav-item">
+                <router-link to="/login" class="nav-link">
+                    <font-awesome-icon icon="sign-in-alt" /> Login
+                </router-link>
+            </li>
+            <li v-if="$root.loggedIn" class="nav-item">
+                <a href="#" class="nav-link" @click="$root.logout">
+                    <font-awesome-icon icon="sign-out-alt" /> Logout
+                </a>
+            </li>
         </ul>
     </header>
 
diff --git a/src/main.js b/src/main.js
index 6eb296dc..8621b898 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
+import Login from "./pages/Login.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
 
@@ -57,9 +58,11 @@ const routes = [
                     },
                 ],
             },
-
+            {
+                path: "/login",
+                component: Login,
+            },
         ],
-
     },
     {
         path: "/setup",
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
new file mode 100644
index 00000000..4b08de06
--- /dev/null
+++ b/src/pages/Login.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="form-container">
+        <div class="form">
+            <form @submit.prevent="submit">
+                <h1 class="h3 mb-3 fw-normal" />
+
+                <div class="form-floating">
+                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username">
+                    <label for="floatingInput">Username</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password">
+                    <label for="floatingPassword">Password</label>
+                </div>
+
+                <div class="form-check mb-3 mt-3 d-flex justify-content-center pe-4">
+                    <div class="form-check">
+                        <input id="remember" v-model="$root.remember" type="checkbox" value="remember-me" class="form-check-input">
+
+                        <label class="form-check-label" for="remember">
+                            Remember me
+                        </label>
+                    </div>
+                </div>
+                <button class="w-100 btn btn-primary" type="submit" :disabled="processing">
+                    Login
+                </button>
+
+                <div v-if="res && !res.ok" class="alert alert-danger mt-3" role="alert">
+                    {{ res.msg }}
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+
+            res: null,
+        }
+    },
+    methods: {
+        submit() {
+            this.processing = true;
+            this.$root.login(this.username, this.password, (res) => {
+                this.processing = false;
+                this.res = res;
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+.form-container {
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form {
+
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    text-align: center;
+}
+</style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index d1d3599b..d2695edf 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -53,12 +53,6 @@
                         </button>
                     </div>
                 </form>
-
-                <div>
-                    <button class="btn btn-danger" @click="$root.logout">
-                        Logout
-                    </button>
-                </div>
             </div>
 
             <div class="col-md-6">