139 lines
3.9 KiB
TypeScript
139 lines
3.9 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>
|
|
)
|
|
}
|
|
|
|
function EyeIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function EyeOffIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5" />
|
|
<path d="M4 4l16 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="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 [showPassword, setShowPassword] = useState(false)
|
|
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
|
|
<div className="password-field">
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="password-toggle"
|
|
aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
|
|
aria-pressed={showPassword}
|
|
onClick={() => setShowPassword((show) => !show)}
|
|
>
|
|
{showPassword ? <EyeOffIcon /> : <EyeIcon />}
|
|
</button>
|
|
</div>
|
|
</label>
|
|
|
|
<button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Wird geprüft …' : 'Anmelden'}
|
|
</button>
|
|
|
|
{error && <p className="message message-error">{error}</p>}
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|