Spaces:
Sleeping
Sleeping
File size: 2,130 Bytes
1fff71f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<script lang="ts">
import { initiateOAuthLogin } from '$lib/services/auth';
import { ENABLE_MOCK_AUTH } from '$lib/utils/constants';
let loading = false;
let error: string | null = null;
async function handleLogin() {
loading = true;
error = null;
try {
await initiateOAuthLogin();
// OAuth will redirect, mock auth will complete
} catch (err) {
error = err instanceof Error ? err.message : 'Login failed';
console.error('Login error:', err);
} finally {
loading = false;
}
}
</script>
<div class="login-form card shadow-sm">
<div class="card-body p-3 p-md-4">
<div class="text-center mb-3 mb-md-4">
<i class="bi bi-chat-dots-fill text-primary login-icon"></i>
<h2 class="mt-3 fs-4 fs-md-3">Welcome to PrepMate</h2>
<p class="text-muted mb-0 fs-6">Sign in to manage your chat sessions</p>
</div>
{#if error}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
{error}
<button
type="button"
class="btn-close"
aria-label="Close"
on:click={() => (error = null)}
></button>
</div>
{/if}
<div class="d-grid gap-3">
<button
type="button"
class="btn btn-primary btn-lg"
on:click={handleLogin}
disabled={loading}
>
{#if loading}
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"
></span>
{:else}
<i class="bi bi-box-arrow-in-right me-2"></i>
{/if}
{ENABLE_MOCK_AUTH ? 'Login (Mock)' : 'Login with HuggingFace'}
</button>
</div>
{#if ENABLE_MOCK_AUTH}
<div class="alert alert-warning mt-3 mb-0" role="alert">
<i class="bi bi-info-circle-fill me-2"></i>
<strong>Development Mode:</strong> Using mock authentication
</div>
{/if}
</div>
</div>
<style>
.login-form {
max-width: 100%;
margin: 0 auto;
}
.login-icon {
font-size: 2.5rem;
}
/* Mobile optimizations */
@media (max-width: 576px) {
.login-icon {
font-size: 2rem;
}
}
/* Larger screens */
@media (min-width: 768px) {
.login-icon {
font-size: 3rem;
}
}
</style>
|