Mercurial > gemma

changeset 122:da279a0ce127

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
The "eye" icon changes into a "crossed out eye" icon To improve user experience. Giving people a good idea what will happen if they interact. cf. Issue 69
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 27 Jun 2018 12:24:13 +0200
parents 9a5bbe9c593c
children 92e0c636e67c
files client/src/views/Login.vue
diffstat 1 files changed, 8 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/views/Login.vue	Wed Jun 27 10:50:09 2018 +0200
+++ b/client/src/views/Login.vue	Wed Jun 27 12:24:13 2018 +0200
@@ -18,7 +18,7 @@
 
           <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="fa fa-eye"></i></span>
+            <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">{{ loginButtonLabel }}</button>
@@ -115,6 +115,13 @@
     isPasswordVisible() {
       return this.readablePassword ? "text" : "password";
     },
+    eyeIcon() {
+      return {
+        fa: true,
+        "fa-eye": !this.readablePassword,
+        "fa-eye-slash": this.readablePassword
+      };
+    },
     loginStyle() {
       return {
         login: true,