Passwortsicherheitsfunktion einbauen

Stef · 28. Juni 2018

Hey,

ich erstelle mein Formular mit Javascript und gebe es aus. Dies muss so sein, da ich das Formular erst beim Klick auf einen Button angezeigt haben möchte.

Nun möchte ich eine Passwortsicherheitsfunktion einbauen welches die Sicherheit des Passwortes anzeigt. Ich habe geplant auf den Absendebutton ein Click-Event und auf das Passwort-Feld ein Keyup-Event zu regisitrieren und dann die Formulardaten an eine PHP-Datei zu senden welche die Daten verwertet und dann würde ich auch das Passwort an diese Datei senden via Ajax und dann auf das Passwort bestimmte Pattern anwenden mit preg_match().

Das Problem ist nur, dass dieser Button oder das Feld immer undefined sind. Auch wenn es angezeigt wird.

Warum ist das denn so?

Arne Drews · 28. Juni 2018

Hi,

Kurze Anmerkung vorweg: Da Du eh JavaScript verwendest, nutze lieber Ajax, um ein Formular zu laden und es in das DOM einzuhängen.

Das hat den Vorteil, dass Du eine HTML-Datei hast, in der Du das Formular bequem nach Bedarf anpassen kannst. Du musst dann nicht Dein JavaScript dafür immer anfassen.

Wenn undfined gegeben ist, wird das Event vermutlich nicht auf ein Element angewendet. Wie auch immer Du das Element selektierst, kann da ja schon was falsch sein.

Am besten Du postest die relevanten echten Zeilen, damit man evtl. dazu mehr Aussagekraft hat.

Stef · 28. Juni 2018

Hey,

vielen Dank für deinen guten Ratschlag. Ist doch besser als das Formular in Javascript mit + zu verketten.

Werde ich dann auch so umsetzen.

Das ist der Code: Manage Users. Da musst du zu <script> scrollen.

Ich teste das ganze erstmal mit deinem Vorschlag und melde mich dann wieder.

Stef

Arne Drews · 28. Juni 2018

Als EventListener erkenne ich da nur addNewUser und exportUserList.

Dass undefined ist, siehst Du bestimmt im Developer-Tool Deines Browsers, oder?

Dann analysiere das am besten dort. Es ist einfacher, wenn man das fertige Dokument sieht.

Stef · 28. Juni 2018

Sorry. Das ist der alte Code gewesen. Den aktuellen habe ich local.

Ich habe jetzt das Formular in eine HTML-Datei ausgelagert und lade es mittels Ajax beim click auf User hinzufügen in manageUsers.php.

Nun habe ich weiteres probiert wie ich, wenn ich den Button clicke die Daten an meine PHP-Datei sende um diese dort weiterzuverarbeiten.

Da der Button nur in diesem 1nen Request vorhanden ist muss ich in diesem die Function dafür ausführen. Das Problem ist, dass die Intialisierung eines Click-Events nicht greift. Es kommt nichts zurück. Wenn ich die Function einfach so aufrufe dann wird das PHP-Array ausgegeben aber alle Keys ohne Value. Ist ja auch klar. Irgendwie funktioniert es auch nicht, egal in welche Funktion ich den Parameter zum verhindern der Seitenneuladung bei click auf den Submit-Button hinzufüge, dass die Seite sich nicht neuladet.

Desweiteren habe ich auch versucht erst die Function aufzurufen wenn alle Felder eine Value haben. Aber das Problem ist, dass dieses ganze ja schon beim Click auf User hinzufügen ausgeführt wird. Wie bereits oben erwähnt lässt sich kein Click-Event auf den Button intialisieren.

Bei der Variable Button wird ja der Button selektiert. Das habe ich bereits getestet, Trotzdem wird kein Click-Event ausgeführt.

Meine Scripte:

HTML: userForm.html

<form method="post" id="newUser">
        <div class="row p-3">
            <div class="col-sm-1"></div> 
        <div class="col-sm-2">
            <div class='form-group'> 
                <input type='text' name='username' class='form-control' placeholder='Username' id="username">
            </div> 
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <select name="rang" class="custom-select" id="rang">
                        <option value="" selected>-</option>
                        <option value="user">User</option>
                        <option value="admin">Admin</option>
                        <option value="masteradmin">Masteradmin</option>
                </select> 
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group">
                <input type="password" name="passwort" class="form-control" placeholder="Password" id="password">
            </div>
        </div>
            <div class="col-sm-4">
                <div class="form-group">
                <input type="password" name="passwort_wiederholung" class="form-control" placeholder="Password wiederholen" id="repeatPassword">
            </div>
        </div>                                    
    </div>
    <div class="row">
        <button class="col-12 btn btn-success" name="submit" id="addUser">User hinzufügen</button>
    </div>
</form>

Alles anzeigen

JavaScript: manageUser.js

