Prompt Lightbox from code

Ask the community
,
1

Hi,

Wanna ask if someone could help me to prompt a lightbox from code which is a custom login lightbox . This code prompts the default login that gives WIX which I don’t want that.

This is the code:

import wixUsers from 'wix-users';

import wixData from 'wix-data';

import wixLocation from 'wix-location';



$w.onReady( () => {

  if(wixUsers.currentUser.loggedIn) {

    $w("#button4").label = "Logout";

    $w("#button5").show();

  }

  else {

    $w("#button4").label = "Login";

    $w("#button5").hide();

  }

} );





export function button4_onclick() { 

  // user is logged in

  if(wixUsers.currentUser.loggedIn) {

    // log the user out

    wixUsers.logout()

      .then( () => {

        // update buttons accordingly

        $w("#button4").label = "Login";

        $w("#button5").hide();

    } );

  }

  // user is logged out

  else {

    let userId;

    let userEmail;

  

    // prompt the user to log in 

    wixUsers.promptLogin( {"mode": "login"} )

      .then( (user) => {

        userId = user.id;

        return user.getEmail();

      } )

      .then( (email) => {

        // check if there is an item for the user in the collection

        userEmail = email;

        return wixData.query("PrivateMembersData")

          .eq("loginEmail", userId)

          .find();

      } )

      .then( (results) => {

        // if an item for the user is not found

        if (results.items.length === 0) {

          // create an item

          const toInsert = {

            "loginEmail": userId,

            "email": userEmail

          };

          // add the item to the collection

          wixData.insert("PrivateMembersData", toInsert)

            .catch( (err) => {

              console.log(err);

            } );

        }

        // update buttons accordingly

        $w("#button4").label = "Logout";

        $w("#button5").show();

      } )

      .catch( (err) => {

        console.log(err);

      } );

  }

}



export function button5_onclick() {

  wixLocation.to(`/MemberProfile/Update/${wixUsers.currentUser.id}`); 

}

Thanks

2

For starters you should look at rewriting your code.

The Wix Members app own Members PrivateMembersData collection has to be called as Members/PrivateMembersData in any code like the query you have, otherwise it will not work
https://support.wix.com/en/article/corvid-wix-members-privatemembersdata-collection-fields

This dataset collection is used purely by the Wix Members app and can’t be updated by yourself, it can only be read. Hence why you need to create a separate dataset as in the tutorial stated below.

As for your own custom login and signup lightboxes, after you have made these up, then you need to adjust your member signup settings to suit.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

As for your existing code above, then you are better off doing the member profile tutorial as shown here.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

Also, you are wanting to move the user onto their own Profile page only like this.

wixLocation.to(`/MemberProfile/${wixUsers.currentUser.id}`);

And not straight onto their Update Profile page as you have done in your code above.

wixLocation.to(`/MemberProfile/Update/${wixUsers.currentUser.id}`);
3

This is my code for my members only page which I used the members profile code as a starting point to work off from.

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();

}
} );

export function loginbutton_onclick(event) { 
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
  $w("#membersareaonlystrip").collapse();
  $w("#whitegapforfooter ").show();
  
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in 
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
 $w("#loginbutton").label = "Logout";
 $w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

} )
.catch( (err) => {
console.log(err);
} );
}
}

export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
}

export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`); 
}

export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`); 
}

export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`); 
}
4

My code for custom signup lightbox.

This works perfectly for me and closes after registering details before moving user onto signup status page, then both names will be saved in contacts and once site member is approved manually the member details will be added to ‘members’ database.

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 URL to page you want to send the user to after logged in.
      } );     
    } );
    
});
5

My code for custom login lightbox.

Note that this will close the lightbox after user is logged in automatically and the page they were on will be refreshed so that the code from on the members page will run and the button will change from login to logout and members collapsed items will be expanded and shown.

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);
     //Reloads the same page, allows code to show hidden member parts.
     //Plus, lets the buttons value change from login to logout.
   } )
    .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.
   } ); 
}
6

My code for custom login lightbox.

Note that this will close the lightbox after user is logged in automatically and move the user onto the specific page that you have put in the wix location url line.

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_click(event) {

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

 wixUsers.login(email, password)
   .then( () => {
     console.log("User is logged in");
     wixLocation.to("/Members/${wixUsers.currentUser.id}");
     //Change URL to page you want to send the user to after logged in.
   } )
    .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.
   } ); 
}
7

@givemeawhisky Thank yo so much for your help and time! Wanna ask you if is possible to link your site (I mean to see how it interacts with the elements). Thanks again!