Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

- added the function to login with email and password

Browse Source 
- removed an unnecessary empty file
This commit is contained in:
Fabian 2025-04-26 17:08:22 +02:00
parent 4ca52e361a
commit 353087e458
4 changed files with 148 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
public/login/login.html
View File

@ -10,31 +10,60 @@
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<main class="main-content"> <main class="main-content">
<div class="login-container"> <div class="login-container">
<h2 class="login-title">Login</h2> <h2 class="login-title">Login</h2>
<form class="login-form"> <form class="login-form">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Username" required /> <input id="email" type="text" placeholder="E-Mail" required/>
<i class="icon fas fa-user"></i> <i class="icon fas fa-user"></i>
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="password" placeholder="Passwort" required /> <input id="password" type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i> <i class="icon fas fa-lock"></i>
</div> </div>
<button type="submit" class="login-btn">Login</button> <button id="submit" type="submit" class="login-btn">Login</button>
<p class="register-text"> <p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a> Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p> </p>
</form> </form>
</div> </div>
</main> </main>
<!-- Fußzeiele --> <script>
<div id="footer"></div> 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> </body>
</html> </html>

0
public/registrieren/passwordValidation.js
View File

133
public/registrieren/registrieren.html
View File

@ -1,93 +1,94 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css"> <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script> <script src="/header_footer"></script>
<title>Registrieren</title> <title>Registrieren</title>
</head> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<!-- Registrierungsformular --> <!-- Registrierungsformular -->
<main class="content-wrapper"> <main class="content-wrapper">
<div class="wrapper"> <div class="wrapper">
<form id="registration Form" method="POST"> <form id="registration Form" method="POST">
<h1>Registrieren</h1> <h1>Registrieren</h1>
<div class="input-box"> <div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required id="vorname"> <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
<i class='bx bxs-user'></i> <i class='bx bxs-user'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="text" name="nachname" placeholder="Nachname" required id="nachname"> <input type="text" name="nachname" placeholder="Nachname" required id="nachname">
<i class='bx bxs-user'></i> <i class='bx bxs-user'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="email" name="email" placeholder="E-Mail" required id="email"> <input type="email" name="email" placeholder="E-Mail" required id="email">
<i class='bx bxs-envelope'></i> <i class='bx bxs-envelope'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="password" id="regPassword" name="password" placeholder="Passwort" required> <input type="password" id="regPassword" name="password" placeholder="Passwort" required>
<i class='bx bxs-lock-alt'></i> <i class='bx bxs-lock-alt'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required> <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
<i class='bx bxs-lock-alt'></i> required>
</div> <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"> <div class="register-link">
<br> <br>
<p>Bereits ein Konto? <a href="/login">Login</a></p> <p>Bereits ein Konto? <a href="/login">Login</a></p>
</div> </div>
</form> </form>
</div> </div>
</main> </main>
<script> <script>
document.getElementById('register').addEventListener('click', async (event) => { document.getElementById('register').addEventListener('click', async (event) => {
event.preventDefault(); event.preventDefault();
const formData = { const formData = {
name: document.getElementById('vorname').value, name: document.getElementById('vorname').value,
lower_name: document.getElementById('nachname').value, lower_name: document.getElementById('nachname').value,
email: document.getElementById('email').value, email: document.getElementById('email').value,
passwd: document.getElementById('regPassword').value, passwd: document.getElementById('regPassword').value,
} }
try { try {
const response = await fetch('/api/user/registration', { const response = await fetch('/api/user/registration', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(formData) body: JSON.stringify(formData)
}) })
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id) alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
} else { } else {
alert('Fehler bei der Registrierung.') alert('Fehler bei der Registrierung.')
} }
} catch (error) { } catch (error) {
console.error('Fehler: ', error) console.error('Fehler: ', error)
alert('Fehler beim Senden des Formulars.') alert('Fehler beim Senden des Formulars.')
} }
}) })
</script> </script>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
</body> </body>
</html> </html>

33
server.js
View File

@ -3,7 +3,7 @@ const session = require('express-session');
const router = require('express').Router(); const router = require('express').Router();
const path = require('path'); const path = require('path');
require('dotenv').config({path:'process.env'}); require('dotenv').config({path: 'process.env'});
const app = express(); const app = express();
const mysql = require('mysql'); const mysql = require('mysql');
@ -32,7 +32,7 @@ app.use(session({
})); }));
app.use(express.json()); 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, '/scripts')));
app.use(express.static(path.join(__dirname, '/static'))); 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 // SQL-Query für Nutzerregistration
const {name, lower_name, email, passwd} = req.body; const {name, lower_name, email, passwd} = req.body;
const sql = "INSERT INTO user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')" const sql = "INSERT INTO user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
// Query abschicken // Query abschicken
db.query(sql, [name, lower_name, email, passwd], (err, results) => { db.query(sql, [name, lower_name, email, passwd], (err, results) => {
if (err){ if (err) {
console.error('Fehler beim Schreiben in die Datenbank: ', err); console.error('Fehler beim Schreiben in die Datenbank: ', err);
res.status(500).send('Fehler beim Schreiben in die Datenbank'); res.status(500).send('Fehler beim Schreiben in die Datenbank');
return; 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'); const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute); app.use('/', getIndexRoute);