Mercurial > gemma

changeset 33:ae6535d44563

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Make password readable. Moved Layout to separate file. Password is now readable via toggle (eye-symbol). To improve readability, style extracted to separate file.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 26 Jun 2018 14:07:13 +0200
parents 0c19dcc352f9
children 1e279abd8e06
files client/src/assets/login.scss client/src/views/Login.vue
diffstat 2 files changed, 77 insertions(+), 69 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/assets/login.scss	Tue Jun 26 14:07:13 2018 +0200
@@ -0,0 +1,65 @@
+@import "../assets/application.scss";
+$logincollapsed: 470px;
+$loginextended: 550px;
+
+.emailgroup {
+  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;
+}
--- a/client/src/views/Login.vue	Tue Jun 26 13:43:14 2018 +0200
+++ b/client/src/views/Login.vue	Tue Jun 26 14:07:13 2018 +0200
@@ -21,9 +21,9 @@
           <div class="input-group-prepend">
             <span class="input-group-text"><span class="password-icon">*</span></span>
           </div>
-          <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
+          <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"><i class="fa fa-eye"></i></span>
+            <span class="input-group-text" id="basic-addon2" @click="showPassword"><i class="fa fa-eye"></i></span>
           </div>
         </div>
         <button class="submitbutton btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
@@ -35,71 +35,7 @@
 </template>
 
 <style lang="scss">
-@import "../assets/application.scss";
-$collapsedheight: 470px;
-$fullheight: 550px;
-
-.emailgroup {
-  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: $collapsedheight;
-}
-
-.loginfull {
-  height: $fullheight;
-}
-.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;
-}
+@import "../assets/login.scss";
 </style>
 
 <script>
@@ -112,15 +48,19 @@
       username: "",
       password: "",
       submitted: false,
-      loginFailed: false
+      loginFailed: false,
+      readablePassword: false
     };
   },
   computed: {
+    isPasswordVisible: function() {
+      return this.readablePassword ? "text" : "password";
+    },
     loginStyle: function() {
       return {
         login: true,
         logincollapsed: !this.loginFailed,
-        loginfull: this.loginFailed,
+        loginextended: this.loginFailed,
         "bg-white": true,
         rounded: true
       };
@@ -149,6 +89,9 @@
           this.loginFailed = true;
           this.submitted = false;
         });
+    },
+    showPassword() {
+      this.readablePassword = !this.readablePassword;
     }
   }
 };