Mercurial > gemma
view client/src/views/Login.vue @ 564:51a0c3e57ba6
fix: login errors now same width as other form components
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 04 Sep 2018 15:45:06 +0200 |
parents | b91791664554 |
children |
line wrap: on
line source
(<template> <div class="d-flex flex-column login shadow-lg"> <div class="loginmask"> <!-- logo section --> <div class="d-flex flex-row justify-content-center mb-3"> <div class="logo"><img src="../assets/logo.png"></div> <div class="title"> <h1>{{ appTitle }}</h1> </div> </div> <!-- end logo section --> <form class="loginform" @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"> <i :class="eyeIcon"></i> </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"><img :src="secondaryLogo"></div> </div> </div> </template>) <style lang="scss"> @import "../assets/application.scss"; .login { background-color: white; min-width: 375px; min-height: 500px; @extend %fully-centered; } .loginform { max-width: 375px; margin-left: auto; margin-right: auto; } .loginmask { margin-left: $large-offset; margin-right: $large-offset; margin-top: $large-offset; } .logo { margin-right: $offset; } .alert { padding: 0.5rem; } .secondary-logo { max-width: 375px; margin-left: auto; margin-right: auto; margin-bottom: auto; } </style> <script> import { mapGetters } from "vuex"; import { HTTP } from "../lib/http"; import { displayError } from "../lib/errors.js"; 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"; }, eyeIcon() { return { fa: true, "fa-eye": !this.readablePassword, "fa-eye-slash": this.readablePassword }; }, 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; }, ...mapGetters("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; 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>