diff --git a/simpleEmail_Projekt/gui/css/registerStyle.css b/simpleEmail_Projekt/gui/css/registerStyle.css new file mode 100644 index 0000000..a338f89 --- /dev/null +++ b/simpleEmail_Projekt/gui/css/registerStyle.css @@ -0,0 +1,100 @@ +body { + background: #f7f7f7; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.form-container { + width: 400px; + margin: 50px auto; + padding: 30px; + border: 1px solid #ddd; + border-radius: 10px; + background: white; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.form-container h1 { + text-align: center; + margin-bottom: 20px; + color: #333; +} + +.form-container label { + display: block; + margin-top: 10px; + margin-bottom: 5px; + font-weight: 600; + color: #555; +} + +.form-container input[type="text"], +.form-container input[type="password"], +.form-container input[type="tel"], +.form-container input[type="date"] { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; + font-size: 14px; +} + +.form-container input[type="submit"] { + width: 100%; + padding: 12px; + background-color: #007BFF; + border: none; + border-radius: 5px; + color: white; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 10px; +} + +.form-container input[type="submit"]:hover { + background-color: #0056b3; +} + +.form-container .gender-options { + display: flex; + gap: 20px; + margin-bottom: 15px; + margin-top: 5px; +} + +.gender-options label { + display: flex; + align-items: center; + gap: 5px; + font-weight: normal; + color: #555; +} + + +.username-group { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; +} + +.username-group input { + flex: 1; +} + +.username-group #domain { + white-space: nowrap; + color: #555; + font-size: 20px; + margin-bottom: 20px; +} + +.form-container .required{ + color:red; + margin: 0px; +} +.form-container span{ + margin: 0px; +} \ No newline at end of file diff --git a/simpleEmail_Projekt/gui/html/Register.html b/simpleEmail_Projekt/gui/html/Register.html index 0a4ac04..ca92b21 100644 --- a/simpleEmail_Projekt/gui/html/Register.html +++ b/simpleEmail_Projekt/gui/html/Register.html @@ -1,15 +1,70 @@ - - - - Register - - - + + - - + Register + + + + +
+
+

Register

+ + + + + +
+ + + +
+ + + + + +
+ + @smail.de +
+ + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/simpleEmail_Projekt/gui/js/handleRegister.js b/simpleEmail_Projekt/gui/js/handleRegister.js index fdca455..d9b2a5f 100644 --- a/simpleEmail_Projekt/gui/js/handleRegister.js +++ b/simpleEmail_Projekt/gui/js/handleRegister.js @@ -1 +1,45 @@ -console.log("Hallo"); \ No newline at end of file +var passwordInput = document.querySelector("#password"); +var retypePasswordInput = document.querySelector("#retype_password"); +var passwordMessage = document.querySelector("#passwordMessage"); +var retypePasswordMessage = document.querySelector("#retypePasswordMessage"); + +var username = document.querySelector("#username"); +var userNameMessage = document.querySelector("#userNameMessage"); + +username.addEventListener("input",checkUsername); + +passwordInput.addEventListener("input", checkPassword); +retypePasswordInput.addEventListener("input", checkRetypePassword); // <-- auch beim Re-Type Feld checken! + +function checkPassword() { + if (passwordInput.value.length < 6 || passwordInput.value.length == 0) { + passwordMessage.innerHTML = "Passwort ist zu kurz"; + passwordMessage.style.color = "red"; + passwordMessage.style.margin = 0; + } else { + passwordMessage.innerHTML = "Passwort sieht gut aus!"; + passwordMessage.style.color = "green"; + } + checkRetypePassword(); +} + +function checkRetypePassword() { + if (retypePasswordInput.value !== passwordInput.value) { + retypePasswordMessage.innerHTML = "Passwörter stimmen nicht überein!"; + retypePasswordMessage.style.color = "red"; + } else { + retypePasswordMessage.innerHTML = "Passwörter sind identisch"; + retypePasswordMessage.style.color = "green"; + } +} + + +function checkUsername(){ + + if (username.value.includes("@")){ + userNameMessage.innerHTML = "Benutzername darf nur Buchstaben und Zahlen enthalten!"; + userNameMessage.style.color="red"; + userNameMessage.style.margin=0; + } + +} \ No newline at end of file