Update .gitignore to exclude admin JSON files; add bcrypt dependency and types for password handling; implement password change functionality in AdminPage component.

2025-06-17 13:12:07 +02:00
parent df97fe59bb
commit 96c9c28f83
5 changed files with 267 additions and 13 deletions
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';

@@ -62,7 +62,14 @@ export default function AdminPage() {
    return [];
  });
  const [pinFeedback, setPinFeedback] = useState<string | null>(null);
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const [changePwOld, setChangePwOld] = useState('');
+  const [changePwNew, setChangePwNew] = useState('');
+  const [changePwConfirm, setChangePwConfirm] = useState('');
+  const [changePwFeedback, setChangePwFeedback] = useState<string | null>(null);
  const router = useRouter();
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // Check if already authenticated
@@ -89,14 +96,29 @@ export default function AdminPage() {
    }
  };

-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    if (username === 'admin' && password === 'admin') {
+    const form = e.target as HTMLFormElement;
+    const formData = new FormData(form);
+    const user = (formData.get('username') as string) || usernameRef.current?.value || '';
+    const pass = (formData.get('password') as string) || passwordRef.current?.value || '';
+    if (user !== 'admin') {
+      alert('Ungültiger Benutzername');
+      return;
+    }
+    // Check password via API
+    const res = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: pass, mode: 'login' }),
+    });
+    const data = await res.json();
+    if (res.ok && data.success) {
      setIsAuthenticated(true);
      localStorage.setItem('adminAuth', 'true');
      loadContent();
    } else {
-      alert('Invalid credentials');
+      alert(data.error || 'Ungültiges Passwort');
    }
  };

@@ -336,6 +358,47 @@ export default function AdminPage() {
    });
  };

+  // Password change handler
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setChangePwFeedback(null);
+    if (!changePwOld || !changePwNew || !changePwConfirm) {
+      setChangePwFeedback('Bitte alle Felder ausfüllen.');
+      return;
+    }
+    if (changePwNew !== changePwConfirm) {
+      setChangePwFeedback('Die neuen Passwörter stimmen nicht überein.');
+      return;
+    }
+    // Check old password
+    const res = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: changePwOld, mode: 'login' }),
+    });
+    const data = await res.json();
+    if (!res.ok || !data.success) {
+      setChangePwFeedback('Altes Passwort ist falsch.');
+      return;
+    }
+    // Set new password
+    const res2 = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: changePwNew }),
+    });
+    const data2 = await res2.json();
+    if (res2.ok && data2.success) {
+      setChangePwFeedback('Passwort erfolgreich geändert!');
+      setChangePwOld('');
+      setChangePwNew('');
+      setChangePwConfirm('');
+      setTimeout(() => setShowChangePassword(false), 1500);
+    } else {
+      setChangePwFeedback(data2.error || 'Fehler beim Ändern des Passworts.');
+    }
+  };
+
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      {pinFeedback && (
@@ -346,31 +409,37 @@ export default function AdminPage() {
      {!isAuthenticated ? (
        <div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
          <h1 className="text-2xl font-bold mb-6">Admin Login</h1>
-          <form onSubmit={handleLogin} className="space-y-4">
+          <form onSubmit={handleLogin} className="space-y-4" autoComplete="on">
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
-                Username
+                Benutzername
              </label>
              <input
                type="text"
                id="username"
+                name="username"
+                ref={usernameRef}
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                required
+                autoComplete="username"
              />
            </div>
            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                Password
+                Passwort
              </label>
              <input
                type="password"
                id="password"
+                name="password"
+                ref={passwordRef}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                required
+                autoComplete="current-password"
              />
            </div>
            <button
@@ -385,14 +454,82 @@ export default function AdminPage() {
        <div className="max-w-6xl mx-auto">
          <div className="flex justify-between items-center mb-8">
            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
-            <button
-              onClick={handleLogout}
-              className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-            >
-              Logout
-            </button>
+            <div className="flex gap-2">
+              <button
+                onClick={handleLogout}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Logout
+              </button>
+              <button
+                onClick={() => setShowChangePassword(true)}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Passwort ändern
+              </button>
+            </div>
          </div>

+          {/* Password Change Modal */}
+          {showChangePassword && (
+            <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+              <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full relative">
+                <button
+                  className="absolute top-2 right-2 text-gray-400 hover:text-gray-700 text-2xl"
+                  onClick={() => setShowChangePassword(false)}
+                  title="Schließen"
+                >
+                  ×
+                </button>
+                <h2 className="text-xl font-bold mb-4">Passwort ändern</h2>
+                <form onSubmit={handleChangePassword} className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Altes Passwort</label>
+                    <input
+                      type="password"
+                      value={changePwOld}
+                      onChange={e => setChangePwOld(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="current-password"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Neues Passwort</label>
+                    <input
+                      type="password"
+                      value={changePwNew}
+                      onChange={e => setChangePwNew(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Neues Passwort bestätigen</label>
+                    <input
+                      type="password"
+                      value={changePwConfirm}
+                      onChange={e => setChangePwConfirm(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  {changePwFeedback && (
+                    <div className="text-center text-sm text-red-600">{changePwFeedback}</div>
+                  )}
+                  <button
+                    type="submit"
+                    className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700"
+                  >
+                    Passwort speichern
+                  </button>
+                </form>
+              </div>
+            </div>
+          )}
+
          {/* Breadcrumbs with back button */}
          <div className="flex items-center gap-4 mb-6">
            {currentPath.length > 0 && (