Custom Login Lightning Box

Ask the community
,
1

I have created a custom login lightning box, but I am unable to code the on click function to log the user in. I am wanting the function to reference a specific data set and NOT the “PrivateMember” data set that is created once you create a member page. I have a dynamic page and data set attached for my member sign up, I now want to use the data set collection for the log in. Thank you in advance.

2

If you have added the Wix Members app to your site then you will get that PrivateMembersData collection.
Which you can query and read data from as shown in the collection page info here.
https://support.wix.com/en/article/corvid-wix-members-privatemembersdata-collection-fields

If you are wanting to create a seperate members dataset then you are best doing something like this Wix Tutorial to create your own members profile page.
https://support.wix.com/en/article/corvid-wix-members-privatemembersdata-collection-fields

I have used that as a starting point for my members only page on a website and use custom signup and login lightboxes as well on that site too.

So I have a Members dataset that I can gather additional info from members where they can update the page with whatever they like. You don’t have to keep the tutorial format as a profile page and update profile page, you can use it for whatever purpose you want it to be for.

Basically the first time somebody signs up, whatever you collect in the contacts info variable of the custom signup form is passed onto the Members dataset.

This will then be shown on the members page and when they update anything on their own page etc, it will then be saved into the Members dataset and be shown on their own page.

You can add whatever you want to your custom signup lightbox, you don’t have to keep it simple, you can have whatever user inputs you want on it.

i’ve also still got the Wix Members ‘My Account’ page too so that they can change their email on this page if they need to for email notifications etc…
https://support.wix.com/en/article/about-members-area

However, I never use the Wix Login Bar, I will always stick with the good old fashioned login button that changes to say logout when the user is logged in.

3

My signup code for my signup lightbox.

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

$w.onReady(function () {
    
    $w("#registerButton").onClick( (event) => {
        
   let email = $w("#email").value;
   let password = $w("#password").value;
   let first = $w("#firstName").value;
   let last = $w("#lastName").value;

   wixUsers.register(email, password, {
       contactInfo: {
        "firstName": $w('#firstName').value,
        "lastName": $w('#lastName').value,
       }
      } )
      .then( (result) => {
        let resultStatus = result.status;
  wixWindow.lightbox.close();
  wixLocation.to("/sign-in-status");  //Change the URL ending to whatever page you want to send the user to after they log in.
      } );     
    } );
    
});

This works perfectly and closes after registering details before moving user onto my sign-in-status page, then both names will be saved in contacts and once site member is manually approved the member details will be added to 'members' database.
4

My login code for my custom login lightbox.

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.
   } ); 
}
5

If you want to go to another page after logging in, then simply change the page url from wixLocation.url to whatever page url you want to use.

 wixLocation.to("/account/my-account");  //Change the URL ending to whatever page you want to send the user to after they log in.
6

Finally, if you use custom lightboxes, then make sure that you have set the member signup settings to reflect that too.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

7

@givemeawhisky On your signup code, how do you require the FIRST NAME? Also, how do you show an error message when a required field isn’t filled out?

8

Thank you all so much