implemented login page and redirects

controller/pyproject.toml

@@ -23,6 +23,7 @@ psutil = "^5.9.8"
 pydantic-settings = "^2.4.0"
 alembic = "^1.13.2"
 sqlalchemy = "^2.0.32"
+python-multipart = "^0.0.9"
 
 [tool.poetry.group.enterprise]
 optional = true

controller/thymis_controller/routers/auth.py

@@ -6,6 +6,7 @@
 from fastapi import (
     APIRouter,
     Depends,
+    Form,
     HTTPException,
     Response,
     status,
@@ -33,27 +34,27 @@ class AuthMethods(BaseModel):
 router = APIRouter(
     tags=["auth"],
 )
-basicAuth = HTTPBasic()
-
 
 # only enable basic auth if the flag is set
 @router.post("/login/basic")
 def login_basic(
-    credentials: Annotated[HTTPBasicCredentials, Depends(basicAuth)], response: Response, db_session: SessionAD
+    username: Annotated[str, Form()], password: Annotated[str, Form()], redirect: Annotated[str, Form()], response: Response, db_session: SessionAD
 ):
     if not global_settings.AUTH_BASIC:
         raise HTTPException(
             status_code=status.HTTP_401_UNAUTHORIZED, detail="Basic auth is disabled"
         )
     if (
-        credentials.username == global_settings.AUTH_BASIC_USERNAME
-        and credentials.password == global_settings.AUTH_BASIC_PASSWORD
+        username == global_settings.AUTH_BASIC_USERNAME
+        and password == global_settings.AUTH_BASIC_PASSWORD
     ):  # TODO replace password check with hash comparison
         apply_user_session(db_session, response)
-        return {"message": "Logged in"}
+        return RedirectResponse(
+            redirect, headers=response.headers, status_code=status.HTTP_303_SEE_OTHER
+        )
     else:
-        raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid credentials"
+        return RedirectResponse(
+            f"/login?redirect={redirect}&authError=credentials", headers=response.headers, status_code=status.HTTP_303_SEE_OTHER
         )
 
 
@@ -105,7 +106,7 @@ async def callback(code: str, response: Response, db_session: SessionAD):
 
     apply_user_session(db_session, response)
     return RedirectResponse(
-        "/", headers=response.headers
+        "/", headers=response.headers, status_code=status.HTTP_303_SEE_OTHER
     )  # necessary to set the cookies
 
 

frontend/src/routes/+layout.svelte → frontend/src/routes/(authenticated)/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import '../app.postcss';
+	import '../../app.postcss';
 	import Navbar from '$lib/navbar/Navbar.svelte';
 	import Sidebar from '$lib/sidebar/Sidebar.svelte';
 	import SplitPane from '$lib/splitpane/SplitPane.svelte';
-	import type { LayoutData } from '../routes/$types';
+	import type { LayoutData } from './$types';
 	import { saveState } from '$lib/state';
 	import { state } from '$lib/state';
 	import { taskStatus } from '$lib/taskstatus';

frontend/src/routes/+layout.ts → frontend/src/routes/(authenticated)/+layout.ts

@@ -3,10 +3,10 @@ import '$lib/i18n'; // Import to initialize. Important :)
 import { locale, waitLocale } from 'svelte-i18n';
 import type { LayoutLoad } from './$types';
 import type { State, Module } from '$lib/state';
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import { getAllTasks } from '$lib/taskstatus';
 
-export const load = (async ({ fetch }) => {
+export const load = (async ({ fetch, url }) => {
 	if (browser) {
 		let lang = window.navigator.language;
 		// split -
@@ -27,6 +27,9 @@ export const load = (async ({ fetch }) => {
 		}
 	});
 
+	if (stateResponse.status === 401) {
+		redirect(307, '/login?redirect=' + encodeURIComponent(url.pathname));
+	}
 	const state = (await stateResponse.json()) as State;
 	if (!state) {
 		error(500, 'Could not fetch state');

frontend/src/routes/+page.server.ts

@@ -0,0 +1,12 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ cookies }) => {
+	const session = cookies.get('session');
+	if (!session) {
+		redirect(307, '/login');
+	}
+	else {
+		redirect(303, '/overview');
+	}
+};

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { queryParam } from 'sveltekit-search-params';
+	import '../../app.postcss';
+	import type { Writable } from 'svelte/store';
+	import { enhance } from '$app/forms';
+
+    const redirectString = queryParam('redirect');
+    const authError: Writable<string | null> = queryParam('authError');
+</script>
+
+<section class="bg-gray-50 dark:bg-gray-900">
+    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+        <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+                    Sign in to your account
+                </h1>
+                {#if $authError }
+                    <div class="p-4 text-sm text-red-500 bg-red-100 rounded-lg dark:bg-red-700 dark:text-red-200">
+                        You have entered an invalid username or password.
+                    </div>
+                {/if}
+                <form class="space-y-4 md:space-y-6" action="/auth/login/basic" method="POST">
+                    <div>
+                        <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your username</label>
+                        <input type="text" name="username" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="username" required>
+                    </div>
+                    <div>
+                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
+                        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
+                    </div>
+                    <button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
+                    <input type="text" name="redirect" value="{$redirectString || "/overview"}" hidden>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>