106 lines
No EOL
2.9 KiB
Svelte
106 lines
No EOL
2.9 KiB
Svelte
<script>
|
|
import { goto } from '$app/navigation';
|
|
import Navbar from '../Navbar.svelte';
|
|
|
|
let username = '';
|
|
let password = '';
|
|
let error = '';
|
|
let isLoading = false;
|
|
|
|
async function handleLogin() {
|
|
if (!username || !password) {
|
|
error = 'Please enter both username and password';
|
|
return;
|
|
}
|
|
|
|
isLoading = true;
|
|
error = '';
|
|
|
|
// Simulate login request
|
|
try {
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
// Replace with actual login logic
|
|
// await yourAuthFunction(username, password);
|
|
goto('/'); // Redirect after successful login
|
|
} catch (err) {
|
|
error = 'Invalid credentials';
|
|
} finally {
|
|
isLoading = false;
|
|
}
|
|
}
|
|
</script>
|
|
<main>
|
|
<Navbar />
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<h2 class="mb-4">Login</h2>
|
|
|
|
{#if error}
|
|
<div class="alert alert-danger">{error}</div>
|
|
{/if}
|
|
|
|
<form on:submit|preventDefault={handleLogin}>
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label">Username</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="username"
|
|
bind:value={username}
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="password"
|
|
bind:value={password}
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary w-100"
|
|
disabled={isLoading}
|
|
>
|
|
{#if isLoading}
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
Logging in...
|
|
{:else}
|
|
Login
|
|
{/if}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.login-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: calc(100vh - 44px); /* Account for navbar height */
|
|
padding: 2rem;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 2rem;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.form-control {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.75rem;
|
|
}
|
|
</style> |