ss-tools/frontend/src/routes/login/+page.svelte

<!-- [DEF:LoginPage:Component] -->
<!--
@TIER:      STANDARD
@SEMANTICS: login, auth, ui, form
@PURPOSE:   Provides the user interface for local and ADFS authentication.
@LAYER:     UI
@RELATION:  USES -> authStore
@RELATION:  CALLS -> api.auth.login

@INVARIANT: Shows both local login form and ADFS SSO button.
-->

<script lang="ts">
    import { onMount } from 'svelte';
    import { auth } from '../../lib/auth/store';
    import { api } from '../../lib/api';
    import { goto } from '$app/navigation';

    let username = '';
    let password = '';
    let error = '';
    let loading = false;

    // [DEF:handleLogin:Function]
    /**
     * @purpose Submits the local login form to the backend.
     * @pre     Username and password are not empty.
     * @post    User is authenticated and redirected on success.
     */
    async function handleLogin() {
        if (!username || !password) {
            error = 'Please enter both username and password';
            return;
        }

        loading = true;
        error = '';

        try {
            const formData = new URLSearchParams();
            formData.append('username', username);
            formData.append('password', password);

            const response = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: formData
            });

            if (response.ok) {
                const data = await response.json();
                auth.setToken(data.access_token);
                
                // Fetch user profile
                try {
                    const user = await api.fetchApi('/auth/me');
                    auth.setUser(user);
                    goto('/');
                } catch (err) {
                    error = 'Failed to fetch user profile: ' + err.message;
                }
            } else {
                const errData = await response.json();
                error = errData.detail || 'Invalid username or password';
            }
        } catch (e) {
            error = 'An error occurred during login';
            console.error(e);
        } finally {
            loading = false;
        }
    }
    // [/DEF:handleLogin:Function]

    // [DEF:handleADFSLogin:Function]
    /**
     * @purpose Redirects the user to the ADFS login endpoint.
     */
    function handleADFSLogin() {
        window.location.href = '/api/auth/login/adfs';
    }
    // [/DEF:handleADFSLogin:Function]

    onMount(() => {
        if ($auth.isAuthenticated) {
            goto('/');
        }
    });
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Login</h2>

    {#if error}
        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-200">
            {error}
        </div>
    {/if}

    <form on:submit|preventDefault={handleLogin} class="space-y-4">
        <div>
            <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
            <input
                type="text"
                id="username"
                bind:value={username}
                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                required
            />
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
            <input
                type="password"
                id="password"
                bind:value={password}
                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                required
            />
        </div>

        <button
            type="submit"
            disabled={loading}
            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
        >
            {loading ? 'Logging in...' : 'Login'}
        </button>
    </form>

    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white text-gray-500">Or continue with</span>
            </div>
        </div>

        <div class="mt-6">
            <button
                on:click={handleADFSLogin}
                class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
                Corporate SSO (ADFS)
            </button>
        </div>
    </div>
</div>
<!-- [/SECTION: TEMPLATE] -->

<style>
    /* No additional styles needed, using Tailwind */
</style>

<!-- [/DEF:LoginPage:Component] -->