Help please, I suspect this is a simple one, but I am unable to find a solution.
The button in the middle of the page (Sign Up) does not change label after login, unless I do a refresh (F5).
This is the page prior to login...
This is the page immediately after login...
This is the page after I press F5 and the page reloads...
All buttons, including My Profile, are governed by the same function (setButtons). But for some reason #profileButton and #textWelcome work without a need for F5, while the two #bookButton only change label after F5.
Here is the code that manages the buttons behaviours.
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function setButtons(showButtons) {
if (showButtons) {
$w("#loginButton").label = "Logout";
$w("#profileButton").show();
$w("#textName").show();
$w("#textWelcome").show();
}
else {
$w("#loginButton").label = "Login/Signup";
$w("#profileButton").hide();
$w("#textName").hide();
$w("#textWelcome").hide();
$w("#bookButton1").label = "Sign up";
$w("#bookButton2").label = "Sign up";
}
}
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
setButtons(true);
}
else {
setButtons(false);
}
} );
export function loginButton_click() {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixLocation.to("/");
wixUsers.logout()
.then( () => {
// update buttons accordingly
setButtons(true);
} );
}
// 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("Users")
.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("Users", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
setButtons(true);
} )
.catch( (err) => {
console.log(err);
} );
}
}
Hi,
I noticed that in the if-else statement ( setButtons function ), you haven't updated all text elements. As a general recommendation, I recommend splitting the login function to multiple functions in order to locate and debug your code. Moreover, I recommend checking out this article for debugging and testing your site. You can also use the Developer tools to debug your code.
Good luck,
Tal,
Thank you Tal. I thought it was a really easy one, but I clearly missed the obvious. After adding two lines in the 'if' segment of the function, all is working well.
Much appreciated, thank you for the input.
Oberdan