beauty-bookings/src/client/components/login-form.tsx

import { useState, useEffect } from "react";
import { useAuth } from "@/client/components/auth-provider";

export function LoginForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isInitialized, setIsInitialized] = useState(false);
  
  const { login } = useAuth();

  // Load saved username from localStorage on mount
  useEffect(() => {
    const savedUsername = localStorage.getItem("loginForm_username");
    if (savedUsername) setUsername(savedUsername);
    setIsInitialized(true);
  }, []);

  // Save username to localStorage when it changes (after initial load)
  useEffect(() => {
    if (!isInitialized) return;
    if (username) {
      localStorage.setItem("loginForm_username", username);
    } else {
      localStorage.removeItem("loginForm_username");
    }
  }, [username, isInitialized]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setIsLoading(true);

    try {
      await login(username, password);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Login failed");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-50 to-purple-50">
      <div className="max-w-md w-full space-y-8 p-8">
        <div className="text-center">
          <div className="text-6xl mb-4">💅</div>
          <h2 className="text-3xl font-bold text-gray-900">Stargirlnails Kiel</h2>
          <p className="mt-2 text-sm text-gray-600">Inhaber Login</p>
        </div>
        
        <form className="mt-8 space-y-6 bg-white p-6 rounded-lg shadow-lg" onSubmit={handleSubmit}>
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
              {error}
            </div>
          )}
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Benutzername
            </label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
              required
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Passwort
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
              required
            />
          </div>
          
          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-pink-600 text-white py-3 px-4 rounded-md hover:bg-pink-700 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
          >
            {isLoading ? "Anmelden..." : "Anmelden"}
          </button>
        </form>
        
        {/* Back to Home Link */}
        <div className="text-center mt-6">
          <a 
            href="/" 
            className="inline-flex items-center text-pink-600 hover:text-pink-700 text-sm font-medium transition-colors"
          >
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Zurück zur Startseite
          </a>
        </div>
        
      </div>
    </div>
  );
}