vextv
c4d922b903
# Conflicts: # public/registrieren/registrieren.html - Cleaned up code - Added a specific error if e-mail that are already registered are tried to register again - fields in the registration form cant be empty - email input in registration form is now html type email - fields in login form cant be empty - email input on login form is now html type email
124 lines
4.6 KiB
HTML
124 lines
4.6 KiB
HTML
<!--
|
|
Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
|
|
Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
|
|
Header und Footer werden dynamisch geladen.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- Registrieren-CSS-Datei -->
|
|
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
|
|
<!-- Haupt-CSS-Datei -->
|
|
<link rel="stylesheet" href="./Styles/styles-main.css">
|
|
<!-- Icons -->
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
|
<!-- Script zum Laden von Header/Footer -->
|
|
<script src="/header_footer"></script>
|
|
<title>Registrieren</title>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
|
|
<!-- Header -->
|
|
<div id="header"></div>
|
|
|
|
<!-- Registrierungsformular -->
|
|
<main class="content-wrapper">
|
|
<!-- Formular für Registrierung -->
|
|
<div class="register-wrapper">
|
|
<form action="register.php" method="POST">
|
|
<h2 class="title">Registrieren</h2>
|
|
|
|
<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>
|
|
|
|
<!-- Eingabe: Passwort bestätigen -->
|
|
<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>
|
|
|
|
<!-- Link zum Login für bestehende Nutzer -->
|
|
<div class="register-link">
|
|
<br>
|
|
<p>Bereits ein Konto? <a href="/login">Login</a></p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
|
|
const passwordEl = document.getElementById('regPassword')
|
|
const password = passwordEl.value
|
|
const confirmPasswordEl = document.getElementById('confirmPassword')
|
|
const confirmPassword = confirmPasswordEl.value
|
|
|
|
if (password !== confirmPassword) {
|
|
passwordEl.value = ''
|
|
confirmPasswordEl.value = ''
|
|
alert('Die Passwörter stimmen nicht überein.')
|
|
return
|
|
}
|
|
|
|
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();
|
|
sessionStorage.setItem("user_id", data.id)
|
|
sessionStorage.setItem("vorname", data.name)
|
|
sessionStorage.setItem("nachname", data.lower_name)
|
|
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
|
|
window.location.href = '/'
|
|
} 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>
|
|
</body>
|
|
</html>
|