Change button text/label and purpose

Ask the community
, ,
1

Hi Guys,
I want to change the button text and purpose.
When Members isn’t logged in I want the button to say “Login” and redirect them to my custom made login lightbox.
When members are singed in, I want the button to say “Logout” and log them out as well.
Below my code in the masterPage:
import wixUsers from ‘wix-users’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( () => {
if ( wixUsers . currentUser . loggedIn ) {
$w ( “#loginbutton” ). label = “Logout” ;
}
else {
$w ( “#loginbutton” ). label = “Login” ;
}
} );

export function loginbutton_onclick ( event ) {
// user is logged in
if ( wixUsers . currentUser . loggedIn ) {
// log the user out
wixUsers . logout ();
// update buttons accordingly
$w ( “#loginbutton” ). label = “Login” ;

}

// user is logged out
else {
wixLocation . to ( ‘#login’ );
$w ( “#loginbutton” ). label = “Logout” ;

}}

2

Here …

maybe will find some more informations for your purpose.

But in both cases the Wix-Users-API is used, what is not recomended!
DEPRICATED-API.

Instead use the new wix-Members-API.
https://www.wix.com/velo/reference/wix-members

Or if you are going to do it on backend, use the wix-members-backend-api…
https://www.wix.com/velo/reference/wix-members-backend

Use the example-code and change it’s behaviour to your needs.

My recommendation would be to generate your function completely new, using wix-members-api.

3

Thank you for the reply. I tried several things but can’t get the code right. Can someone check please?
$w . onReady ( function () {
const loggedIn = authentication . loggedIn ();

if ( loggedIn ) {
console . log ( ‘Logged in, showing the logout button’ );
$w ( ‘#logout’ ). show ();
$w ( ‘#loginbutton’ ). hide ();

}
else {
$w ( ‘#logout’ ). hide ();
$w ( ‘#loginbutton’ ). show ();
};

authentication . onLogin ( async ( member ) => {
const loggedInMember = await member . getMember ();
const memberId = loggedInMember . _id ;
console . log ( Member ${ memberId } logged in: , loggedInMember );
$w ( ‘#logout’ ). show ();
$w ( ‘#loginbutton’ ). hide ();
});

authentication . onLogout (() => {
console . log ( ‘Member logged out’ );
$w ( ‘#logout’ ). hide ();
$w ( ‘#loginbutton’ ). show ();
})})

export function loginbutton_click ( event ) {

$w ( ‘#logout’ ). show ();
$w ( ‘#loginbutton’ ). hide ();
wixLocation . to ( ‘#login’ );}

export function logout_click ( event ) {
$w ( ‘#logout’ ). hide ();
$w ( ‘#loginbutton’ ). show ();
authentication . logout ();

}

4

Can Someone help me please?
Thank you