diff client/src/login/Login.vue @ 1097:874d19f32015

added fontawesome5 and implemented one example icon on login screen
author Markus Kottlaender <markus@intevation.de>
date Thu, 01 Nov 2018 10:19:28 +0100
parents 3418f3e2c822
children d9e6a1f6f394
line wrap: on
line diff
--- a/client/src/login/Login.vue	Tue Oct 30 12:29:13 2018 +0100
+++ b/client/src/login/Login.vue	Thu Nov 01 10:19:28 2018 +0100
@@ -20,7 +20,8 @@
                     <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control shadow-sm" :placeholder='passwordLabel' :required='!showPasswordReset' :disabled='showPasswordReset'>
                     <div class="input-group-append">
                         <span class="input-group-text disabled" id="basic-addon2" @click="showPassword">
-                            <i :class="eyeIcon"></i>
+                            <font-awesome-icon icon="eye" v-if="!readablePassword" />
+                            <font-awesome-icon icon="eye-slash" v-if="readablePassword" />
                         </span>
                     </div>
                 </div>
@@ -129,13 +130,6 @@
     isPasswordVisible() {
       return this.readablePassword ? "text" : "password";
     },
-    eyeIcon() {
-      return {
-        fa: true,
-        "fa-eye": !this.readablePassword,
-        "fa-eye-slash": this.readablePassword
-      };
-    },
     errorMessageStyle() {
       if (this.loginFailed || this.passwordJustResetted) {
         return "visibility:visible";