From 06b524ae1c5f457f36d9ba60fa945e334b19a573 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <me@jonasjones.dev>
Date: Sat, 25 Jan 2025 00:52:17 +0100
Subject: [PATCH] updated login code

---
 src/routes/login/+page.svelte | 38 ++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 498836f..23221c7 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,9 +1,11 @@
 <script>
     import { navigate } from 'svelte-routing';
     import { setSessionKey } from '../../utils/session.js';
+  import { page } from '$app/state';
     let email = '';
     let password = '';
     let errorMessage = '';
+    let showPassword = false;
 
     const handleLogin = async () => {
       try {
@@ -30,21 +32,39 @@
     };
   </script>
 
-  <h2>Login</h2>
+  <div class="login-container">
+    <div class="login-prompt">
+      <h1>Login</h1>
 
-  {#if errorMessage}
-    <p style="color: red;">{errorMessage}</p>
-  {/if}
+      {#if errorMessage}
+        <p style="color: red;">{errorMessage}</p>
+      {/if}
 
       <form on:submit|preventDefault={handleLogin}>
         <label for="email">Email:</label>
         <input id="email" bind:value={email} required />
 
-    <label for="password">Password:</label>
-    <input type="password" id="password" bind:value={password} required />
+        <label for="password">Password:</label>
 
-    <button type="submit">Login</button>
-  </form>
+        <div style="display: flex; align-items: center;">
+          <input style="flex-grow: 1; margin-right: 10px;" type={showPassword ? 'text' : 'password'} id="password" bind:value={password} required />
+
+          <button
+            type="button"
+            on:click={() => showPassword = !showPassword}
+            style="border: none; cursor: pointer; margin-top: -14px;"
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+          >
+            <i class={showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
+          </button>
+        </div>
+
+        <p>Have no account? <a href="/register{page.url.search}">Register!</a></p>
+
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  </div>
 
   <style>
     .login-container {
@@ -109,7 +129,7 @@
     }
 
     button:hover {
-      background-color: #0056b3;
+      background-color: var(--color-theme-2);
     }
 
     p {