125 lines
No EOL
2.9 KiB
Svelte
125 lines
No EOL
2.9 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { Input } from '$lib/components/ui/input';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import { authClient } from '$lib/backend/auth/client.js';
|
|
import { goto } from '$app/navigation';
|
|
|
|
let { mode = $bindable('sign-in') }: { mode: 'sign-in' | 'sign-up' } = $props();
|
|
|
|
let email = $state('');
|
|
let password = $state('');
|
|
let name = $state('');
|
|
let loading = $state(false);
|
|
let error = $state('');
|
|
|
|
async function handleSubmit(event: Event) {
|
|
event.preventDefault();
|
|
loading = true;
|
|
error = '';
|
|
|
|
try {
|
|
if (mode === 'sign-up') {
|
|
const result = await authClient.signUp.email({
|
|
email,
|
|
password,
|
|
name,
|
|
callbackURL: '/chat'
|
|
});
|
|
|
|
if (result.error) {
|
|
error = result.error.message || 'Failed to create account';
|
|
} else {
|
|
await goto('/chat');
|
|
}
|
|
} else {
|
|
const result = await authClient.signIn.email({
|
|
email,
|
|
password,
|
|
callbackURL: '/chat'
|
|
});
|
|
|
|
if (result.error) {
|
|
error = result.error.message || 'Invalid email or password';
|
|
} else {
|
|
await goto('/chat');
|
|
}
|
|
}
|
|
} catch (e) {
|
|
error = e instanceof Error ? e.message : 'An error occurred';
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function toggleMode() {
|
|
mode = mode === 'sign-in' ? 'sign-up' : 'sign-in';
|
|
error = '';
|
|
}
|
|
</script>
|
|
|
|
<div class="w-full max-w-sm">
|
|
<form onsubmit={handleSubmit} class="space-y-6">
|
|
{#if mode === 'sign-up'}
|
|
<div class="space-y-2">
|
|
<Label for="name" class="text-sm font-medium">Name</Label>
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
bind:value={name}
|
|
placeholder="Enter your name"
|
|
required
|
|
disabled={loading}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="space-y-2">
|
|
<Label for="email" class="text-sm font-medium">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
bind:value={email}
|
|
placeholder="Enter your email"
|
|
required
|
|
disabled={loading}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="password" class="text-sm font-medium">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
bind:value={password}
|
|
placeholder="Enter your password"
|
|
required
|
|
disabled={loading}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
|
|
{#if error}
|
|
<div class="text-destructive bg-destructive/10 border-destructive/20 text-sm p-3 rounded-lg border">
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
|
|
<Button type="submit" class="w-full" {loading}>
|
|
{mode === 'sign-in' ? 'Sign In' : 'Create Account'}
|
|
</Button>
|
|
|
|
<div class="text-center">
|
|
<button
|
|
type="button"
|
|
class="text-primary hover:text-primary/80 text-sm underline-offset-4 hover:underline transition-colors"
|
|
onclick={toggleMode}
|
|
disabled={loading}
|
|
>
|
|
{mode === 'sign-in' ? "Don't have an account? Sign up" : 'Already have an account? Sign in'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> |