From ee8d03477438516fb9f9874e218f9db753132be3 Mon Sep 17 00:00:00 2001
From: Big-Iron-Cheems <52252627+Big-Iron-Cheems@users.noreply.github.com>
Date: Sun, 26 May 2024 15:02:26 +0200
Subject: [PATCH 1/4] Move forgotPassword element

Recolored to black to work on white input
---
 src/routes/login/+page.svelte | 9 +++++----
 static/icons/help-circle.svg  | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index f60bd41..10ab402 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -27,16 +27,17 @@
 </script>
 
 <Centered>
-    <Form submit={submit} style="padding-right: calc(var(--container-padding) - var(--icon-size) - var(--button-padding));">
+    <Form submit={submit}>
         <div style="display: inline-grid; align-items: center; row-gap: 10px; grid-template-columns: 1fr auto;">
             <h1>Login</h1>
 
             <!-- svelte-ignore a11y-autofocus -->
             <input name="name" type="text" bind:value={name} placeholder="Username or Email" style="grid-column: 1;" required autofocus/>
 
-            <input name="password" type="password" bind:value={password} placeholder="Password" style="grid-column: 1;" required />
-
-            <Link location="/forgotPassword" style="margin-inline: calc(var(--button-padding) / 2); grid-column: 2; width: fit-content;"><Icon src="help-circle" /></Link>
+            <div style="position: relative; grid-column: 1;">
+                <input name="password" type="password" bind:value={password} placeholder="Password" required style="padding-right: 34px;" />
+                <Link location="/forgotPassword" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"><Icon src="help-circle" /></Link>
+            </div>
 
             <button type="submit" style="grid-column: 1;">Login</button>
 
diff --git a/static/icons/help-circle.svg b/static/icons/help-circle.svg
index d05cae1..12b3aad 100644
--- a/static/icons/help-circle.svg
+++ b/static/icons/help-circle.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52153 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 17H12.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52153 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17H12.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

From 085cc62d5f60ae551843cf328398da4c115ba4f5 Mon Sep 17 00:00:00 2001
From: Big-Iron-Cheems <52252627+Big-Iron-Cheems@users.noreply.github.com>
Date: Mon, 27 May 2024 14:42:30 +0200
Subject: [PATCH 2/4] More password changes

- Move the reset to its own place (the icon was not clear)
- Add a pw visibility toggle
---
 src/routes/login/+page.svelte | 33 ++++++++++++++++++++++++++++++---
 static/icons/eye-off.svg      |  1 +
 static/icons/eye.svg          |  1 +
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 static/icons/eye-off.svg
 create mode 100644 static/icons/eye.svg

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 10ab402..7fbf033 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -9,7 +9,9 @@
     import {goto} from "$app/navigation";
 
     let name: string;
-    let password: string;
+    let password: string = "";
+    let passwordVisible: boolean = false;
+    let passwordInput: HTMLInputElement;
     let error: HTMLSpanElement;
 
     function submit() {
@@ -23,6 +25,11 @@
             });
     }
 
+    function togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        passwordInput.type = passwordVisible ? 'text' : 'password';
+    }
+
     $: if (browser && $token) goto("/account");
 </script>
 
@@ -35,10 +42,16 @@
             <input name="name" type="text" bind:value={name} placeholder="Username or Email" style="grid-column: 1;" required autofocus/>
 
             <div style="position: relative; grid-column: 1;">
-                <input name="password" type="password" bind:value={password} placeholder="Password" required style="padding-right: 34px;" />
-                <Link location="/forgotPassword" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"><Icon src="help-circle" /></Link>
+                <input name="password" bind:this={passwordInput} type="password" bind:value={password}
+                       placeholder="Password" required style="padding-right: 34px;"/>
+
+                <button type="button" on:click={togglePasswordVisibility} class="password-toggle">
+                    <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
+                </button>
             </div>
 
+            <Link location="/forgotPassword" style="grid-column: 1;">Password reset</Link>
+
             <button type="submit" style="grid-column: 1;">Login</button>
 
             <p bind:this={error} class="error" style="display: none; grid-column: 1;"/>
@@ -47,3 +60,17 @@
         </div>
     </Form>
 </Centered>
+
+<style>
+    .password-toggle {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+        border: none !important;
+        background: none !important;
+        width: 24px;
+        height: 24px;
+    }
+</style>
diff --git a/static/icons/eye-off.svg b/static/icons/eye-off.svg
new file mode 100644
index 0000000..0d7ccb2
--- /dev/null
+++ b/static/icons/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/static/icons/eye.svg b/static/icons/eye.svg
new file mode 100644
index 0000000..8ec58f6
--- /dev/null
+++ b/static/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file

From 687ffd67d3d4aca01b9ce172c2d0216d51f18380 Mon Sep 17 00:00:00 2001
From: Big-Iron-Cheems <52252627+Big-Iron-Cheems@users.noreply.github.com>
Date: Mon, 27 May 2024 19:08:44 +0200
Subject: [PATCH 3/4] Add `passwordVisible` toggle in Register view

