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