Redirect to homepage on logout from #accountnavbar

Ask the community
, ,
1

I am using a custom login and sign up form, in conjunction with the default #accountnavbar. It works well for all purposes except if someone clicks logout from the #accountnavbar on a members-only page (a regular page set to members-only permissions, a members area page like the forum, or an account or profile page) at which point they get taken to a distorted version of my custom login lightbox with no way to close it or navigate off the page.

I have added redirect code to the custom login but it still isn’t working for the logout redirect.

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {

$w(“#forgotPassword”).onClick( (event) => {
//wixWindow.lightbox1.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
. catch ( (err) => {
let errorMsg = err; //“The user closed the forgot password dialog”
});
});
});
export function loginButton_click(event) {
$w(“#error”).collapse();
$w(“#box3”).expand();
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 and for the login button to change to logout.
} )
. catch ( (err) => {
console.log(err);
$w(“#box3”).collapse();
$w(“#error”).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. } );
});

if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// redirect to homepage
wixLocation.to(“/home”);
} )
}
}

2

https://www.wix.com/corvid/forum/community-discussion/this-is-how-to-logout-and-go-to-the-page-of-your-choice

3

Just simply get rid of the Wix account navbar and use your own logout button.
https://www.wix.com/corvid/forum/community-discussion/this-is-how-to-logout-and-go-to-the-page-of-your-choice

So you won’t need this either.

if (wixUsers.currentUser.loggedIn) {
  // log the user out
           wixUsers.logout()
             .then( () => {
               // redirect to homepage
                        wixLocation.to("/home");
                              } )
                               }
                                }

Or use the code shown in this tutorial here to setup the same button for login and logout with simply the button value changing on ot.
Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com

Also, why have you got this under the export function?

 export function loginButton_click(event) {
  $w("#error").collapse();
  $w("#box3").expand();

You don’t need it as you have this below.

    .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.
   } ); 
}

The error message should be set to collapse on load in the properties panel for that text element, which means it won’t show on the page unless there is an error and then the code will tell it to expand.

4

I know how to set up the custom button generally but chose to use the #accountnavbar because I like the dropdown menu and that it displays the user’s name and notifications. Is there code that would make these things possible in a custom button?

Also, re: the error handling, thanks for the catch on the duplicate code re: hiding the error message. #box3 is my spinner though while the form is submitting so that belongs in the export function as-is.

5

The best way to do this is to use a repeater that is hosted in the Site header (code in the site page) and overlaps into the body from the header. This is particularly tricky to get right as it means using trial and error with the Wix Editor. Once you do get it right then you can use a simple repeater containing buttons styled as you desire to represent the dropdown. The repeater can be hidden until the Login button is clicked.

6

@custommembersite I am having the same issue. I use the #accountnavbar but want to only modify the redirect link… wondering how you got this resolved in the end? I don’t mind adding a log out button, but I don’t know how to get rid of the “logout” from the #accountnavbar so people log out using my customized button…

7

hi thanks alot.
if I put this button I need to copy/paste this code for each page, corrct?
because I want the member to be comfortable In using the website