added login control to page

src/web-client/src/lib/AuthForm.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	let showPassword = false;
+
+	const revealPass = () => (showPassword = !showPassword);
+
+	function execLogin() {
+		console.log('LOGGING IN');
+	}
+</script>
+
+<form class="flex" on:submit|preventDefault={execLogin}>
+	<span class="flex flex-col justify-around w-20">
+		<label for="email"> Email </label>
+		<label for="password"> Password&nbsp;</label>
+	</span>
+
+	<span class="flex flex-col">
+		<span class="flex">
+			<input class="py-1" type="text" />
+			<button class="w-20"> Login </button>
+		</span>
+		<span class="flex">
+			<input
+				class="px-2 py-1 border-r-0"
+				name="password"
+				on:blur={() => (showPassword = false)}
+				type={showPassword ? 'text' : 'password'}
+			/>
+			<button class="border-l-0 px-2 py-1 w-16" on:click|stopPropagation={revealPass}>
+				{showPassword ? 'Hide' : 'Show'}
+			</button>
+		</span>
+	</span>
+</form>

src/web-client/src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import type { LayoutData } from './$types';
 	import { goto } from '$app/navigation';
 	import SearchBox from '$lib/SearchBox.svelte';
+
+	import AuthForm from '$lib/AuthForm.svelte';
 	import '../app.css';
 
 	export let data: LayoutData;
@@ -43,8 +45,9 @@
 					<SearchBox on:search={onSubmit} query={data.query} page={data.page} />
 				</span>
 			</li>
-			<li class="px-6">
+			<li class="pr-5">
 				<!-- <span>I want email alerts!</span> -->
+				<AuthForm />
 			</li>
 		</ul>
 	</nav>