Open Login Lightbox onClick?

Ask the community
, ,
1

Hello! I have created a custom member profile and update page using this tutorial: [Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com…](Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com…

)

I have separately created a custom registration page, and a custom login lightbox. Registration is working. I have yet to be able to test the login page, as I’m encountering issues. The login button as created following the above tutorial doesn’t trigger anything.
I would like the login button on my /login page to trigger the lightbox opening.

So I have two questions: Are there issues in my existing code, and where/how should I insert code to trigger the lightbox?

Registration Page: www.fineartprintfair.org/login
Login Page: www.fineartprintfair.org/register

Login Page Code:

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("#myBoothButton").show();
 $w("#registerButton").hide();
 } else {
 $w("#loginButton").label = "Login";
 $w("#myBoothButton").hide();
 $w('#registerButton').show();
 }
} );
/**
 *  Adds an event handler that runs when the element is clicked.
 *   @param {$w.MouseEvent} event
 */
export function loginButton_click(event) {export function loginButton_click(event) { 
 // user is logged in
 if(wixUsers.currentUser.loggedIn) {
 // log the user out
 wixUsers.logout()
 .then( () => {
 // update buttons accordingly
 $w("#loginButton").label = "Login";
 $w("#myBoothButton").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("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("#myBoothButton").show();
 } )
 .catch( (err) => {
 console.log(err);
 } );
 }
}
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}
/**
 *  Adds an event handler that runs when the element is clicked.
 *   @param {$w.MouseEvent} event
 */
export function myBoothButton_click(event) {export function myBoothButton_click(event) {
 wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
}
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}
2

Hi Alex,

You have duplications in your code which can couse issues, also, the myBooth button’s event handler is a static event handler, that means it’ll be initialized when the page is open, with an invalid ID, therefore, the link will lead to a 404 page.

I alawys recomend using the dynamic event handlers over the static event handlers, try something like this:

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

$w.onReady(() => {
    $w('#login').onClick(() => {
        if (wixUsers.currentUser.loggedIn) {
            wixUsers.logout()
        } else {
            wixUsers.promptLogin().then(async (newUser) => {
                updateEvent(newUser.id)
                const toInsert = {
                    _id: newUser.id,
                    email: await newUser.getEmail()
                }
                
                // Run your queries here
            })
        }
    });
    
    if (wixUsers.currentUser.loggedIn) {
        $w('#login').label = 'Log out';
        $w('#myBooth).show();
        $w('#register').hide();       
        updateEvent();
    } else {
        $w('#login').label = 'Login';
        $w('#myBooth).hide();
        $w('#register').show();
    }
})

function updateEvent(id) {
    if (!id) { id = wixUsers.currentUser.id }   
    $w('#myBooth).onClick(() => {
        wixLocation.to(`/Members/${id}`)
    })
}

Hope this helps~!
Ahmad

3

Ahmad, thank you. This is helpful. I apologize for my ignorance, but I have two follow-up questions.

First, in setting the Wix API information, should I be updating the code to reflect the specific database for wixData?

Second, I am having a little trouble working out how and where to insert the code you’ve suggested. Where it says “run your queries here”, should some of my code be placed there?

4

@alexedemasi Regarding your first question, it’s a bit ambiguous, and I don’t quite understand what do you mean.

As for the second question, you have a wixData query in your code, it should be in the place I specified in my code, like this:

wixUsers.promptLogin().then(async (newUser) => {
     updateEvent(newUser.id)
     const toInsert = {
          _id: newUser.id,
          email: await newUser.getEmail()
     } 
     // Run your queries here
     wixData.query("Members").eq("_id", userId).find().then((result) => {
          // And so on ...
     })
})

Although I don’t see why you’re inserting in a database upon user logon.

5

Thanks Ahmad! I’m inserting into a database on logon because there is a custom dynamic page that is fed by a dynamic form for each site member. So my understanding is for that page and form to exist for the user before having been filled out and submitted, the user ID will have to be entered into the dataset on login.

6

@alexedemasi In this case, since you’re using the user ID, you should use the save( ) method instead of the insert( ) method.

The difference here is that the insert will always insert new values in the database, the insert promise will be rejected if there was an item wit the same _id in the database, and you won’t be able to tell the difference, here’s when the save method comes, it’ll first check if there’s an item in the database with the same ID or not, and if there’s, the item will get updated, and it’ll get inserted if otherwise.