Mercurial > gemma
view client/src/components/Login.vue @ 5095:e21cbb9768a2
Prevent duplicate fairway areas
In principal, there can be only one or no fairway area at each point
on the map. Since polygons from real data will often be topologically
inexact, just disallow equal geometries. This will also help to
avoid importing duplicates with concurrent imports, once the history
of fairway dimensions will be preserved.
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Wed, 25 Mar 2020 18:10:02 +0100 |
parents | 6b054b91d9b2 |
children | 84d01a536bec |
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.$router.push(localStorage.getItem("tempRoute") || "/"); localStorage.removeItem("tempRoute"); }) .catch(error => { this.loginFailed = true; this.submitted = false; if (!error.response) { displayError({ title: "Backend Error", message: `Backend not reachable` }); return; } 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 => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); this.togglePasswordReset(); this.passwordJustResetted = true; } } } }; </script>