LouisLam
3 years ago
5 changed files with 10 additions and 95 deletions
@ -1,10 +1,10 @@ |
|||||
import { library } from "@fortawesome/fontawesome-svg-core" |
import { library } from "@fortawesome/fontawesome-svg-core" |
||||
import { faCog, faEdit, faList, faPause, faPlay, faPlus, faSignInAlt, faSignOutAlt, faTachometerAlt, faTrash } from "@fortawesome/free-solid-svg-icons" |
import { faCog, faEdit, faList, faPause, faPlay, faPlus, faTachometerAlt, faTrash } from "@fortawesome/free-solid-svg-icons" |
||||
//import { fa } from '@fortawesome/free-regular-svg-icons'
|
//import { fa } from '@fortawesome/free-regular-svg-icons'
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome" |
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome" |
||||
|
|
||||
// Add Free Font Awesome Icons here
|
// Add Free Font Awesome Icons here
|
||||
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
|
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
|
||||
library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList, faSignInAlt, faSignOutAlt) |
library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList) |
||||
|
|
||||
export { FontAwesomeIcon } |
export { FontAwesomeIcon } |
||||
|
@ -1,78 +0,0 @@ |
|||||
<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> |
|
Loading…
Reference in new issue