2025-04-29 07:58:19 +00:00
4 changed files with 148 additions and 93 deletions
--- a/public/login/login.html
+++ b/public/login/login.html
@ -10,31 +10,60 @@
    <title>Login</title>
 </head>
 <body>
-    <!-- Header -->
-    <div id="header-placeholder"></div>
+<!-- Header -->
+<div id="header-placeholder"></div>

-    <main class="main-content">
-        <div class="login-container">
-            <h2 class="login-title">Login</h2>
-            <form class="login-form">
-                <div class="input-group">
-                    <input type="text" placeholder="Username" required />
-                    <i class="icon fas fa-user"></i>
-                </div>
-                <div class="input-group">
-                    <input type="password" placeholder="Passwort" required />
-                    <i class="icon fas fa-lock"></i>
-                </div>
-                <button type="submit" class="login-btn">Login</button>
-                <p class="register-text">
-                    Noch keinen Account? <a href="/registrieren">Registrieren</a>
-                </p>
-            </form>
-        </div>
-    </main>
+<main class="main-content">
+    <div class="login-container">
+        <h2 class="login-title">Login</h2>
+        <form class="login-form">
+            <div class="input-group">
+                <input id="email" type="text" placeholder="E-Mail" required/>
+                <i class="icon fas fa-user"></i>
+            </div>
+            <div class="input-group">
+                <input id="password" type="password" placeholder="Passwort" required/>
+                <i class="icon fas fa-lock"></i>
+            </div>
+            <button id="submit" type="submit" class="login-btn">Login</button>
+            <p class="register-text">
+                Noch keinen Account? <a href="/registrieren">Registrieren</a>
+            </p>
+        </form>
+    </div>
+</main>

-    <!-- Fußzeiele -->
-    <div id="footer"></div>
+<script>
+    document.getElementById('submit').addEventListener('click', async (event) => {
+        event.preventDefault()
+
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+
+        try {
+            const response = await fetch('/api/user/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({email, password})
+            })
+            if (response.ok) {
+                const data = await response.json();
+                alert('Login erfolgreich!');
+                window.location.href = '/';  // Redirect to home page after login
+            } else {
+                const errorData = await response.json()
+                alert('Login fehlgeschlagen: ' + (errorData.message || 'Unbekannter Fehler'))
+            }
+        } catch (error) {
+            console.error('Fehler beim Login: ', error)
+            alert('Fehler beim Senden des Logins.')
+        }
+    })
+</script>
+<!-- Fußzeile -->
+<div id="footer"></div>

 </body>
 </html>
--- a/public/registrieren/passwordValidation.js
+++ b/public/registrieren/passwordValidation.js
--- a/public/registrieren/registrieren.html
+++ b/public/registrieren/registrieren.html
@ -1,93 +1,94 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
-  <link rel="stylesheet" href="./Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
-  <title>Registrieren</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
+    <link rel="stylesheet" href="./Styles/styles-main.css">
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <script src="/header_footer"></script>
+    <title>Registrieren</title>
 </head>
 <body>
-  <div class="page-container">
+<div class="page-container">

    <!-- Header -->
    <div id="header-placeholder"></div>

    <!-- Registrierungsformular -->
    <main class="content-wrapper">
-      <div class="wrapper">
-        <form id="registration Form" method="POST">
-          <h1>Registrieren</h1>
+        <div class="wrapper">
+            <form id="registration Form" method="POST">
+                <h1>Registrieren</h1>

-          <div class="input-box">
-            <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
-            <i class='bx bxs-user'></i>
-          </div>
-          <div class="input-box">
-            <input type="text" name="nachname" placeholder="Nachname" required id="nachname">
-            <i class='bx bxs-user'></i>
-          </div>
-          <div class="input-box">
-            <input type="email" name="email" placeholder="E-Mail" required id="email">
-            <i class='bx bxs-envelope'></i>
-          </div>
-          <div class="input-box">
-            <input type="password" id="regPassword" name="password" placeholder="Passwort" required>
-            <i class='bx bxs-lock-alt'></i>
-          </div>
+                <div class="input-box">
+                    <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
+                    <i class='bx bxs-user'></i>
+                </div>
+                <div class="input-box">
+                    <input type="text" name="nachname" placeholder="Nachname" required id="nachname">
+                    <i class='bx bxs-user'></i>
+                </div>
+                <div class="input-box">
+                    <input type="email" name="email" placeholder="E-Mail" required id="email">
+                    <i class='bx bxs-envelope'></i>
+                </div>
+                <div class="input-box">
+                    <input type="password" id="regPassword" name="password" placeholder="Passwort" required>
+                    <i class='bx bxs-lock-alt'></i>
+                </div>

