-
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(“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);
-
} );
-
}
-
// 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}); -
}
I can log in, but it doesn’t let me log out and doesn’t direct me to the dynamic page.
logout() refreshes the page and stops the code execution.
So:
wixUsers.logout()
//This part won't run:
.then( () => {
// update buttons accordingly
$w("#button4").label = "Login";
$w("#button5").hide();
} );
As for your other questions, make sure the export click function is marked on the property panel of these buttons.
wixUsers.logout()
//This part won’t run:
.then( () => {
// update buttons accordingly
$w(" #button4 ").label = “Login”;
$w(" #button5 ").hide();
} );
If this doesn’t work do you know what I could use instead please I’m a complete novice when it comes to coding I’ve been trying to achieve this for so long.
@n5style3marketing set the default label to be “login” and the default state of button5 to be hidden on load.
Then if is logged in - change it.
So once you log the user out, the page will refresh and the default status will be applied automatically.
@jonatandor35
I have done that but when I click long out nothing happens
Instead of constant back and forth here, why not just follow the tutorial itself as that is where you have got the code from to use?
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
import wixUsers from 'wix-users';
import wixData from 'wix-data';
importwixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginButton").label = "Logout";
$w("#profileButton").show();
}
else {
$w("#loginButton").label = "Login";
$w("#profileButton").hide();
}
} );
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("#profileButton").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("#profileButton").show();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
I have been for a long while now, but can’t find i’m doing anything different to what it saids. I thought a more experienced coder my just see it and could point it out. I appreciate its difficult without being in front of the screen. It was worth a try.
You just need to follow the tutorial slowly and carefully and do what J.D. has already suggested to you and to make sure that your buttons have the onClick event handler function added to them through the properties panel for each button.
A login button onClick event handler for either:
-
logging in a user and possibly creating a new item in the Members collection if it is a first-time login
-
logging out a user who is already logged in
A profile button onClick event handler for navigating members to their profile pages
Look here for adding events through the properties panel.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
Also do not direct the user here to the members update page, only direct them to the profile page itself.
Plus, remember that the member profile pages are unique to that site member themselves, no other site member can access another site members profile pages.
Finally, note that when you first use this tutorial that the Members dataset from the tutorial will be empty apart from the email address that you captured on signup, unless you did your own custom signup lightbox and captured more of the users data.
Hence why you need to go to the site members profile page first and not the members profile update page.
So change this line
wixLocation.to(`/MemberProfile/Update/${wixUsers.currentUser.id}`);
to this instead
wixLocation.to(`/MemberProfile/${wixUsers.currentUser.id}`);
If you are still struggling, then watch Nayeli (Code Queen) youtube tutorial about it here where she walks you through hte whole tutorial step by step.
2017 Create Member Profile Log In Page - Custom Private Client Member Dashboard - Wix Code
Thank you for that, I have changed it to members profile now. wI’ll check if it works or not. thank you I appreciate your time especially on a Sunday.
Thank you for the video, I will watch it now I think watching It will be a lot more helpfu.