Mercurial > gemma
view client/src/views/Login.vue @ 515:ef7f56d326ae
fix: gemma configuration added to .hgignore
In order to prevent accidentally committing gemma.toml
it was added to .hgignore
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 27 Aug 2018 11:56:43 +0200 |
parents | 61170d775158 |
children | b07763345352 |
line wrap: on
line source
(<template> <div :class="loginStyle"> <div> <div class="logogroup d-flex flex-row justify-content-center"> <div class="logo"><img src="../assets/logo.png"></div> <div class="title"><h1>{{ appTitle }}</h1></div> </div> </div> <div class="login-wrapper d-flex flex-row justify-content-center"> <form class="loginform form-signin" @submit.prevent="login"> <div id="alert" v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert"> <span class="loginerror"><translate>Login failed</translate></span> </div> <div class="input-group mb-3 usernamegroup"> <input type="text" v-model="user" id="inputUsername" class="form-control" :placeholder="usernameLabel" required autofocus> </div> <div class="input-group mb-3 passwordgroup"> <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder='passwordLabel' required> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2" @click="showPassword"><i :class="eyeIcon"></i></span> </div> </div> <button class="submitbutton btn btn-primary btn-block" :disabled="submitted" type="submit"><translate>Login</translate></button> </form> </div> <!-- password forgotten part --> <div class="d-flex flex-row justify-content-center"> <form class="loginform form-signin"> <div v-if="showPasswordReset" class="small">TODO text and action for password reset <div class="input-group mb-3 usernamegroup"> <input type="text" v-model="usernameToReset" class="form-control" :placeholder="usernameLabel" required> </div> <button class="btn btn-secondary btn-block" type="button" @click="togglePasswordReset"><translate>Send</translate></button> </div> <div v-else class="forgottenlink small"> <a href="#" @click.prevent="togglePasswordReset" ><translate>Forgot password</translate></a></div> </form> </div> <!-- bottom logo section --> <div class="secondary-logo d-flex flex-row justify-content-center" ><img :src="secondaryLogo"></div> </div> </template>) <style lang="scss"> @import "../assets/application.scss"; $logincollapsed: 470px; $loginextended: 550px; .usernamegroup { box-shadow: $basic-shadow-light !important; } .forgottenlink { text-align: right; margin-top: $small-offset; margin-bottom: $small-offset; } #inputPassword { border-right: none; } .input-group-text { background-color: white !important; } .login { width: 375px; @extend %fully-centered; padding-top: $offset; padding-bottom: $offset; box-shadow: $basic-shadow; } .logincollapsed { height: $logincollapsed; } .loginextended { height: $loginextended; } .loginerror { white-space: pre; } .loginerrormessage { box-shadow: $basic-shadow-light !important; } .loginform { width: 300px; } .logogroup { margin-top: $offset; margin-bottom: $offset; } .mail-icon { width: $iconwidth; } .passwordgroup { box-shadow: $basic-shadow-light !important; } .password-icon { position: relative; top: 10px; font-size: $iconsize; line-height: $iconLineHeight; width: $iconwidth; } .submitbutton { box-shadow: $basic-shadow-light !important; } .title { margin-left: $offset; } </style> <script> import { mapGetters } from "vuex"; export default { name: "login", data() { return { user: "", password: "", submitted: false, loginFailed: false, readablePassword: false, showPasswordReset: false, usernameToReset: "" }; }, computed: { 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 }; }, loginStyle() { return { login: true, logincollapsed: !this.loginFailed, loginextended: this.loginFailed, "bg-white": true, rounded: true }; }, ...mapGetters("application", ["appTitle", "secondaryLogo"]) }, methods: { login() { this.submitted = true; const { user, password } = this; this.$store .dispatch("user/login", { user, password }) .then(() => { this.loginFailed = false; this.$router.push("/"); }) .catch(() => { this.loginFailed = true; this.submitted = false; }); }, showPassword() { this.readablePassword = !this.readablePassword; }, togglePasswordReset() { this.showPasswordReset = !this.showPasswordReset; } } }; </script>