Login/Sign up

Ask the community
,
1

Hey,
i have created my own custom site where user can sign up or login.

Now I would like to put a warning for the user on the login page:

  • if user is not registered on the website
  • if the user has typed wrong login password
  • if he left empty input both text boxes (the button may be disabled)

1179×622 231 KB

on the register page:

  • if he left empty input text boxes (the button may be disabled)

1122×517 241 KB

2

You can either use the Wix Editor submit button that gives you automatic fail and pass message boxes that you can add as many as you want too and edit yourself.
https://support.wix.com/en/article/adding-a-submit-button-to-your-form

Or you can do it in your code with a simple error message.

import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

$w.onReady(function () {
 $w("#forgotPassword").onClick( (event) => {
    //wixWindow.lightbox.close()
   wixUsers.promptForgotPassword()
   .then( ( ) => {
   //
   } )
    .catch( (err) => {
    let errorMsg = err;  //"The user closed the forgot password dialog"
    });
 });
});

export function loginButton_onclick(event) {

 let email = $w("#email").value;
 let password = $w("#password").value;

 wixUsers.login(email, password)
   .then( () => {
     console.log("User is logged in");
     wixWindow.lightbox.close();
     wixLocation.to(wixLocation.url);  //This reloads the same page and allows code to show hidden member parts.
   } )
    .catch( (err) => {
     console.log(err);
     $w("#errorMessage").expand();  // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
   } ); 
}
3

For enabling and disabling buttons, see this previous forum post.
https://www.wix.com/corvid/forum/community-discussion/enable-disable-a-button-when-user-didn-t-fill-out-the-form
https://www.wix.com/corvid/forum/community-discussion/validating-form-fields

4

Thank you for all the help, but is not working.

I put the code ond page, but:

  • when I enter the text into first text box, the button is enabled, which is ok, but the button should still be disabled because I did not enter the text into another text box.
    One more thing, when the text is deleted from the text box, the button should be again desabled.

Is this possible, it can be put in the code?

  • second thing is, if user is not registered, the message must appear that the user is not registered or or the password is incorrect. I copy the code from above, but the code dont work. I put the text on the page, named it - errorMessage, and set is settings on collapsed on load, but nothing happned.

What is the problem?

The code:

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

$w.onReady( function () {
$w(‘#loginNow’).disable();
})

export function loginEmail_keyPress(event) {
if ((($w(‘#loginEmail’).value)=== null ) ||
(($w(‘#loginPassword’).value) === null ))
{
$w(‘#loginNow’).disable();
} else {

$w(‘#loginNow’).enable();
}
}

export function loginPassword_keyPress (event) {

if ((($w(‘#loginEmail’).value)=== null ) ||
(($w(‘#loginPassword’).value) === null ))

{
$w(‘#loginNow’).disable();
} else {
$w(‘#loginNow’).enable();
}
}

$w.onReady( function () {
$w(“#forgotPassword”).onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
. catch ( (err) => {
let errorMsg = err; //“The user closed the forgot password dialog”
});
});
});

export function loginButton_onclick(event) {

let email = $w(“#loginEmail”).value;
let password = $w(“#loginPassword”).value;

wixUsers.login(email, password)
.then( () => {
console.log(“User is logged in”);
wixWindow.lightbox.close();
wixLocation.to(‘/home’); //This reloads the same page and allows code to show hidden member parts.
} )
. catch ( (err) => {
console.log(err);
$w(“#errorMessage”).expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to ‘collapse on load’ from the Properties Panel.
} );
}

5

For a start you have two onReady functions in your code when you can only have one.
https://www.wix.com/corvid/reference/$w.html#onReady

Plus try changing null to “”

Also, see this Wix Editor tutorial about custom validations too.
https://www.wix.com/corvid/example/custom-validations

6

I have correct the code, but I dont know how to write code to show to the user if it is not registered as a user of the page, or if he forget to enter the email or passwords in the box.

the code is like this:

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

$w.onReady( function () {
$w(‘#loginNow’).disable();
})

export function loginEmail_KeyPress(event) {
if ((($w(‘#loginEmail’).value)=== null ) ||
(($w(‘#loginPassword’).value) === null ))
{
$w(‘#loginNow’).disable();
} else {

$w(‘#loginNow’).enable();
}
}

export function loginPassword_keyPress (event) {
if ((($w(‘#loginPassword’).value)=== null ) ||
(($w(‘#loginEmail’).value) === null ))

{
$w(‘#loginNow’).disable();
} else {
$w(‘#loginNow’).enable();
}
}

export function loginNow_click(event) {

let email = $w(“#loginEmail”).value;
let password = $w(“#loginPassword”).value;

wixUsers.login(email, password)
.then( () => {
console.log(“User is logged in”);
wixWindow.lightbox.close();
wixLocation.to(‘/home’); //This reloads the same page and allows code to show hidden member parts.
} )
. catch ( (err) => {
console.log(err);
$w(“#errorMessage”).expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to ‘collapse on load’ from the Properties Panel.
} );
}

export function forgotPassword_click(event) {
wixUsers.promptForgotPassword()
.then( ( ) => {
console.log(“Password reset submitted”);
} )
. catch ( (err) => {
let errorMsg = err; //“The user closed the forgot password dialog”
});

          }