113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
<template>
|
|
<b-container>
|
|
<b-row>
|
|
<b-col class="mx-auto" cols="12" lg="4" sm="8">
|
|
<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>
|
|
|
|
<div class="my-2 text-center text-danger" v-if="authFailed">
|
|
Username or password invalid!
|
|
</div>
|
|
<div class="mt-4">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</b-overlay>
|
|
</b-col>
|
|
</b-row>
|
|
</b-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Login",
|
|
data() {
|
|
return {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#provider-banner {
|
|
width: 75%;
|
|
}
|
|
</style> |