API, Backend & Frontend

2026-04-01 01:18:21 +02:00
parent 331c04fbef
commit 0fe8ec9bc0
44 changed files with 10060 additions and 0 deletions
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import './LoginForm.css';
+
+function LoginForm({ onLogin }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // Important for sessions
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Login failed');
+      }
+
+      // Success - notify parent component
+      onLogin(data.user);
+    } catch (error) {
+      console.error('Login error:', error);
+      setError(error.message || 'Invalid username or password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-box">
+        <div className="login-header">
+          <h2>🔐 Admin Login</h2>
+          <p>Please enter your credentials to access the admin panel</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="login-form">
+          {error && (
+            <div className="error-message">
+              {error}
+            </div>
+          )}
+
+          <div className="form-group">
+            <label htmlFor="username">Username</label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter username"
+              required
+              autoFocus
+              disabled={loading}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter password"
+              required
+              disabled={loading}
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="login-button"
+            disabled={loading || !username || !password}
+          >
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
+        </form>
+
+        <div className="login-footer">
+          <p className="help-text">
+            Default credentials: <code>admin</code> / <code>admin123</code>
+          </p>
+          <p className="warning-text">
+            ⚠️ Change the default password after first login!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginForm;
+