WIP: Add login page, nav bar buttons

This commit is contained in:
Nelson Chan 2021-07-30 14:54:40 +08:00
parent 2b3a48995b
commit b9a6088f50
5 changed files with 95 additions and 10 deletions

View File

@ -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 }

View File

@ -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>

View File

@ -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",

78
src/pages/Login.vue Normal file
View File

@ -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>

View File

@ -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">