Display an Error Message on Custom Login Form

Hi there,


I am looking to display an error message for a custom login form. The error message will expand when an incorrect email address or password is used.

I am not sure if I have the right code to do this:

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;

$w.onReady( function (){
$w(‘#loginNow’).onClick( function (){
let email = $w(‘#loginEmail’).value;
let password = $w(‘#loginPassword’).value;

    wixUsers.login(email,password) 
    .then(()=>{ 

if ($w(‘#loginEmail’).value === wixUsers.login(email)){
console.log(“Registered Member Email”);
$w(“#wrongEmail”).collapse();
}

else {
console.log(“No Registered Member Email”);
$w(“#wrongEmail”).expand();
}

if ($w(‘#loginEmail’).value === wixUsers.login(password)){
console.log(“Registered Member Password”);
$w(“#wrongPassword”).collapse();
}

else {
console.log(“No Registered Member Password”);
$w(“#wrongPassword”).expand();
}
if ($w(‘#loginEmail’).value === wixUsers.login(email)){
console.log(“Registered Member Email”);
$w(“#wrongEmail”).collapse();
}

else {
console.log(“No Registered Member Email”);
$w(“#wrongEmail”).expand();
}

if ($w(‘#loginEmail’).value === wixUsers.login(password)){
console.log(“Registered Member Password”);
$w(“#wrongPassword”).collapse();
}

else {
console.log(“No Registered Member Password”);
$w(“#wrongPassword”).expand();
}

                wixLocation.to(`/account/my-account`);            
    })  

})   

})

I feel like I may be close but just need some help to make it work.

Thanks,

FD

If you read the API documentation:

https://www.wix.com/code/reference/wix-users.html#login

you will see that the results of this function are:
Promise
Fulfilled - When the user has been logged in. Rejected - Error message.

A bad password will lead to an error message.

The function returns a promise which has two out comes.

.then() which delivers a successful result to the function call and
.catch() which delivers any errors. So what you need to do is treat anything that you process in the .then() as a successful result. Anything in the .catch() delivers an error which tells you the email or password were incorrect.

Try looking at this MDN post on Promises.

Hi Josh,

Any chance you solved it?
I have the exact sane issue…

See your own post for more.
https://www.wix.com/corvid/forum/community-discussion/custom-login-form
This post will now be closed.