-          <div class="input-box">
-            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required>
-            <i class='bx bxs-lock-alt'></i>
-          </div>
+                <div class="input-box">
+                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
+                           required>
+                    <i class='bx bxs-lock-alt'></i>
+                </div>

-          <button type="submit" class="btn" id="register">Registrieren</button>
+                <button type="submit" class="btn" id="register">Registrieren</button>

-          <div class="register-link">
-            <br>
-            <p>Bereits ein Konto? <a href="/login">Login</a></p>
-          </div>
-        </form>
-      </div>
+                <div class="register-link">
+                    <br>
+                    <p>Bereits ein Konto? <a href="/login">Login</a></p>
+                </div>
+            </form>
+        </div>
    </main>

    <script>
-      document.getElementById('register').addEventListener('click', async (event) => {
-        event.preventDefault();
+        document.getElementById('register').addEventListener('click', async (event) => {
+            event.preventDefault();

-        const formData = {
-          name: document.getElementById('vorname').value,
-          lower_name: document.getElementById('nachname').value,
-          email: document.getElementById('email').value,
-          passwd: document.getElementById('regPassword').value,
-        }
+            const formData = {
+                name: document.getElementById('vorname').value,
+                lower_name: document.getElementById('nachname').value,
+                email: document.getElementById('email').value,
+                passwd: document.getElementById('regPassword').value,
+            }

-        try {
-          const response = await fetch('/api/user/registration', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(formData)
-          })
-          if (response.ok) {
-            const data = await response.json();
-            alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
-          } else {
-            alert('Fehler bei der Registrierung.')
-          }
-        } catch (error) {
-          console.error('Fehler: ', error)
-          alert('Fehler beim Senden des Formulars.')
-        }
-      })
+            try {
+                const response = await fetch('/api/user/registration', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                })
+                if (response.ok) {
+                    const data = await response.json();
+                    alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
+                } else {
+                    alert('Fehler bei der Registrierung.')
+                }
+            } catch (error) {
+                console.error('Fehler: ', error)
+                alert('Fehler beim Senden des Formulars.')
+            }
+        })

    </script>
    <!-- Fußzeiele -->
    <div id="footer"></div>

-  </div>
+</div>
 </body>
 </html>
--- a/server.js
+++ b/server.js
@ -3,7 +3,7 @@ const session = require('express-session');
 const router = require('express').Router();
 const path = require('path');

-require('dotenv').config({path:'process.env'});
+require('dotenv').config({path: 'process.env'});

 const app = express();
 const mysql = require('mysql');
@ -32,7 +32,7 @@ app.use(session({
 }));

 app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
+app.use(express.urlencoded({extended: true}));
 app.use(express.static(path.join(__dirname, '/scripts')));
 app.use(express.static(path.join(__dirname, '/static')));

@ -127,14 +127,14 @@ app.get('/api/products/sportwagen', async (req, res) => {
    });
 });

-app.post('/api/user/registration', (req,res)=> {
+app.post('/api/user/registration', (req, res) => {
    // SQL-Query für Nutzerregistration
    const {name, lower_name, email, passwd} = req.body;
    const sql = "INSERT INTO user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"

    // Query abschicken
    db.query(sql, [name, lower_name, email, passwd], (err, results) => {
-        if (err){
+        if (err) {
            console.error('Fehler beim Schreiben in die Datenbank: ', err);
            res.status(500).send('Fehler beim Schreiben in die Datenbank');
            return;
@ -143,6 +143,31 @@ app.post('/api/user/registration', (req,res)=> {
    })
 })

+app.post('/api/user/login', (req, res) => {
+    const {email, password} = req.body
+    const sql = 'SELECT * FROM user WHERE email = ?'
+
+    db.query(sql, [email], (err, results) => {
+        if (err) {
+            console.error('Fehler beim Abrufen des Nutzers: ', err)
+            return res.status(500).json({message: 'Serverfehler'})
+        }
+        if (results.length === 0) {
+            return res.status(401).json({message: 'E-Mail nicht gefunden'})
+        }
+        const user = results[0]
+
+        if (user.passwd !== password) {
+            return res.status(401).json({message: 'Falsches Passwort'})
+        }
+
+        req.session.userId = user.id;
+        req.session.email = user.email;
+
+        res.json({message: 'Login erfolgreich', id: user.id})
+    })
+})
+
 const getIndexRoute = require('./scripts/routes/other/route-index');
 app.use('/', getIndexRoute);