jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve login screen

Browse Source
This commit is contained in:
Thomas Amland 2020-08-04 20:16:59 +02:00
parent 18d70f5c2e
commit 764ae899a0
2 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/auth/Login.vue
View File

@ -1,28 +1,27 @@
<template> <template>
<div> <div>
<b-modal title="Login" hide-footer no-close-on-esc :visible="showModal"> <b-modal size="sm" hide-header hide-footer no-close-on-esc :visible="showModal">
<form @submit.prevent="login"> <form @submit.prevent="login">
<fieldset :disabled="busy"> <div style="font-size: 4rem; color: #fff;" class="text-center">
<Icon icon="person-circle"/>
</div>
<b-form-group label="Server"> <b-form-group label="Server">
<b-form-input name="server" type="text" v-model="server" required></b-form-input> <b-form-input name="server" type="text" v-model="server" :state="valid"/>
</b-form-group> </b-form-group>
<b-form-group label="Username"> <b-form-group label="Username">
<b-form-input name="username" type="text" v-model="username" required></b-form-input> <b-form-input name="username" type="text" v-model="username" :state="valid"/>
</b-form-group> </b-form-group>
<b-form-group label="Password"> <b-form-group label="Password">
<b-form-input name="password" type="password" v-model="password" required></b-form-input> <b-form-input name="password" type="password" v-model="password" :state="valid"/>
</b-form-group> </b-form-group>
<b-form-group> <b-alert :show="error != null" variant="danger">
<b-form-checkbox v-model="rememberLogin">Remember</b-form-checkbox> <template v-if="error != null">
</b-form-group> Could not log in. ({{ error.message }})
<b-alert :show="!!error" variant="danger"> </template>
Login failed.
</b-alert> </b-alert>
<button class="btn btn-primary" @click="login"> <button class="btn btn-primary btn-block" @click="login" :disabled="busy">
<b-spinner v-show="busy" small type="grow"/> <b-spinner v-show="busy" small type="grow"/> Log in
Login
</button> </button>
</fieldset>
</form> </form>
</b-modal> </b-modal>
</div> </div>
@ -40,9 +39,9 @@ export default Vue.extend({
server: "", server: "",
username: "", username: "",
password: "", password: "",
rememberLogin: false, rememberLogin: true,
busy: false, busy: false,
error: false, error: null,
showModal: false, showModal: false,
}; };
}, },
@ -60,8 +59,14 @@ export default Vue.extend({
this.showModal = true; this.showModal = true;
} }
}, },
computed: {
valid(): false | null {
return this.error == null ? null : false
}
},
methods: { methods: {
login() { login() {
this.error = null;
this.busy = true; this.busy = true;
this.$auth.loginWithPassword(this.server, this.username, this.password, this.rememberLogin) this.$auth.loginWithPassword(this.server, this.username, this.password, this.rememberLogin)
.then(() => { .then(() => {
@ -72,7 +77,7 @@ export default Vue.extend({
this.$router.push(this.returnTo); this.$router.push(this.returnTo);
}) })
.catch(err => { .catch(err => {
this.error = true; this.error = err;
}) })
.finally(() => { .finally(() => {
this.busy = false; this.busy = false;

2
src/shared/components/Icon.vue
View File

@ -19,6 +19,7 @@
BIconMusicNoteBeamed, BIconMusicNoteBeamed,
BIconBoxArrowRight, BIconBoxArrowRight,
BIconPersonFill, BIconPersonFill,
BIconPersonCircle,
} from 'bootstrap-vue' } from 'bootstrap-vue'
export default Vue.extend({ export default Vue.extend({
@ -38,6 +39,7 @@
BIconMusicNoteBeamed, BIconMusicNoteBeamed,
BIconBoxArrowRight, BIconBoxArrowRight,
BIconPersonFill, BIconPersonFill,
BIconPersonCircle,
}, },
props: { props: {
icon: { type: String } icon: { type: String }