how can i change my password in the frontend?

[Marcel Epp]

Hi,

i'm building a little statistic site. I get a dashboard to run.

How can i put the fields in my frontend template to change the password?

[Mike Rockett]

Perhaps this will point you in the right direction: https://processwire-recipes.com/recipes/resetting-admin-password-via-api/

The only difference is that you would get the current user, instead of admin, and pass the post input: set('pass', $input->post->password);

[kongondo]

There's also this by Pierre-Luc: https://processwire.com/talk/topic/10517-frontend-password-reset/

[Marcel Epp]

uhhh a little bit old but still a problem for me.....

i have created a form for the password. The form has a password field and a password confirm field.

<form method="post" action="./" class="form-horizontal mgt-30px">
                <div class="form-group">
                    <label for="txtNewPassword" class="col-sm-4 control-label">Neues Passwort:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="txtNewPassword" onChange="checkPasswordRegEx();" placeholder="hier bitte das neue Passwort eintragen" required>
                        <div class="registrationFormAlert" id="divCheckRegEx"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtConfirmPassword" class="col-sm-4 control-label">Passwort widerholen:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="txtConfirmPassword" onChange="checkPasswordMatch();" placeholder="hier bitte das Passwort wiederholen" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                        <button id="password_submit" type="submit" class="btn btn-primary pull-right">Absenden</button>
                    </div>
                </div>
            </form>

It's made with bootsrap syntax. For testing i created a form submit

<?php if (isset($_POST["submit"])) {

                $user = wire('users')->get('user');
                $user->setOutputFormatting(false);
                $user->set('pass', 'Vah3eg');
                $user->save('pass');

                echo "Passwort wurde geändert!";
            }
?>

What i'm doing wrong?

When i submit the form nothings happens. The startpage is loading.

[adrian]

What happens if you simply remove this line:

$user = wire('users')->get('user');

That is setting $user to a user named "user". If you are wanting to change the password for a user that is not the currently logged in one, then don't overwrite the PW $user var, instead use $u or something else.

[Marcel Epp]

Hi Adrian,

thanks for your reply! Removing this line brings nothing. But i got it to work! I reviewed my login frontend template and build it like this:

First the php part:

<?php 
// txtConfirmPassword is the name of the field in my form!
if($input->post->txtConfirmPassword) {

    $user->setOutputFormatting(false);
    $user->set('pass', $input->post->txtConfirmPassword);
    $user->save('pass');
  
// after login redirect user to another page  
    if($session->login($user)) {
        // login successful
        $session->redirect("/"); 
    }
}
?>

And then i changed my form. I gave the second field a name tag:

<form method="post" action="./" class="form-horizontal mgt-30px">
                <?php if($input->post->user) echo "<h2 class='error'>Passwort Änderung fehlgeschlagen!</h2>"; ?>
                <div class="form-group">
                    <label for="txtNewPassword" class="col-sm-4 control-label">Neues Passwort:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="txtNewPassword" name="txtNewPassword" onChange="checkPasswordRegEx();" placeholder="hier bitte das neue Passwort eintragen" required>
                        <div class="registrationFormAlert" id="divCheckRegEx"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtConfirmPassword" class="col-sm-4 control-label">Passwort widerholen:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="txtConfirmPassword" name="txtConfirmPassword" onChange="checkPasswordMatch();" placeholder="hier bitte das Passwort wiederholen" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                        <button id="password_submit" type="submit" class="btn btn-primary pull-right">Absenden</button>
                    </div>
                </div>
            </form>

[Soma]

Why would do that? This code doesn't make sense. User is already logged in and $session->login() requires a user and password. So your code always returns "NULL" thus does not a redirect.

// after login redirect user to another page  
    if($session->login($user)) {
        // login successful
        $session->redirect("/"); 
    }

I also would expect a success message after saving. Also a validation of password length and requirement would be needed. With this code I could have a passwort like "abc".

Such code examples are dangerous...

[Marcel Epp]

The redirect is not the best idea. For Validation i use some Javascript. And yes it is crappy Javascript..... still learning.

// überprüft die Passworteingabe im ersten Feld
function checkPasswordRegEx() {
    var password = $("#txtNewPassword").val();
    var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,}$/;

    if ( password === '' || password.match(regex) ){
        $("#divCheckRegEx").removeClass(" alert-danger").addClass(" alert-success").html("Das Passwort erfüllt die Anforderungen!"); 
    }
    else
        $("#divCheckRegEx").addClass(" mgt-15px alert alert-danger").html("Das Passwort erfüllt nicht die Anforderungen!"); 
}

$(document).ready(function () {
   $("#txtNewPassword").keyup(checkPasswordRegEx);
});

// versteckt die Meldung wenn leer
$("#txtNewPassword").keyup(function(){
    if($(this).val()) {
        $("#divCheckRegEx").show();
    } else {
        $("#divCheckRegEx").hide();
    }

});

// prüft ob das zweite Feld mit dem ersten übereinstimmt
function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").addClass(" alert alert-danger").html("Das Passwort stimmt nicht überein!");

    else
        $("#divCheckPasswordMatch").removeClass(" alert-danger").addClass(" alert alert-success").html("Das Passwort stimmt überein.");
}

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

// versteckt die Meldung wenn leer
$("#txtConfirmPassword").keyup(function(){
    if($(this).val()) {
        $("#divCheckPasswordMatch").show();
    } else {
        $("#divCheckPasswordMatch").hide();
    }

});

 

[adrian]

You should never rely on client side validation on its own. Server side is a must! Not to say you shouldn't use client-side, but it should only be for a faster/nicer UX, not the ultimate check.

[Marcel Epp]

Hello Adrian,

thanks for the information. Then i must fix this. I removed the redirect as mentioned by Soma. I now get a nice feedback after i change the password.

<?php 
// txtConfirmPassword is the name of the field in my form!
if($input->post->txtConfirmPassword) {

    $user->setOutputFormatting(false);
    $user->set('pass', $input->post->txtConfirmPassword);
    $user->save('pass');

    echo "<div class='alert alert-success' role='alert'>Sucsess! You have a new password.</div>";
}
?>

 

[LostKobrakai]

If you're not to experienced I'd really suggest you to take a look at the nette/forms library. It has lot's of the security traps already covered and you can configure validation rules once and they'll happend in php as well as in js (if you include it's js file). The values coming out of the library are already sanitized and will conform to your rules and you can concentrate on implementing the hard stuff.