Mercurial > gemma
view client/src/components/Login.vue @ 2956:974122125a76
Let it be an error if closest points of DISMARs on axis are equal
This might be the case e.g. if both distance marks are very far
away from the available axis geometries. Instead of returning a
point in such a case, which would likely be an unexpected result,
raise an exception by means of STRICT.
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Mon, 08 Apr 2019 14:53:09 +0200 |
parents | b42d10120cad |
children | 1b8bb4f89227 |
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="scss" 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(localStorage.getItem("tempRoute") || "/"); localStorage.removeItem("tempRoute"); }) .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>