✨ first version

src/routes/staff.login.tsx

@@ -1,9 +1,52 @@
 import { useState } from 'react'
-import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
+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 () => {
@@ -19,6 +62,7 @@ function StaffLogin() {
 
   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)
 
@@ -41,6 +85,11 @@ function StaffLogin() {
   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>
@@ -59,12 +108,23 @@ function StaffLogin() {
 
         <label>
           Passwort
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
+          <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}>