Custom Login VS custom registration in two separate lightboxes or pages ?

Hello !
I have a custom login on a lightbox and now, I would like a custom registration in an other page (so not login et register at the same place).

  1. Fisrt, is this possible ?

  2. If yes, here is my code for custom registration that doesn’t seems to work correctly. Any help from an expert ? :slight_smile:

Tks a lot for your time,
Best regards,
Angeline

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

// …

let userId;
let userEmail;

$w(‘#submit’).onClick(() => {

wixUsers.register($w('#email').value, $w('#password').value, { 
  } 
) 
  .then( (email) => { 
userEmail = email; 

return wixData.query(“MemberProfile”)
.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(“MemberProfile”, toInsert)
. catch ( (err) => {
console.log(err);
wixLocation.to(/MemberProfile/Update/${wixUsers.currentUser.id});
} );
}

This works perfectly and closes automatically after registering details before moving user to my sign up status page, then both names will be saved in contacts and once site member is approved the member details will be added to ‘members’ database.

My code for register/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.
      } );     
    } );
    
});

My code for my 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_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("/account/my-account");  //Change the URL ending to whatever page you want to send the user to after they log 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.
   } ); 
}

if you are using custom lightboxes, then make sure that you change your member signup settings.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

Wix do offer a variant to their existing Wix login/signup windows and you can make up your own form via Wix Forms
https://support.wix.com/en/article/creating-a-custom-signup-form-for-your-members-area
https://support.wix.com/en/article/editing-your-member-signup-settings-for-the-default-form

I have all that. The point is, I don’t want users to be able to register or login on the same lightbox. I need 2 separate lightboxes : one to login and one to register. But it seems that Wix allowed to only have one lightbox for both functions at the same place. Am I all right ?

if you make your own custom lightboxes up then it will be two seperate lightboxes, with one being for login and the other one being for signup.

You just have a basic link on each lightbox themselves, so that you can do the ‘already a member - login’ link to your login lightbox from the signup lightbox, or the ‘need to signup - signup’ link from your login lightbox to the signup lightbox.

Hence why you have two code sets above, one for long and one for signup!