window.onload = function(){

    var addNewUser = document.getElementById("addNewUser");
    addNewUser.addEventListener("click", showFormular);

    function showFormular(){
                    
        var request = new XMLHttpRequest();

        request.addEventListener("load", function(){

            var ausgabeBereich = document.getElementById("userForm");
               ausgabeBereich.innerHTML = this.responseText;
             
              var button = document.getElementById("addUser");
              button.addEventListener("click", sendUserData);  
        });
                
        request.open("GET", "html/userForm.html", true);
        request.send(); 
                   
    }
    
    function sendUserData(){


        var userData = new FormData(document.querySelector("form[id='newUser']"));

        var request = new XMLHttpRequest();

        request.addEventListener("load", function(){
            console.log(this.responseText);

        });

                        
        request.open("POST", "php/userData.php", true);
        request.send(userData);
    }    
    
}

Alles anzeigen

Arne Drews · 28. Juni 2018

Ohne Request zwar, aber per innerHTML getestet: https://codepen.io/anon/pen/jKQZZN

Funktioniert einwandfrei...

Stef · 28. Juni 2018

Hey,

das funktioniert bei mir auch nicht. Es wird nichts ausgegeben oder in die Konsole geschrieben.

Das Click-Event auf den Button funktioniert aus unerklärlichen Gründen nicht. Ich verstehe das ehrlich gesagt auch nicht.

Die Function sendUserData wird garnicht erst aufgerufen. Ich bekomme keinen Konsoleneintrag der FormData.

Der Button existiert doch...

So habe ich es getestet:

JavaScript

var formular = '<form method="post" id="newUser"><div class="row p-3"><div class="col-sm-1"></div><div class="col-sm-2"><div class="form-group"><input type="text" name="username" class="form-control" placeholder="Username" id="username"></div></div><div class="col-sm-2"><div class="form-group"><select name="rang" class="custom-select" id="rang"><option value="" selected>-</option><option value="user">User</option><option value="admin">Admin</option><option value="masteradmin">Masteradmin</option></select></div></div><div class="col-sm-3"><div class="form-group"><input type="password" name="passwort" class="form-control" placeholder="Password" id="password"></div></div><div class="col-sm-4"><div class="form-group"><input type="password" name="passwort_wiederholung" class="form-control" placeholder="Password wiederholen" id="repeatPassword"></div></div></div><div class="row"><button class="col-12 btn btn-success" name="submit" id="addUser">User hinzufügen</button></div></form>';

var ausgabe = document.getElementById('ausgabe');
ausgabe.innerHTML = formular;

var button = document.getElementById('addUser');
console.log(button); // -> hier ist der Button vorhanden
button.addEventListener('click', sendUserData);

function sendUserData(){


        var userData = new FormData(document.querySelector("form[id='newUser']"));
        console.log(userData);

        var request = new XMLHttpRequest();

        request.addEventListener("load", function(){
            document.getElementById("showUserData").innerHTML = this.responseText;

        });

                        
        request.open("POST", "php/userData.php", true);
        request.send(userData);
    }

Alles anzeigen

Arne Drews · 28. Juni 2018

Also wenn ich das 1:1 in codepen übernehme und einen alert in die Funktion sendUserData setze, haut es hin.

Du solltest der Funktion den Event-Parameter mitgeben und in der Funktion als erstes ein e.preventDefault(); setzen.

Ansonsten wird das Formular natürlich abgeschickt.

Stef · 29. Juni 2018

Hey,

ich habe es nun doch komplett anders gemacht weil ich mit dem nicht zu Recht kam.

Es funktioniert jetzt alles.

JavaScript

req.addEventListener("load", function(){
                var points = this.responseText;

                var passwordField = document.getElementById("passwort");
                var password = passwordField.value;



                var circle1 = document.getElementById("circle1");
                var circle2 = document.getElementById("circle2");
                var circle3 = document.getElementById("circle3");

                var passwordSafetyOutput = document.getElementById("passwordSafety");
                
                 if(points < 8){
                    circle1.style.backgroundColor = "red";
                    circle2.style.backgroundColor = "red";
                    circle3.style.backgroundColor = "red";
                    passwordSafetyOutput.innerHTML = "<span class='text-danger ml-2'>Garnicht sicher!</span>";
                } else if(points < 18){
                    circle1.style.backgroundColor = "green";
                    circle2.style.backgroundColor = "red";
                    circle3.style.backgroundColor = "red";
                    passwordSafetyOutput.innerHTML = "<span class='text-danger ml-2'>Nicht sicher!</span>";
                } else if(points < 38){
                    circle1.style.backgroundColor = "green";
                    circle2.style.backgroundColor = "green";
                    circle3.style.backgroundColor = "red";
                    passwordSafetyOutput.innerHTML = "<span class='text-danger ml-2'>Etwas sicherer!</span>";
                } else if(points == 48){
                    circle1.style.backgroundColor = "green";
                    circle2.style.backgroundColor = "green";
                    circle3.style.backgroundColor = "green";
                    passwordSafetyOutput.innerHTML = "<span class='text-sucess ml-2'>Sicher!</span>";
                } 

                
            });

Alles anzeigen

Grüße,

Stef

Passwortsicherheitsfunktion einbauen

Jetzt mitmachen!

Teilen