Login mit Admin Admin login bis zum Dashboard

erfolgreich

backend/app.py

@@ -72,6 +72,35 @@ def serve_react(path):
     else:
         return send_from_directory(dist_dir, 'index.html')
 
+@app.route('/api/login', methods=['POST'])
+def login():
+    from mysql.connector import connect, Error
+    data = request.get_json()
+    username = data.get('username')
+    password = data.get('password')
+
+    try:
+        config = lade_db_config()
+        conn = connect(**config)
+        cursor = conn.cursor(dictionary=True)
+        cursor.execute("SELECT * FROM users WHERE username = %s AND password = %s", (username, password))
+        user = cursor.fetchone()
+        cursor.close()
+        conn.close()
+
+        if user:
+            return jsonify({
+                "token": "mock-token",  # später JWT etc.
+                "role": user['role']
+            })
+        else:
+            return jsonify({"message": "Login fehlgeschlagen"}), 401
+
+    except Error as e:
+        print("[Fehler bei /api/login]:", e)
+        return jsonify({"message": "Serverfehler"}), 500
+
+
 if __name__ == '__main__':
     os.makedirs("config", exist_ok=True)
     app.run(host='127.0.0.1', port=5000)

frontend/src/App.jsx

@@ -2,7 +2,8 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 //import AdminDashboard from './components/AdminDashboard';
 import LoginForm from './components/LoginForm';
 //import RegisterForm from './components/RegisterForm';
-import Home from './components/Home';
+import Md5Tool from './components/Md5Tool';
+import ToolOverview from './components/ToolOverview';
 
 function App() {
   const isLoggedIn = localStorage.getItem('token') !== null;
@@ -11,12 +12,11 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <ToolsOverview /> : <Navigate to="/login" />} />
+        <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
         <Route path="/login" element={<LoginForm />} />
         {/*<Route path="/register" element={<RegisterForm />} />*/}
         <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
         {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
-        <Route path="/" element={<Home />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/components/LoginForm.jsx

@@ -1,4 +1,3 @@
-// src/components/LoginForm.jsx
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from '../services/api';
@@ -10,7 +9,7 @@ function LoginForm() {
 
   const login = async () => {
     try {
-      const res = await axios.post('/login', { username, password });
+      const res = await axios.post('/login', { username, password });  // ruft POST /api/login auf
       localStorage.setItem('token', res.data.token);
       localStorage.setItem('role', res.data.role);
       navigate('/');
@@ -22,8 +21,17 @@ function LoginForm() {
   return (
     <div>
       <h2>Login</h2>
-      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Benutzername" />
+      <input
-      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Passwort" />
+        value={username}
+        onChange={e => setUsername(e.target.value)}
+        placeholder="Benutzername"
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={e => setPassword(e.target.value)}
+        placeholder="Passwort"
+      />
       <button onClick={login}>Anmelden</button>
     </div>
   );

frontend/src/services/api.js

@@ -1,12 +1,14 @@
 import axios from 'axios';
 
 const instance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5000/api',
+  baseURL: import.meta.env.VITE_API_URL || 'http://127.0.0.1:5000/api',
 });
 
 instance.interceptors.request.use(config => {
   const token = localStorage.getItem('token');
-  if (token) config.headers.Authorization = `Bearer ${token}`;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
   return config;
 });