stocks-fe/src/routes/login/+page.svelte

<script>
	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 showPassword = false;
	let isDisabled = false;

	$: authentication.subscribe((value) => {
		isAuthenticated = !!value;
	});

	onMount(() => {
		try {
			const storedAuth = localStorage.getItem('authentication');
			if (storedAuth) {
				authentication.set(JSON.parse(storedAuth));
				goto("/portfolio");
			}
		} catch (error) {
			console.error('Error parsing stored auth:', error);
		} finally {
			isLoading = false;
		}
	});

	async function submit(event) {
		event.preventDefault();

		isDisabled = true;

		const formData = new FormData(event.target);
		const username = formData.get('username');
		const password = formData.get('password');

		if (!username || !password) {
			alert('Please enter both username and password.');
			return;
		}

		const data = {
			username: username,
			password: password
		};

		try {
			const response = await fetch(import.meta.env.VITE_AUTH_HOST + '/api/authenticate', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(data)
			});

			if (response.ok) {
				const result = await response.json();
				authentication.set(result);
				localStorage.setItem('authentication', JSON.stringify(result));
				await goto('/portfolio');
			} else {
				const error = await response.json();
				console.error('Login failed:', error);
				alert('Login failed: ' + error.message);
			}
		} catch (err) {
			console.error('Error during login:', err);
			alert('An error occurred. Please try again.');
		} finally {
			isDisabled = false;
		}
	}

	function navigateToRegister() {
		window.location.href = '/register';
	}

	function togglePasswordVisibility() {
		showPassword = !showPassword;
	}
</script>

<svelte:head>
	<title>Login</title>
	<meta name="description" content="Login page" />
</svelte:head>

<div in:fade class="flex justify-center items-center min-h-[70vh] px-4">
	{#if isLoading}
		<p class="text-gray-500 dark:text-gray-400">Loading...</p>
	{:else if !isAuthenticated}
		<div class="w-full max-w-sm bg-white dark:bg-gray-900 shadow-md rounded-xl p-6 space-y-6">
			<form on:submit={submit} class="space-y-4">
				<!-- Username -->
				<input
					type="text"
					name="username"
					placeholder="Username"
					class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
				/>

				<!-- Password -->
				<div class="relative">
					<input
						type={showPassword ? 'text' : 'password'}
						name="password"
						placeholder="Password"
						class="w-full px-4 py-2 pr-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
					/>
					<span
						class="absolute inset-y-0 right-3 flex items-center cursor-pointer text-gray-500 dark:text-gray-400 text-lg"
						on:click={togglePasswordVisibility}
					>
						{#if showPassword}
							👁️‍🗨️
						{:else}
							👁️‍🗨️
						{/if}
					</span>
				</div>

				<!-- Buttons -->
				<button
					type="submit"
					class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition flex justify-center items-center gap-2"
					disabled={isDisabled}
				>
					{#if isDisabled}
						<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
						</svg>
						<span>Logging in...</span>
					{:else}
						<span>Login</span>
					{/if}
				</button>

				<button
					type="button"
					class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 rounded-lg transition"
					on:click={navigateToRegister}
					disabled={isDisabled}
				>
					Register
				</button>
			</form>
		</div>
	{/if}
</div>