reworked auth

static/css/auth.css

@@ -38,13 +38,21 @@
     outline: none !important;
 }
 
+.auth_form label .input_error{
+    border-color: rgb(204, 69, 69);
+}
+
+.auth_form label .input_error:hover{
+    border-color: rgb(236, 103, 103);
+}
+
 .auth_form h4{
     text-align: center;
     margin-top: 30px;
     margin-bottom: 0px;
 }
 /* Submit button with blue background horizontal center*/
-.auth_form input[type="button"]{
+.auth_form input[type="button"], .auth_form input[type="submit"]{
     color: rgb(255, 255, 255);
     font-weight: bold;
     letter-spacing: 1.5px;

static/css/style.css

@@ -20,16 +20,17 @@ h1, h2{
     text-align: center;
 }
 
-#error-text{
+.error-text{
     color: red;
     font-weight: bold;
-    letter-spacing: 1.5px;
+    font-size: 11pt;
     margin-top: 0px;
+    padding-top: 2px;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     display:block;
-    text-align: center;
+    text-align: left;
 }
 
 .text-redirect{

static/js/register.js

@@ -1,32 +1,307 @@
-/*const error_text_elem_username = document.getElementById('error_text_username');
+const error_text_elem_general = document.getElementById('error_text_general');
+const error_text_elem_username = document.getElementById('error_text_username');
 const error_text_elem_password1 = document.getElementById('error_text_password1');
 const error_text_elem_password2 = document.getElementById('error_text_password2');
 const error_text_elem_email = document.getElementById('error_text_email');
-const error_text_elem_first_name = document.getElementById('error_text_first_name');
-const error_text_elem_last_name = document.getElementById('error_text_last_name');
+const error_text_elem_firstname = document.getElementById('error_text_firstname');
+const error_text_elem_lastname = document.getElementById('error_text_lastname');
 const error_text_elem_street = document.getElementById('error_text_street');
 const error_text_elem_city = document.getElementById('error_text_city');
 const error_text_elem_postcode = document.getElementById('error_text_postcode');
 const error_text_elem_country = document.getElementById('error_text_country');
-const error_text_elem_housenumber = document.getElementById('error_text_housenumber');*/
+const error_text_elem_housenumber = document.getElementById('error_text_housenumber');
+const error_text_elem_gender = document.getElementById('error_text_gender');
+
+const username_elem = document.getElementById('username');
+const password1_elem = document.getElementById('password1');
+const password2_elem = document.getElementById('password2');
+const email_elem = document.getElementById('email');
+const firstname_elem = document.getElementById('firstname');
+const lastname_elem = document.getElementById('lastname');
+const street_elem = document.getElementById('street');
+const city_elem = document.getElementById('city');
+const postcode_elem = document.getElementById('postcode');
+const country_elem = document.getElementById('country');
+const housenumber = document.getElementById('housenumber');
+const gender = document.getElementById('gender')
 
 function handleError(error){
+    
+    if(!error){
+        error_text_elem_general.textContent = "Fehler beim Registrieren";
+        return;
+    }
+
+    error = error.split("_");
     console.log(error)
+
+    if(error[1] == "username"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Benutzername ist zu kurz <br> -> mindestens 3 Zeichen";
+                break;
+            case "long":
+                str = "Der Benutzername ist zu lang <br> -> maximal 30 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Benutzername ist ungültig <br> -> nur Buchstaben und Zahlen";
+                break;
+            case "duplicate":
+                str = "Der Benutzername ist bereits vergeben";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        username_elem.classList.add("input_error");
+        error_text_elem_username.innerHTML = str;
+    }
+
+    if(error[1] == "password"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Das Passwort ist zu kurz <br> -> mindestens 8 Zeichen";
+                break;
+            case "long":
+                str = "Das Passwort ist zu lang <br> -> maximal 200 Zeichen";
+                break;
+            case "invalid":
+                str = "Das Passwort ist ungültig <br> -> nur Buchstaben, Zahlen und ausgewählte Sonderzeichen (!@#$%^&*.,;:)";
+                break;
+            case "mismatch":
+                str = "Die Passwörter stimmen nicht überein";
+                password2_elem.classList.add("input_error");
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        password1_elem.classList.add("input_error");
+        error_text_elem_password1.innerHTML = str;
+    }
+    if(error[1] == "email"){
+        str = "";
+
+        switch(error[2]){
+            case "invalid":
+                str = "Die E-Mail-Adresse ist ungültig";
+                break;
+            case "duplicate":
+                str = "Die E-Mail-Adresse ist bereits vergeben";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        email_elem.classList.add("input_error");
+        error_text_elem_email.innerHTML = str;
+    }
+    if(error[1] == "firstname"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Vorname ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Der Vorname ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Vorname ist ungültig <br> -> nur Buchstaben und Bindestriche";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        firstname_elem.classList.add("input_error");
+        error_text_elem_firstname.innerHTML = str;
+    }
+    if(error[1] == "lastname"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Nachname ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Der Nachname ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Nachname ist ungültig <br> -> nur Buchstaben und Bindestriche";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        lastname_elem.classList.add("input_error");
+        error_text_elem_lastname.innerHTML = str;
+    }
+    if(error[1] == "street"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Die Straße ist zu kurz <br> -> mindestens 2 Zeichen";
+                break;
+            case "long":
+                str = "Die Straße ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Straße ist ungültig <br> -> nur Buchstaben, Zahlen uns Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        street_elem.classList.add("input_error");
+        error_text_elem_street.innerHTML = str;
+    }
+    if(error[1] == "city"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Die Stadt ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Stadt ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Stadt ist ungültig <br> -> nur Buchstaben, Zahlen und Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        city_elem.classList.add("input_error");
+        error_text_elem_city.innerHTML = str;
+    }
+    if(error[1] == "postcode"){
+        str = "";
+        
+        switch(error[2]){
+            case "short":
+                str = "Die Postleitzahl ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Postleitzahl ist zu lang <br> -> maximal 20 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Postleitzahl ist ungültig <br> -> nur Zahlen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        postcode_elem.classList.add("input_error");
+        error_text_elem_postcode.innerHTML = str;
+    }
+    if(error[1] == "country"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Das Land ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Das Land ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Das Land ist ungültig <br> -> nur Buchstaben, Zahlen und Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        error_text_elem_country.innerHTML = str;
+    }
+    if(error[1] == "housenumber"){
+        str = "";
+
+        switch(error[2]){
+            case "invalid":
+                str = "Die Hausnummer ist ungültig <br> -> nur Zahlen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        housenumber_elem.classList.add("input_error");
+        error_text_elem_housenumber.innerHTML = str;
+    }
+    if(error[1] == "gender"){
+        str = ""
+
+        switch(error[2]){
+            case "short":
+                str = "Die Anrede ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Anrede ist zu lang <br> -> maximal 15 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Anrede ist ungültig <br> -> nur Buchstaben, Leerzeichen und ausgewählter Zeichen (. -)";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+
+
+        error_text_elem_gender.innerHTML = str;
+    }
+
+
+}
+
+function resetErrors(){
+    error_text_elem_general.innerHTML = "";
+    error_text_elem_username.innerHTML = "";
+    error_text_elem_password1.innerHTML = "";
+    error_text_elem_password2.innerHTML = "";
+    error_text_elem_email.innerHTML = "";
+    error_text_elem_firstname.innerHTML = "";
+    error_text_elem_lastname.innerHTML = "";
+    error_text_elem_street.innerHTML = "";
+    error_text_elem_city.innerHTML = "";
+    error_text_elem_postcode.innerHTML = "";
+    error_text_elem_country.innerHTML = "";
+    error_text_elem_housenumber.innerHTML = "";
+    error_text_elem_gender.innerHTML = ""
+
+    username_elem.classList.remove("input_error");
+    password1_elem.classList.remove("input_error");
+    password2_elem.classList.remove("input_error");
+    email_elem.classList.remove("input_error");
+    firstname_elem.classList.remove("input_error");
+    lastname_elem.classList.remove("input_error");
+    street_elem.classList.remove("input_error");
+    city_elem.classList.remove("input_error");
+    postcode_elem.classList.remove("input_error");
+    country_elem.classList.remove("input_error");
+    housenumber.classList.remove("input_error");
+    gender.classList.remove("input_error");
 }
 
 function submitForm(){
+    resetErrors();
     formObj = {
-        username: document.getElementById('username').value,
-        password1: document.getElementById('password1').value,
-        password2: document.getElementById('password2').value,
-        email: document.getElementById('email').value,
-        first_name: document.getElementById('firstname').value,
-        last_name: document.getElementById('lastname').value,
-        street: document.getElementById('street').value,
-        city: document.getElementById('city').value,
-        postcode: document.getElementById('postcode').value,
-        country: document.getElementById('country').value,
-        housenumber: document.getElementById('housenumber').value,
+        username: username_elem.value,
+        password1: password1_elem.value,
+        password2: password2_elem.value,
+        email: email_elem.value,
+        firstname: firstname_elem.value,
+        lastname: lastname_elem.value,
+        street: street_elem.value,
+        city: city_elem.value,
+        postcode: postcode_elem.value,
+        country: country_elem.value,
+        housenumber: housenumber.value,
+        gender: gender.value    
     }
 
     $.ajax({
@@ -35,7 +310,7 @@ function submitForm(){
         data : formObj,
         success: function(data)
         {
-            if(data == 0){
+            if(data == "0"){
                 window.location.href = "/login";
             }else{
                 handleError(data);