Mercurial > gemma
view client/src/components/Login.vue @ 1443:6b100f639178
removed blue borders from fairwayprofile and infobar
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 30 Nov 2018 13:20:26 +0100 |
parents | ca33ad696594 |
children | bb47531bdd22 |
line wrap: on
line source
(<template> <div class="d-flex flex-column login bg-white shadow"> <div class="m-5"> <!-- logo section --> <div class="d-flex flex-row justify-content-center mb-3"> <div class="logo mr-3"> <img src="../assets/logo.png"> </div> <div class="title"> <h1>{{ appTitle }}</h1> </div> </div> <!-- end logo section --> <form class="loginform mx-auto" @submit.prevent="login"> <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert"> <span>{{ errorMessage }}</span> </div> <div class="input-group mb-3"> <input type="text" v-model="user" id="inputUsername" class="form-control shadow-sm" :placeholder="usernameLabel" required autofocus > </div> <div class="input-group mb-3"> <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control shadow-sm" :placeholder="passwordLabel" :required="!showPasswordReset" :disabled="showPasswordReset" > <div class="input-group-append"> <span class="input-group-text disabled" id="basic-addon2" @click="showPassword"> <font-awesome-icon icon="eye" v-if="!readablePassword"/> <font-awesome-icon icon="eye-slash" v-if="readablePassword"/> </span> </div> </div> <button v-if="showPasswordReset==false" class="btn btn-primary btn-block shadow-sm" :disabled="submitted || showPasswordReset" type="submit" > <translate>Login</translate> </button> <div v-if="showPasswordReset" class="passwordreset"> <button class="btn btn-block btn-info" type="button" @click="resetPassword"> <translate>Request password reset!</translate> </button> <div class="pull-right"> <a href="#" @click.prevent="togglePasswordReset"> <translate>back to login</translate> </a> </div> </div> <div v-else class="pull-right"> <a href="#" @click.prevent="togglePasswordReset"> <translate>Forgot password</translate> </a> </div> </form> <!-- bottom logo section --> <div class="mb-3 secondary-logo mx-auto mb-auto"> <img :src="secondaryLogo"> </div> </div> </div> </template>) <style lang="sass" scoped> .login min-width: 375px min-height: 500px @extend %fully-centered .loginform max-width: 375px .alert padding: 0.5rem .secondary-logo max-width: 375px /* avoid IE and Edge show a password reveal as we do our own */ input[type="password"]::-ms-reveal display: none </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de > */ import { mapState } from "vuex"; import { HTTP } from "../lib/http.js"; import { displayError } from "../lib/errors.js"; const UNAUTHORIZED = 401; export default { name: "login", data() { return { user: "", password: "", submitted: false, loginFailed: false, passwordJustResetted: false, readablePassword: false, showPasswordReset: false, usernameToReset: "" }; }, computed: { errorMessage() { if (this.loginFailed) return this.$gettext("Login failed"); if (this.passwordJustResetted) return this.$gettext("Password reset requested!"); return "&npsp;"; }, passwordLabel() { return this.$gettext("Enter passphrase"); }, usernameLabel() { return this.$gettext("Enter username"); }, isPasswordVisible() { return this.readablePassword ? "text" : "password"; }, errorMessageStyle() { if (this.loginFailed || this.passwordJustResetted) { return "visibility:visible"; } return "visibility:hidden"; }, errorMessageClass() { let result = { "mb-3": true, errormessage: true, alert: true }; if (this.loginFailed) { result["alert-danger"] = true; } if (this.passwordJustResetted) { result["alert-info"] = true; } return result; }, ...mapState("application", ["appTitle", "secondaryLogo"]) }, methods: { login() { this.submitted = true; this.passwordJustResetted = false; const { user, password } = this; this.$store .dispatch("user/login", { user, password }) .then(() => { this.loginFailed = false; this.$router.push("/"); }) .catch(error => { this.loginFailed = true; this.submitted = false; const { status, data } = error.response; if (status !== UNAUTHORIZED) { //Unauthorized is handled in alert-div displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); } }); }, showPassword() { // disallowing toggle when in reset mode if (this.showPasswordReset) return; this.readablePassword = !this.readablePassword; }, togglePasswordReset() { this.passwordJustResetted = false; this.showPasswordReset = !this.showPasswordReset; this.loginFailed = false; }, resetPassword() { if (this.user) { HTTP.post("/users/passwordreset", { user: this.user }).catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); this.togglePasswordReset(); this.passwordJustResetted = true; } } } }; </script>