98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
|
|
|
|
import { getCurrentStaffUser } from '#/lib/auth'
|
|
import { authClient } from '#/lib/auth-client'
|
|
|
|
function ArrowLeftIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M19 12H5M11 6l-6 6 6 6"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export const Route = createFileRoute('/staff/login')({
|
|
component: StaffLogin,
|
|
beforeLoad: async () => {
|
|
const staffUser = await getCurrentStaffUser()
|
|
if (staffUser) {
|
|
throw redirect({ to: '/staff' })
|
|
}
|
|
},
|
|
})
|
|
|
|
function StaffLogin() {
|
|
const router = useRouter()
|
|
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
async function handleSubmit(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
setError(null)
|
|
setIsSubmitting(true)
|
|
|
|
const { error: signInError } = await authClient.signIn.email({ email, password })
|
|
|
|
if (signInError) {
|
|
setError(signInError.message ?? 'Etwas ist schiefgelaufen')
|
|
setIsSubmitting(false)
|
|
return
|
|
}
|
|
|
|
await router.navigate({ to: '/staff' })
|
|
}
|
|
|
|
return (
|
|
<div className="staff-page staff-login-page">
|
|
<form className="reservation-form staff-login-form" onSubmit={handleSubmit}>
|
|
<Link className="back-link" to="/">
|
|
<ArrowLeftIcon />
|
|
Zurück zur Startseite
|
|
</Link>
|
|
|
|
<div className="staff-login-heading">
|
|
<span className="section-kicker">Mitarbeiterbereich</span>
|
|
<h1 className="section-heading">Anmelden</h1>
|
|
</div>
|
|
|
|
<label>
|
|
E-Mail
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
autoFocus
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Passwort
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Wird geprüft …' : 'Anmelden'}
|
|
</button>
|
|
|
|
{error && <p className="message message-error">{error}</p>}
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|