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=
Binary file src/assets/logo.png has changed
--- 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: {