Refresh page when member logs in

Ask the community
, ,
7

The issue with that tutorial shown in the original forum post, is that it only works if you take the member to another page after they log themselves in and then they click back to that page themselves again later.

If you stay on the same page after the member has logged in, then the code itself doesn’t kick into gear and even though the member is logged in, nothing on the page will actually change to display that. The login button value won’t change to say logout and anu hidden elements on that page won’t be shown.

i had that exact same issue with my members page as I wanted them to stay on the page after logging themselves in.

The simple and easy fix was to put the page refresh in the custom login lightbox code.

The member clicks on the login button and my custom login lightbox appears which they use to log themselves in.

Then the login lightbox closes itself automatically and the members page is automatically refreshed.

This then gets the code working as it is now acting as if the user had clicked back to that page and so the login button changes to logout and all my hidden member elements are shown on the page.

Custom Login Lightbox Code:

import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

$w.onReady(function () {
 $w("#forgotPassword").onClick( (event) => {
    //wixWindow.lightbox.close()
   wixUsers.promptForgotPassword()
   .then( ( ) => {
   //
   } )
    .catch( (err) => {
    let errorMsg = err;  //"The user closed the forgot password dialog"
    });
 });
});

export function loginButton_onclick(event) {

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