From b5c222cc05413f46aee4e3db657136662926cb38 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Mon, 14 Oct 2024 22:05:12 +0200
Subject: [PATCH] Made eye icon on login/register functional

---
 public/assets/icons/eye-closed.svg |  7 +++++++
 src/assets/scss/main.scss          |  4 ++++
 src/screens/Login.vue              | 10 ++++++----
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 public/assets/icons/eye-closed.svg

diff --git a/public/assets/icons/eye-closed.svg b/public/assets/icons/eye-closed.svg
new file mode 100644
index 0000000..37efcf0
--- /dev/null
+++ b/public/assets/icons/eye-closed.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="20" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path fill="none" d="M0 0h24v24H0z"/>
+        <path d="M17.882 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066L1.392 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31zM5.935 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.935 7.35zm6.979 6.978l-3.242-3.242a2.5 2.5 0 0 0 3.241 3.241zm7.893 2.264l-1.431-1.43A8.935 8.935 0 0 0 20.777 12 9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.769z" fill="#808080"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 555714b..8a44b36 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -107,6 +107,10 @@ button {
   &:hover {
     @apply cursor-pointer;
   }
+
+  &.eye-open {
+    @apply bg-[url('/assets/icons/eye-closed.svg')] w-5 h-4 right-2.5;
+  }
 }
 
 .text-pixel {
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index b485bc8..15ea937 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -15,8 +15,8 @@
               <div class="w-full grid gap-3 relative">
                 <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" type="password" name="password" placeholder="Password" required />
-                  <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+                  <button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
@@ -41,8 +41,8 @@
               <div class="w-full grid gap-3 relative">
                 <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" type="password" name="password" placeholder="Password" required />
-                  <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+                  <button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
@@ -76,6 +76,8 @@ const username = ref('')
 const password = ref('')
 const switchForm = ref('login')
 const loginError = ref('')
+const showPassword = ref(false)
+
 // automatic login because of development
 onMounted(async () => {
   const token = useCookies().get('token')