Hi all,
I’m using code and a login button to call a custom login lightbox. I would like the label of the button to change based on whether the user is logged in or not. I’m getting the correct label on logging out and getting the user logged in no problem, but the button doesn’t update following login. I’m using code adapted almost exactly from the lightbox API. Any suggestions would be welcome!
export function login_click(event) {
if (wixUsers.currentUser.loggedIn) {
wixUsers.logout()
.then(() => {
$w("#login").label = "LOGIN"; // update buttons accordingly
});
}
else{
//wixWindow.openLightbox("login")
wixWindow.openLightbox("login", {
"label": $w('#login').label,
})
.then( (data) => {
$w('#login').label = "LOGOUT";
/*
I've tested trying to have this show() a box on the page and the code within this "then" block doesn't seem to be executing at all.
I've also substituted the following for the above code with the same result:
$w('#login').label = data.lightboxSend1;
*/
} );
}
}
#login #lightbox #customlogin
I’m using the code from this tutorial as a basis of my code for my members only page which has my login button on it.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
Once the user clicks on my login button, it them brings up my custom login lightbox and after the user has logged themselves in, the login lightbox will close and refresh my members only page so that the code on this page will be kicked into gear and the login button will change to logout and all my member only elements will then be shown in my members strip.
Without the refresh of the page code the user will still be logged in, however the login buttons value will not change from login to logout and none of my hidden items will be shown.
If you navigate to another page instead, then you shouldn’t need the refresh on the same page.
https://www.wix.com/corvid/reference/wix-window.lightbox.html
https://www.wix.com/corvid/reference/wix-users.html#login
https://www.wix.com/corvid/reference/wix-users.html#register
https://www.wix.com/corvid/reference/wix-users.html#LoginOptions
https://www.wix.com/corvid/reference/wix-window.html#openLightbox
https://www.wix.com/corvid/reference/wix-window.lightbox.html#close
My page code for my members only page which has my login button on it.
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`);
}
This is my code for my custom login lightbox which refreshes my members page after the user has logged themselves in and the lightbox closes.
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.
} );
}
This works perfectly and closes after registering details before moving them on to my signup 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 my custom signup/register 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.
} );
} );
});
Hi givemeawhisky, thanks for the incredibly thorough and informative response! I’m pretty sure that just adding that refresh line will get the job done for me from where I am now. Thanks again, been putting a ton of work in on this and it’s a huge relief every time I can fix one of the lingering issues!