onspot/onspot-frontend
2
0
Fork 0
Code Pull Requests Releases Activity

Implemented login/logout

Browse Source
This commit is contained in:
Pünkösd Marcell
2020-11-26 03:18:28 +01:00
parent 53e8aa9a9c
commit f85f16e2a5
6 changed files with 183 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/Login.vue
View File

@ -2,48 +2,55 @@
<b-container>
<b-row>
<b-col class="mx-auto" cols="12" lg="4" sm="8">
<b-card class="mt-5">
<div class="my-4 text-center">
<b-img src="@/assets/musicbrainz.svg" id="provider-banner"/>
</div>
<div class="mt-4">
<b-overlay :show="processing" spinner-type="grow" spinner-variant="success" rounded="sm">
<b-card class="mt-5">
<div class="my-4 text-center">
<b-img src="@/assets/musicbrainz.svg" id="provider-banner"/>
</div>
<b-form @submit.prevent="performLogin" v-if="true">
<b-form-group
id="input-group-1"
label="Username:"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.username"
required
placeholder=""
autocomplete="off"
></b-form-input>
</b-form-group>
<div class="my-2 text-center text-danger" v-if="authFailed">
Username or password invalid!
</div>
<div class="mt-4">
<b-form-group id="input-group-2" label="Password:" label-for="input-2"
description="Yes, the same one you use on MusicBrainz"
>
<b-form-input
id="input-2"
v-model="form.password"
required
placeholder=""
autocomplete="off"
type="password"
></b-form-input>
</b-form-group>
<b-form @submit.prevent="performLogin" @input="formChanged" v-if="true">
<b-form-group
id="input-group-1"
label="Username:"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.username"
required
placeholder=""
autocomplete="off"
:state="formState"
></b-form-input>
</b-form-group>
<div class="text-right">
<b-button type="submit" variant="primary">Login</b-button>
</div>
</b-form>
<b-form-group id="input-group-2" label="Password:" label-for="input-2"
description="Yes, the same one you use on MusicBrainz"
>
<b-form-input
id="input-2"
v-model="form.password"
required
placeholder=""
autocomplete="off"
type="password"
:state="formState"
></b-form-input>
</b-form-group>
<div class="text-right">
<b-button type="submit" variant="primary">Login</b-button>
</div>
</b-form>
</div>
</b-card>
</div>
</b-card>
</b-overlay>
</b-col>
</b-row>
</b-container>
@ -57,12 +64,43 @@ export default {
form: {
username: "",
password: ""
}
},
processing: false,
authFailed: false
}
},
methods: {
performLogin() {
this.processing = true;
this.$api.performLogin(this.form.username, this.form.password).then(({name}) => {
this.$store.dispatch('storeUserData', name).then(() => {
this.$router.push('/').catch(() => {
});
this.processing = false;
});
}).catch(({status, text}) => {
if (status === 401) {
this.authFailed = true;
} else {
this.$showToast(text);
}
this.processing = false;
});
},
formChanged() {
this.authFailed = false;
}
},
computed: {
formState() {
return this.authFailed ? false : null;
}
}
}