improve login/register pages

src/components/Chart.svelte

@@ -50,7 +50,7 @@
 					},
 					tooltip: {
 						callbacks: {
-							label: function (tooltipItem) {
+							label: function(tooltipItem) {
 								return `${tooltipItem.label}: $${tooltipItem.raw.toFixed(2)}`;
 							}
 						}
@@ -68,9 +68,10 @@
 </script>
 
 <div>
-	{#if data.stocks.length > 0}
+	{#if data && data.stocks && data.stocks.length > 0}
 		<canvas bind:this={chartContainer}></canvas>
 	{:else}
 		<p>No insights available.</p>
 	{/if}
 </div>
+

src/routes/login/+page.svelte

@@ -2,10 +2,12 @@
 	import { onMount } from 'svelte';
 	import { authentication } from '../store.js';
 	import { goto } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 
 	let isAuthenticated = false;
 	let isLoading = true;
 	let user = null;
+	let showPassword = false;
 
 	$: authentication.subscribe((value) => {
 		isAuthenticated = !!value;
@@ -76,24 +78,43 @@
 	function navigateToRegister() {
 		window.location.href = '/register';
 	}
+
+	function togglePasswordVisibility() {
+		showPassword = !showPassword;
+	}
 </script>
 
 <svelte:head>
-	<title>Profile</title>
-	<meta name="description" content="Profile" />
+	<title>Login</title>
+	<meta name="description" content="Login page" />
 </svelte:head>
 
-<div class="text-column">
+<div in:fade class="text-column">
 	{#if isLoading}
 		<p>Loading...</p>
 	{:else if !isAuthenticated}
 		<div class="card">
 			<form on:submit={submit}>
 				<input type="text" name="username" placeholder="username" class="input-field" />
-				<input type="password" name="password" placeholder="password" class="input-field" />
+
+				<div class="password-container">
+					<input
+						type={showPassword ? 'text' : 'password'}
+						name="password"
+						placeholder="password"
+						class="input-field"
+					/>
+					<span class="eye-icon" on:click={togglePasswordVisibility}>
+						{#if showPassword}
+							👁️‍🗨️
+						{:else}
+							👁️‍🗨️
+						{/if}
+					</span>
+				</div>
+
 				<button type="submit" class="add-button">Login</button>
-				<button type="button" class="register-button" on:click={navigateToRegister}>Register</button
-				>
+				<button type="button" class="register-button" on:click={navigateToRegister}>Register</button>
 			</form>
 		</div>
 	{:else}
@@ -101,3 +122,58 @@
 		<button class="logout-button" on:click={logout}>Logout</button>
 	{/if}
 </div>
+
+<style>
+    input::placeholder {
+        opacity: 0.5;
+    }
+
+    .password-container {
+        position: relative;
+    }
+
+    .eye-icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        font-size: 1.1rem;
+        color: #666;
+        user-select: none;
+    }
+
+    .input-field {
+        width: 100%;
+        padding: 0.5rem 2.5rem 0.5rem 0.5rem;
+        margin-bottom: 1rem;
+        box-sizing: border-box;
+    }
+
+    .add-button,
+    .register-button,
+    .logout-button {
+        padding: 0.5rem 1rem;
+        margin-top: 0.5rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: bold;
+    }
+
+    .add-button {
+        background-color: #4caf50;
+        color: white;
+        margin-right: 0.5rem;
+    }
+
+    .register-button {
+        background-color: #2196f3;
+        color: white;
+    }
+
+    .logout-button {
+        background-color: #f44336;
+        color: white;
+    }
+</style>

src/routes/register/+page.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { authentication } from '../store.js';
+	import { fade } from 'svelte/transition';
+
+	let showPassword = false;
 
 	async function submit(event) {
 		event.preventDefault();
@@ -15,7 +18,7 @@
 		}
 
 		if (password !== passwordConfirm) {
-			alert("Passwords don't match");
+			alert('Passwords don\'t match');
 			return;
 		}
 
@@ -48,6 +51,15 @@
 			alert('An error occurred. Please try again.');
 		}
 	}
+
+	function togglePasswordVisibility() {
+		showPassword = !showPassword;
+	}
+
+	function cancel() {
+		window.location.href = '/login';
+	}
+
 </script>
 
 <svelte:head>
@@ -55,18 +67,89 @@
 	<meta name="description" content="Registration page" />
 </svelte:head>
 
-<div class="text-column">
+<div in:fade class="text-column">
 	<div class="card">
 		<form on:submit={submit}>
 			<input type="text" name="username" placeholder="username" class="input-field" />
-			<input type="password" name="password" placeholder="password" class="input-field" />
-			<input
-				type="password"
-				name="passwordConfirm"
-				placeholder="repeat password"
-				class="input-field"
-			/>
+
+			<div class="password-container">
+				<input
+					type={showPassword ? 'text' : 'password'}
+					name="password"
+					placeholder="password"
+					class="input-field"
+				/>
+				<span class="eye-icon" on:click={togglePasswordVisibility}>
+					{#if showPassword}
+						👁️‍🗨️
+					{:else}
+						👁️‍🗨️
+					{/if}
+				</span>
+			</div>
+
+			<div class="password-container">
+				<input
+					type={showPassword ? 'text' : 'password'}
+					name="passwordConfirm"
+					placeholder="repeat password"
+					class="input-field"
+				/>
+				<span class="eye-icon" on:click={togglePasswordVisibility}>
+					{#if showPassword}
+						👁️‍🗨️
+					{:else}
+						👁️‍🗨️
+					{/if}
+				</span>
+			</div>
+
 			<button type="submit" class="register-button">Register</button>
+			<button class="cancel-button" on:click={cancel}>Cancel</button>
 		</form>
 	</div>
 </div>
+
+<style>
+    input::placeholder {
+        opacity: 0.5;
+    }
+
+    .password-container {
+        position: relative;
+    }
+
+    .eye-icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        font-size: 1.1rem;
+        color: #666;
+        user-select: none;
+    }
+
+    .input-field {
+        width: 100%;
+        padding: 0.5rem 2.5rem 0.5rem 0.5rem;
+        margin-bottom: 1rem;
+        box-sizing: border-box;
+    }
+
+    .register-button,
+    .cancel-button {
+        padding: 0.5rem 1rem;
+        margin-top: 0.5rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: bold;
+    }
+
+    .cancel-button {
+        background-color: #f44336;
+        color: white;
+    }
+
+</style>