Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
80 lines (72 sloc) 2.4 KB
<section class="section">
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h3 class="title has-text-grey">Login</h3>
<p class="subtitle has-text-grey">Please login to proceed</p>
<article class="message is-success" v-if="$">
<div class="message-body">
<strong>You're all set {{$route.query.firstName}}!</strong> Login with your password to continue.
<div class="box">
<form @submit.prevent="handleSubmit">
<div class="field">
<div class="control">
<input class="input is-large" type="email" placeholder="Email" autofocus="" v-model="credentials.userName">
<div class="field">
<div class="control">
<input class="input is-large" type="password" placeholder="Password" v-model="credentials.password">
<Spinner v-bind:show="isBusy" />
<button class="button is-block is-info is-large is-fullwidth" type="submit">Login</button>
<div class="errors-container" v-if="errors">
<p class="has-text-grey">
<router-link to="/register">Sign Up</router-link>
<script lang="ts">
import Spinner from '@/components/Spinner.vue'; // @ is an alias to /src
import { Component, Vue } from 'vue-property-decorator';
import { Credentials } from '../../models/credentials.interface';
// this.$
components: {
export default class RegistrationForm extends Vue {
private isBusy: boolean = false;
private errors: string = '';
private credentials = {} as Credentials;
private created() {
if (this.$ {
this.credentials.userName = this.$;
private handleSubmit() {
this.isBusy = true;
this.$store.dispatch('auth/authRequest', this.credentials).then((result) => {
.catch((err) => {
this.errors = err;
.then(() => {
this.isBusy = false;
<style lang="scss" scoped>