Mercurial > gemma
view client/src/views/Login.vue @ 19:c7fe6244528c
Refactoring local SCSS to a application wide accessible SCSS
Having an application wide accessible scss increases reuse.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 21 Jun 2018 12:11:00 +0200 |
parents | 7d242100af46 |
children | d53de4169d11 |
line wrap: on
line source
<template> <div class="login border border-dark rounded bg-white"> <div> <div class="logo d-flex flex-row justify-content-center"> <div><img src="../assets/logo.png"></div> <div class="title"><h1>{{ appTitle }}</h1></div> </div> </div> <div class="login-wrapper d-flex flex-row justify-content-center"> <form class="loginform form-signin" @submit.prevent="login"> <div v-if="loginFailed" class="alert alert-danger" role="alert"> <span class="loginerror">{{ loginAttemptFailed }}</span> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span> </div> <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><span class="password-icon">*</span></span> </div> <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span> </div> </div> <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div> </form> <div class="secondary-logo"><img :src="secondaryLogo"></div> </div> </div> </template> <style lang="scss"> @import "../assets/application.scss"; .forgottenlink { text-align: right; margin-top: $small-offset; margin-bottom: $offset; } #inputPassword { border-right: none; } .input-group-text { background-color: white !important; } .login { margin-left: auto; margin-right: auto; margin-top: 200px; width: 600px; } .loginerror { white-space: pre; } .loginform { width: 300px; } .logo { position: relative; left: -85px; margin-top: $offset; margin-bottom: $offset; } .mail-icon { line-height: $iconLineHeight; font-size: $iconsize; width: $iconwidth; } .password-icon { position: relative; top: 10px; font-size: $iconsize; line-height: $iconLineHeight; width: $iconwidth; } .secondary-logo { position: relative; top: -$offset; margin-left: $offset; } .title { margin-left: $offset; } </style> <script> import { mapGetters } from "vuex"; export default { name: "login", data() { return { username: "", password: "", submitted: false, loginFailed: false }; }, computed: { ...mapGetters("application", ["appTitle", "secondaryLogo"]), ...mapGetters("i18n", [ "signinHeader", "emailLabel", "passwordLabel", "loginButtonLabel", "loginAttemptFailed", "passPhraseForgotten" ]) }, methods: { login() { this.submitted = true; const { username, password } = this; this.$store .dispatch("user/login", { username, password }) .then(() => { this.loginFailed = false; this.$router.push("/"); }) .catch(() => { this.loginFailed = true; this.submitted = false; }); } } }; </script>