From d2cf5457346285f9abcebc4b16ed41bf92b2254d Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Sat, 20 Sep 2025 11:17:01 +0200
Subject: [PATCH] improve login and install UI

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 .../src/lib/components/ThemeToggle.svelte     | 10 ++++----
 frontend/src/routes/install/+page.svelte      | 24 ++++++++++++-------
 frontend/src/routes/login/+page.svelte        | 13 +++++++++-
 .../routes/login/reset-password/+page.svelte  | 12 +++++++++-
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index 9253c2a..06c2a5a 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -11,13 +11,13 @@
 
 <button
 	on:click={handleToggle}
-	class="relative inline-flex items-center justify-center w-6 h-6 rounded transition-colors duration-200 focus:outline-none"
+	class="relative inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 hover:bg-white/20 dark:hover:bg-gray-700/80 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-lg"
 	title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 	aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 >
 	<!-- sun icon for light mode -->
 	<svg
-		class="w-4 h-4 text-yellow-400 transition-all duration-200 {isDark
+		class="w-5 h-5 text-yellow-500 dark:text-yellow-400 transition-all duration-300 {isDark
 			? 'opacity-0 rotate-90 scale-0'
 			: 'opacity-100 rotate-0 scale-100'} absolute"
 		fill="currentColor"
@@ -33,7 +33,7 @@
 
 	<!-- moon icon for dark mode -->
 	<svg
-		class="w-4 h-4 text-blue-300 transition-all duration-200 {isDark
+		class="w-5 h-5 text-blue-400 dark:text-blue-300 transition-all duration-300 {isDark
 			? 'opacity-100 rotate-0 scale-100'
 			: 'opacity-0 -rotate-90 scale-0'} absolute"
 		fill="currentColor"
@@ -44,8 +44,8 @@
 	</svg>
 
 	<!-- invisible placeholder to maintain button size -->
-	<div class="w-4 h-4 opacity-0">
-		<svg class="w-4 h-4" viewBox="0 0 20 20">
+	<div class="w-5 h-5 opacity-0">
+		<svg class="w-5 h-5" viewBox="0 0 20 20">
 			<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1z" />
 		</svg>
 	</div>
diff --git a/frontend/src/routes/install/+page.svelte b/frontend/src/routes/install/+page.svelte
index 662480b..bcb926c 100644
--- a/frontend/src/routes/install/+page.svelte
+++ b/frontend/src/routes/install/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { API } from '$lib/api/api';
 	import { AppStateService } from '$lib/service/appState';
@@ -10,6 +11,8 @@
 	import FormGrid from '$lib/components/FormGrid.svelte';
 	import FormColumns from '$lib/components/FormColumns.svelte';
 	import FormColumn from '$lib/components/FormColumn.svelte';
+	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import { setupTheme, setupOSThemeListener } from '$lib/theme.js';
 
 	// services
 	const api = API.instance;
@@ -33,6 +36,12 @@
 
 	// Removed edition detection - single unified installation
 
+	// initialize theme system
+	onMount(() => {
+		setupTheme();
+		setupOSThemeListener();
+	});
+
 	// if already installed or not a superadministrator redirect to the dashboard
 	const user = appStateService.getUser();
 	const isInstalled = appStateService.isInstalled();
@@ -142,19 +151,16 @@
 <div
 	class="inset-0 z-50 min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 >
+	<!-- theme toggle -->
+	<div class="fixed top-3 right-6 z-50">
+		<ThemeToggle />
+	</div>
 	<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-		<div class="flex justify-center">
-			<img src="/logo-blue.svg" class="w-48" alt="Phishing Club" />
-		</div>
-		<p
-			class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300 transition-colors duration-200"
-		>
+		<p class="text-center text-sm text-gray-600 dark:text-gray-300 transition-colors duration-200">
 			Complete the setup to get started with Phishing Club
 		</p>
 
-		<div
-			class="sm:mx-auto sm:max-w-2xl mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900/50 transition-colors duration-200"
-		>
+		<div class="sm:mx-auto sm:max-w-2xl mt-8">
 			<div class="flex justify-between items-center mb-8 w-full px-4">
 				{#each steps as step, index}
 					<div class="flex flex-col items-center w-32">
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index c7d3f32..7372ad9 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -16,6 +16,8 @@
 	import { api } from '$lib/api/apiProxy';
 	import { addToast } from '$lib/store/toast';
 	import { page } from '$app/stores';
+	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import { setupTheme, setupOSThemeListener, theme } from '$lib/theme.js';
 
 	// services
 	const appState = AppStateService.instance;
@@ -43,6 +45,10 @@
 
 	// hooks
 	onMount(() => {
+		// initialize theme system
+		setupTheme();
+		setupOSThemeListener();
+
 		// if the user is already logged in, we want to redirect to the dashboard
 		if (appState.isLoggedIn()) {
 			console.info('login: navigating to /dashboard');
@@ -210,10 +216,15 @@
 <main
 	class="h-screen grid-cols-1 grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 bg-white dark:bg-gray-900 transition-colors duration-200"
 >
+	<!-- theme toggle -->
+	<div class="fixed top-3 right-6 z-50">
+		<ThemeToggle />
+	</div>
+
 	<div class="flex items-center justify-center h-full">
 		<img
 			class="fixed center top-6 w-1/4 md:w-1/4 lg:w-1/6 xl:w-1/6 2xl:w-1/6 lg:top-6 lg:left-4 xl:top-6 xl:left-4 2xl:top-6 2xl:left-4"
-			src="/logo-blue.svg"
+			src={$theme === 'dark' ? '/logo-white.svg' : '/logo-blue.svg'}
 			alt="phishing club logo"
 		/>
 		<div
diff --git a/frontend/src/routes/login/reset-password/+page.svelte b/frontend/src/routes/login/reset-password/+page.svelte
index 907ec4c..e3b1c86 100644
--- a/frontend/src/routes/login/reset-password/+page.svelte
+++ b/frontend/src/routes/login/reset-password/+page.svelte
@@ -10,6 +10,8 @@
 	import FormError from '$lib/components/FormError.svelte';
 	import PasswordField from '$lib/components/PasswordField.svelte';
 	import HeadTitle from '$lib/components/HeadTitle.svelte';
+	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import { setupTheme, setupOSThemeListener } from '$lib/theme.js';
 
 	// services
 	const api = API.instance;
@@ -29,6 +31,10 @@
 
 	// hooks
 	onMount(() => {
+		// initialize theme system
+		setupTheme();
+		setupOSThemeListener();
+
 		console.log('no implemented');
 		location.href = '/login';
 	});
@@ -62,7 +68,11 @@
 </script>
 
 <HeadTitle title="Change password" />
-<main>
+<main class="bg-white dark:bg-gray-900 transition-colors duration-200">
+	<!-- theme toggle -->
+	<div class="fixed top-3 right-6 z-50">
+		<ThemeToggle />
+	</div>
 	<Form on:submit={onSubmitChangePassword}>
 		<SubHeadline>Current password has expired. Set a new password</SubHeadline>
 		<PasswordField bind:value={changePasswordFormValues.currentPassword}