I want to show a button when a certain user is logged in, has anybody done this before?
What I'm working with is the following:
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
user.email = "123@gmail.com"
$w("#button1").show();
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
Old post reappearing due to spam...
Hi, just figure out how to detect login event (without create my own login prompt). Since we don't know when login is taking place, I keep detecting if .currentUser.loggedIn at the default Login Bar (AccountNavBar) on its mouseOut event handle. Once login detected, insert record if record not exist!
This seems to have worked. For anyone trying something similar, a copy & paste of the below with an update of elements should work. The page contains login functionality, and then displays #button1 of a certain user (123@gmail.com) when logged in.
import wixUsers from 'wix-users';
import wixData from 'wix-data';
$w.onReady(() => {
if (wixUsers.currentUser.loggedIn) {
$w("#loginButton").label = "Logout";
let user = wixUsers.currentUser;
user.getEmail()
.then((email) => {
if (email === '123@gmail.com') {
$w("#button1").show();
} else {
$w("#button1").hide();
}
});
} else {
$w("#loginButton").label = "Login";
$w("#button1").hide();
}
});
export function loginButton_click_1(event) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then(() => {
// update buttons accordingly
$w("#loginButton").label = "Login";
$w("#button1").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("dynamicDataset")
.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("dynamicDataset", toInsert)
.catch((err) => {
console.log(err);
});
}
// update buttons accordingly
$w("#loginButton").label = "Logout";
let user = wixUsers.currentUser;
user.getEmail()
.then((email) => {
if (email === '123@gmail.com') {
$w("#button1").show();
} else {
$w("#button1").hide();
}
});
})
.catch((err) => {
console.log(err);
});
}
}
Considering there's no other way for a user to "change" other than a page refresh or load, the page onReady (the one that you used) seems like the proper place for this piece of code.
Hi Ohad
Thank you, that was surprisingly easy..
Do you perhaps know which .onReady event handler I should use? It currently only updates when I manually refresh the page. My code now looks like this:
import wixUsers from 'wix-users';
$w.onReady(() => {
let user = wixUsers.currentUser;
user.getEmail()
.then((email) => {
if (email === '123@gmail.com') {
$w("#button1").show();
} else {
$w("#button1").hide();
}
});
});
Hi,
You should use User.getEmail().
Code can look something like:
let user = wixUsers.currentUser; user.getEmail() .then((email) => { if(email === '123@gmail.com') { $w("#button1").show(); } });