---
 src/routes/login/+page.svelte    |  4 +--
 src/routes/register/+page.svelte | 57 ++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 7fbf033..ba20146 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -9,8 +9,8 @@
     import {goto} from "$app/navigation";
 
     let name: string;
-    let password: string = "";
-    let passwordVisible: boolean = false;
+    let password: string;
+    let passwordVisible: boolean;
     let passwordInput: HTMLInputElement;
     let error: HTMLSpanElement;
 
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 239110b..03bf50f 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
     import Centered from "$lib/components/centered.svelte";
     import Form from "$lib/components/form.svelte";
-    import { api } from "$lib/api";
-    import { browser } from "$app/environment";
-    import { token } from "$lib/user";
-    import { goto } from "$app/navigation";
-    import { Turnstile } from 'svelte-turnstile';
+    import Icon from "$lib/components/icon.svelte";
+    import {api} from "$lib/api";
+    import {browser} from "$app/environment";
+    import {token} from "$lib/user";
+    import {goto} from "$app/navigation";
+    import {Turnstile} from 'svelte-turnstile';
 
     let username: string;
     let email: string;
     let password: string;
+    let passwordVisible: boolean;
+    let passwordInput: HTMLInputElement;
     let cfToken: string;
     let error: HTMLSpanElement;
 
@@ -40,6 +43,11 @@
             });
     }
 
+    function togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        passwordInput.type = passwordVisible ? 'text' : 'password';
+    }
+
     if (browser && $token) goto("/account");
 </script>
 
@@ -56,23 +64,44 @@
 
             <input bind:value={email} type="email" placeholder="Email" id="email" name="email" required>
 
-            <input bind:value={password} type="password" placeholder="Password" id="password" name="password" required>
+            <div style="position: relative; grid-column: 1;">
+                <input name="password" bind:this={passwordInput} type="password" bind:value={password}
+                       placeholder="Password" required style="padding-right: 34px;"/>
+
+                <button type="button" on:click={togglePasswordVisibility} class="password-toggle">
+                    <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
+                </button>
+            </div>
 
             <Turnstile
-                    id="captcha"
-                    siteKey="1x00000000000000000000AA"
-                    theme="light"
-                    on:turnstile-callback={onTurnstileSuccess}
-                    on:turnstile-error={onTurnstileError}
-                    on:turnstile-expired={onTurnstileError}
-                    on:turnstile-timeout={onTurnstileError}
+                id="captcha"
+                siteKey="1x00000000000000000000AA"
+                theme="light"
+                on:turnstile-callback={onTurnstileSuccess}
+                on:turnstile-error={onTurnstileError}
+                on:turnstile-expired={onTurnstileError}
+                on:turnstile-timeout={onTurnstileError}
             />
 
             <button type="submit">Register</button>
 
-            <p bind:this={error} class="error" style="display: none;" />
+            <p bind:this={error} class="error" style="display: none;"/>
 
             <p>Have an account? <a href="/login">Login</a></p>
         </Form>
     {/if}
 </Centered>
+
+<style>
+    .password-toggle {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+        border: none !important;
+        background: none !important;
+        width: 24px;
+        height: 24px;
+    }
+</style>

From bd2c06cde317cc3f46315a70155b0a95147b3b56 Mon Sep 17 00:00:00 2001
From: Big-Iron-Cheems <52252627+Big-Iron-Cheems@users.noreply.github.com>
Date: Mon, 27 May 2024 20:23:47 +0200
Subject: [PATCH 4/4] Use ID instead of class

---
 src/routes/login/+page.svelte    | 4 ++--
 src/routes/register/+page.svelte | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index ba20146..e523db7 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -45,7 +45,7 @@
                 <input name="password" bind:this={passwordInput} type="password" bind:value={password}
                        placeholder="Password" required style="padding-right: 34px;"/>
 
-                <button type="button" on:click={togglePasswordVisibility} class="password-toggle">
+                <button type="button" on:click={togglePasswordVisibility} id="password-toggle">
                     <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
                 </button>
             </div>
@@ -62,7 +62,7 @@
 </Centered>
 
 <style>
-    .password-toggle {
+    #password-toggle {
         position: absolute;
         right: 10px;
         top: 50%;
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 03bf50f..69afb37 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -68,7 +68,7 @@
                 <input name="password" bind:this={passwordInput} type="password" bind:value={password}
                        placeholder="Password" required style="padding-right: 34px;"/>
 
-                <button type="button" on:click={togglePasswordVisibility} class="password-toggle">
+                <button type="button" on:click={togglePasswordVisibility} id="password-toggle">
                     <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
                 </button>
             </div>
@@ -93,7 +93,7 @@
 </Centered>
 
 <style>
-    .password-toggle {
+    #password-toggle {
         position: absolute;
         right: 10px;
         top: 50%;