Show/hide password on login page (#310)

* login page enhancement

* remove border

* add title tag

* some tweaks

* show/hide password on change password page

* show/hide for all three form fields

* minor changes to change password page

* password component made

* remove unnecessary code

* fix props warning

* final tweaks

---------

Co-authored-by: Daniel Townsend <dan@dantownsend.co.uk>

admin_ui/src/components/PasswordInput.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="password_wrapper">
+        <input
+            name="password"
+            v-bind:value="value"
+            v-bind:type="showPassword ? 'text' : 'password'"
+            v-on:input="$emit('input', $event.target.value)"
+        />
+        <span
+            class="viewer"
+            v-if="value"
+            v-on:click="showPassword = !showPassword"
+        >
+            <font-awesome-icon
+                v-if="!showPassword"
+                icon="eye"
+                title="Show password"
+            />
+            <font-awesome-icon v-else icon="eye-slash" title="Hide password" />
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        value: String
+    },
+    data() {
+        return {
+            showPassword: false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+div.password_wrapper {
+    position: relative;
+
+    span.viewer {
+        color: #878787;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 1;
+        cursor: pointer;
+    }
+}
+</style>

admin_ui/src/fontawesome.ts

@@ -35,6 +35,7 @@ import {
     faQuestionCircle,
     faSearch,
     faSignOutAlt,
+    faEyeSlash,
     faSort,
     faSun,
     faTable,
@@ -78,6 +79,7 @@ library.add(
     faQuestionCircle,
     faSearch,
     faSignOutAlt,
+    faEyeSlash,
     faSort,
     faSun,
     faTable,

admin_ui/src/views/ChangePassword.vue

@@ -2,29 +2,16 @@
     <div id="change_password">
         <div class="inner">
             <BackButton />
-            <h1>{{ $t("Change password") }}</h1>
+            <div class="heading">
+                <h1>{{ $t("Change password") }}</h1>
+            </div>
             <form v-on:submit.prevent="changePassword">
                 <label>{{ $t("Current password") }}</label>
-                <input
-                    name="current_password"
-                    type="password"
-                    v-model="currentPassword"
-                />
-
+                <PasswordInput v-model="currentPassword" />
                 <label>{{ $t("New password") }}</label>
-                <input
-                    name="new_password"
-                    type="password"
-                    v-model="newPassword"
-                />
-
+                <PasswordInput v-model="newPassword" />
                 <label>{{ $t("New password confirmation") }}</label>
-                <input
-                    name="confirm_new_password"
-                    type="password"
-                    v-model="confirmNewPassword"
-                />
-
+                <PasswordInput v-model="confirmNewPassword" />
                 <button>{{ $t("Change password") }}</button>
             </form>
         </div>
@@ -34,6 +21,7 @@
 <script lang="ts">
 import axios from "axios"
 import BackButton from "../components/BackButton.vue"
+import PasswordInput from "../components/PasswordInput.vue"
 
 export default {
     data() {
@@ -44,11 +32,11 @@ export default {
         }
     },
     components: {
-        BackButton
+        BackButton,
+        PasswordInput
     },
     methods: {
         async changePassword() {
-            console.log("Changing password")
             const payload = {
                 current_password: this.currentPassword,
                 new_password: this.newPassword,
@@ -58,7 +46,7 @@ export default {
                 await axios.post(`./api/change-password/`, payload)
                 this.$store.commit("updateApiResponseMessage", {
                     contents: `Changed password successfully. You will be redirected
-                        to the login page to log in with your new credentials.`,
+                        to log in with your new credentials.`,
                     type: "success"
                 })
                 setTimeout(() => {

admin_ui/src/views/Login.vue

@@ -1,14 +1,15 @@
 <template>
     <div id="login">
         <div class="inner">
-            <h1>{{ siteName }}</h1>
+            <div class="heading">
+                <h1>{{ siteName }}</h1>
+            </div>
             <form v-on:submit.prevent="login">
                 <label>{{ $t("Username") }}</label>
                 <input name="username" type="text" v-model="username" />
 
                 <label>{{ $t("Password") }}</label>
-                <input name="password" type="password" v-model="password" />
-
+                <PasswordInput v-model="password" />
                 <button data-uitest="login_button">{{ $t("Login") }}</button>
             </form>
         </div>
@@ -17,14 +18,18 @@
 
 <script lang="ts">
 import axios from "axios"
+import PasswordInput from "../components/PasswordInput.vue"
 
 export default {
-    data: function () {
+    data() {
         return {
             username: "",
             password: ""
         }
     },
+    components: {
+        PasswordInput
+    },
     computed: {
         siteName() {
             return this.$store.state.metaModule.siteName
@@ -68,10 +73,16 @@ div#login {
         max-width: 30rem;
         padding: 0 0.5rem;
 
-        h1 {
-            margin-top: 0;
-            padding-top: 4rem;
+        div.heading {
             text-align: center;
+
+            h1 {
+                margin-top: 0;
+                padding-top: 4rem;
+                text-align: center;
+                border-bottom: 3px solid #009dff;
+                display: inline-block;
+            }
         }
     }
 }