Mercurial > gemma
view client/src/components/Login.vue @ 3678:8f58851927c0
client: make layer factory only return new layer config for individual maps
instead of each time it is invoked. The purpose of the factory was to support multiple maps with individual layers.
But returning a new config each time it is invoked leads to bugs that rely on the layer's state. Now this factory
reuses the same objects it created before, per map.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 17 Jun 2019 17:31:35 +0200 |
parents | 4909f98f8520 |
children | 0300282b9537 |
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-info 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"; import { displayError } from "@/lib/errors"; 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.$store.dispatch("application/loadConfig").then(() => { 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>