Mercurial > gemma

changeset 1097:874d19f32015

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 31b36ef00784
children b0aec3b1e426
files client/package.json client/src/login/Login.vue client/src/main.js
diffstat 3 files changed, 11 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Tue Oct 30 12:29:13 2018 +0100
+++ b/client/package.json	Thu Nov 01 10:19:28 2018 +0100
@@ -11,6 +11,9 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.7",
+    "@fortawesome/free-solid-svg-icons": "^5.4.2",
+    "@fortawesome/vue-fontawesome": "^0.1.2",
     "@turf/distance": "^6.0.1",
     "@turf/helpers": "^6.1.4",
     "@turf/line-intersect": "^6.0.2",
--- 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";
--- a/client/src/main.js	Tue Oct 30 12:29:13 2018 +0100
+++ b/client/src/main.js	Thu Nov 01 10:19:28 2018 +0100
@@ -28,6 +28,12 @@
 import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css";
 import "../node_modules/highlight.js/styles/paraiso-dark.css";
 import VTooltip from "v-tooltip";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(faEye, faEyeSlash);
+Vue.component("font-awesome-icon", FontAwesomeIcon);
 
 Vue.use(VTooltip);