feat(ui): Vollbild/Präsentation im Header + Passwortfeld mit Auge & grösseren Punkten (v1.8.7)

- Topbar: Schnellzugriff-Buttons Vollbild und Präsentationsmodus direkt neben Speichern
  (Desktop; mobil weiterhin im ⋮-Menü)
- Login: Passwortfeld mit Anzeigen/Verbergen-Umschalter (Auge) und grösseren, gespreizten
  Punkten (text-xl tracking) + sanfter Übergang

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pepe Ziberi
2026-07-23 21:00:43 +02:00
parent f9ad00a7e7
commit 4a59b5ca0b
3 changed files with 46 additions and 11 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "lageplan",
"version": "1.8.6",
"version": "1.8.7",
"description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
"private": true,
"scripts": {

View File

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useToast } from '@/components/ui/use-toast'
import { ArrowLeft, Loader2 } from 'lucide-react'
import { ArrowLeft, Loader2, Eye, EyeOff } from 'lucide-react'
import { LogoRound } from '@/components/ui/logo'
export default function LoginPage() {
@@ -23,6 +23,7 @@ function LoginForm() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [rememberMe, setRememberMe] = useState(true)
const [showPassword, setShowPassword] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [resendLoading, setResendLoading] = useState(false)
const [resendSuccess, setResendSuccess] = useState(false)
@@ -234,15 +235,27 @@ function LoginForm() {
Passwort vergessen?
</Link>
</div>
<div className="relative">
<Input
id="password"
type="password"
type={showPassword ? 'text' : 'password'}
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
disabled={isLoading}
className={`pr-11 transition-all duration-200 ${showPassword ? '' : 'text-xl tracking-[0.25em]'}`}
/>
<button
type="button"
onClick={() => setShowPassword(v => !v)}
tabIndex={-1}
aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-md text-gray-400 hover:text-gray-200 transition-colors"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</div>
</div>
<label className="flex items-center gap-2 cursor-pointer select-none">

View File

@@ -248,6 +248,28 @@ export function Topbar({
{isSaving ? <Loader2 className="w-5 h-5 animate-spin" /> : <Save className="w-5 h-5" />}
</Button>
{/* Schnellzugriff: Vollbild + Präsentationsmodus (Desktop; mobil im ⋮-Menü) */}
<Button
variant="outline"
size="icon"
className="hidden md:flex h-10 w-10 shrink-0"
onClick={onToggleFullscreen}
title={isFullscreen ? 'Vollbild verlassen' : 'Vollbild'}
>
{isFullscreen ? <Minimize className="w-5 h-5" /> : <Maximize className="w-5 h-5" />}
</Button>
{onTogglePresentationLock && (
<Button
variant="outline"
size="icon"
className={`hidden md:flex h-10 w-10 shrink-0 ${presentationLocked ? 'border-amber-500 text-amber-600 dark:text-amber-400' : ''}`}
onClick={onTogglePresentationLock}
title={presentationLocked ? 'Präsentation: gesperrt (zum Entsperren tippen)' : 'Präsentationsmodus'}
>
{presentationLocked ? <Lock className="w-5 h-5" /> : <Unlock className="w-5 h-5" />}
</Button>
)}
{/* Freigeben — nur sichtbar, solange ich den Bearbeitungs-Lock halte.
Speichert und gibt die Karte für andere frei. Grün = ich bin am Zeichnen. */}
{isEditingByMe && onStopEditing && (