Custom Password Reset

Ask the community
, , ,
1

Hi wix friends

Only some lines to share with you, that I found a way to create a custom password reset, avoiding the current un-branded option.

So… what I did:

  1. When a new member fulfill the registration form, I saved the password in a dedicated collection

  2. In the users page, there is a button where users can start the process to change their password

  3. Click send email button, trigger an email

  4. After open the email, and clicking the button… they go to a dedicated page to restore their password, for that I create a page where users can set a new password… where the new password should also be stored in the same collection described in the previous point

  5. To use the new password on login, the rule is: if newPassword is undefined (querying the collection described), use the password input… if is not undefined and the password input is equal to the newPassword, then the password is the stored password, else password is the password input

With that, users can login using the newPassword.

1553×697 32.9 KB

1920×1080 167 KB

Code on Restore Password Page:

import wixData from 'wix-data';

$w.onReady(async function () {

    var userid
 
    $w('#input1').onInput(async () => {

        let query = await wixData.query("users").eq("email", $w('#input1').value).find()
        if (query.items.length > 0) {
            userid = query.items[0]._id
       
            $w('#mensaje1').text = "Hi " + query.items[0].nombre + " we are ready to change your password"
            $w('#passwordInput').enable()
        } else {

            $w('#mensaje1').text = "We cannot find your email in our database, try again"
            $w('#mensaje1').show()

        }
    })

    $w('#passwordInput').onInput(() => {

        var value = $w('#passwordInput').value
        var count = value.length

        if (count < 8) {
            $w('#errorPss').text = "Password should have at least 8 characters"
            $w('#errorPss').show()
            $w('#confPass').disable()
        } else {
            $w('#errorPss').hide()
            $w('#confirmPass').enable()

        }
    })

    $w('#confirmPass').onInput(() => {

        if ($w('#confirmPass').value === $w('#passwordInput').value) { $w('#saveButton').enable(), $w('#errorPss').hide() } else { $w('#errorMessage').show(), $w('#saveButton').disable() }
    })

    $w('#guardar').onClick(() => {

        wixData.get("usuarios", userid)
            .then((item) => {
                item.newPass = $w('#passwordInput').value
                wixData.update("usuarios", item).then(() => {

                    $w('#errorPss').text = "New password storaged succesfully"
                    $w('#errorPss').show()

                    $w('#saveButton').disable()

                })

            })

    })

Code on Custom Login Lightbox

import { authentication } from 'wix-members';
import wixData from 'wix-data';

$w.onReady(function () {

    $w('#login').onClick(async () => {

        var password

        let query = await wixData.query("users").eq("email", $w('#userMail').value).find()
        if (query.items.length > 0) {
            if (query.items[0].newPass != null && $w('#userPassword').value === query.items[0].newPass) { password =            query.items[0].wixPss } else password = $w('#userPassword').value
        } else password = $w('#userPassword').value

        const email = $w('#userMail').value;

        try {
            await authentication.login(email, password);
            console.log('Member is logged in');
        } catch (error) {
            console.error(error);
        }
    });

});

Only to clarify the code:

We are using two fields from the users collection:

  1. wixPass => the one that I stored when users made their registration

  2. newPass => the one that they create on the custome password reset page

and two inputs from the login page:

  1. userMail… the one that they wrote, and should exist on the users collection

  2. userPassword… that helps to validate if the input is the same on the collection for newPass or if newPass is undefined, then userPassword helps on the regular login process

Hope that helps you