Files
full-stack-fastapi-template/{{cookiecutter.project_slug}}/frontend/src/views/Login.vue
Sebastián Ramírez cd112bd683 Refactor/upgrade backend and frontend parts (#2)
* ♻️ Refactor and simplify backend code

* ♻️ Refactor frontend state, integrate typesafe-vuex accessors into state files

* ♻️ Use new state accessors and standardize layout

* 🔒 Upgrade and fix npm security audit

* 🔧 Update local re-generation scripts

* 🔊 Log startup exceptions to detect errors early

* ✏️ Fix password reset token content

* 🔥 Remove unneeded Dockerfile directives

* 🔥 Remove unnecessary print

* 🔥 Remove unnecessary code, upgrade dependencies in backend

* ✏️ Fix typos in docstrings and comments

* 🏗️ Improve user Depends utilities to simplify and remove code

* 🔥 Remove deprecated SQLAlchemy parameter
2019-03-11 13:36:42 +04:00

59 lines
1.9 KiB
Vue

<template>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>{{appName}}</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form @keyup.enter="submit">
<v-text-field @keyup.enter="submit" v-model="email" prepend-icon="person" name="login" label="Login" type="text"></v-text-field>
<v-text-field @keyup.enter="submit" v-model="password" prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field>
</v-form>
<div v-if="loginError">
<v-alert :value="loginError" transition="fade-transition" type="error">
Incorrect email or password
</v-alert>
</div>
<v-flex class="caption text-xs-right"><router-link to="/recover-password">Forgot your password?</router-link></v-flex>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click.prevent="submit">Login</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { api } from '@/api';
import { appName } from '@/env';
import { readLoginError } from '@/store/main/getters';
import { dispatchLogIn } from '@/store/main/actions';
@Component
export default class Login extends Vue {
public email: string = '';
public password: string = '';
public appName = appName;
public get loginError() {
return readLoginError(this.$store);
}
public submit() {
dispatchLogIn(this.$store, {username: this.email, password: this.password});
}
}
</script>
<style>
</style>