Mercurial > gemma
changeset 9:ee6d3836014e vue-cli
current version of login
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 15 Jun 2018 13:04:07 +0200 |
parents | d97a8842c985 |
children | 361ae8211991 |
files | .env.sample src/assets/logo.png src/stores/application.js src/stores/language.js src/views/Login.vue |
diffstat | 5 files changed, 42 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/.env.sample Fri Jun 15 09:49:14 2018 +0200 +++ b/.env.sample Fri Jun 15 13:04:07 2018 +0200 @@ -1,2 +1,3 @@ VUE_APP_TITLE=Waterway Monitoring system -VUE_APP_API_URL=/api +VUE_APP_API_URL=/api/ +VUE_APP_SECONDARY_LOGO_URL=
--- a/src/stores/application.js Fri Jun 15 09:49:14 2018 +0200 +++ b/src/stores/application.js Fri Jun 15 13:04:07 2018 +0200 @@ -2,12 +2,16 @@ namespaced: true, state: { appTitle: process.env.VUE_APP_TITLE, + secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, loginFailed: false }, getters: { appTitle: state => { return state.appTitle; }, + secondaryLogo: state => { + return state.secondaryLogo; + }, loginFailed: state => { return state.loginFailed; }
--- a/src/stores/language.js Fri Jun 15 09:49:14 2018 +0200 +++ b/src/stores/language.js Fri Jun 15 13:04:07 2018 +0200 @@ -4,8 +4,9 @@ signinHeader: "Please sign in", emailLabel: "Email address", passwordLabel: "Password", - loginButtonLabel: "Login", - loginAttemptFailed: "Login Failed" + loginButtonLabel: "Log In", + loginAttemptFailed: "Login Failed\n(try other email & passphrase)", + passPhraseForgotten: "Passphrase forgoten?" }, getters: { signinHeader: state => { @@ -22,6 +23,9 @@ }, loginButtonLabel: state => { return state.loginButtonLabel; + }, + passPhraseForgotten: state => { + return state.passPhraseForgotten; } }, mutations: {},
--- a/src/views/Login.vue Fri Jun 15 09:49:14 2018 +0200 +++ b/src/views/Login.vue Fri Jun 15 13:04:07 2018 +0200 @@ -1,31 +1,51 @@ <template> <div class="login"> <div> - <div class="d-flex flex-row justify-content-center"> + <div class="logo d-flex flex-row justify-content-center"> <div><img src="../assets/logo.png"></div> - <div><h1>{{ appTitle }}</h1></div> + <div class="title"><h1>{{ appTitle }}</h1></div> </div> </div> <div class="login-wrapper border border-light d-flex flex-row justify-content-center"> - <form class="form-signin" @submit.prevent="login"> - <h2 class="form-signin-heading">{{ signinHeader }}</h2> + <form class="loginform form-signin" @submit.prevent="login"> <div v-if="loginFailed" class="alert alert-danger" role="alert"> - {{ loginAttemptFailed }} + <span class="loginerror">{{ loginAttemptFailed }}</span> </div> <label for="inputEmail" class="sr-only">{{ emailLabel }}</label> <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> <label for="inputPassword" class="sr-only">{{ passwordLabel }}</label> <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required> - <button class="btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> + <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> </form> + <div class="secondary-logo"><img :src="secondaryLogo"></div> </div> + <div><a href="#">{{ passPhraseForgotten }}</a></div> </div> </template> -<style> +<style lang="scss"> +$offset: 20px; + .login { margin-top: 200px; } +.loginerror { + white-space: pre; +} +.loginform { + width: 300px; +} +.logo { + position: relative; + left: -85px; + margin-bottom: $offset; +} +.title { + margin-left: $offset; +} +.secondary-logo { + margin-left: $offset; +} </style> <script> @@ -41,13 +61,14 @@ }; }, computed: { - ...mapGetters("application", ["appTitle", "loginFailed"]), + ...mapGetters("application", ["appTitle", "loginFailed", "secondaryLogo"]), ...mapGetters("i18n", [ "signinHeader", "emailLabel", "passwordLabel", "loginButtonLabel", - "loginAttemptFailed" + "loginAttemptFailed", + "passPhraseForgotten" ]) }, methods: {