Передаем на тест
This commit is contained in:
165
frontend/src/routes/login/+page.svelte
Normal file
165
frontend/src/routes/login/+page.svelte
Normal file
@@ -0,0 +1,165 @@
|
||||
<!-- [DEF:LoginPage:Component] -->
|
||||
<!--
|
||||
@SEMANTICS: login, auth, ui, form
|
||||
@PURPOSE: Provides the user interface for local and ADFS authentication.
|
||||
@LAYER: Feature
|
||||
@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 { 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
|
||||
const profileRes = await fetch('/api/auth/me', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${data.access_token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (profileRes.ok) {
|
||||
const user = await profileRes.json();
|
||||
auth.setUser(user);
|
||||
goto('/');
|
||||
} else {
|
||||
error = 'Failed to fetch user profile';
|
||||
}
|
||||
} 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] -->
|
||||
Reference in New Issue
Block a user