Refresh page when member logs in

Ask the community
, ,
1

I have a button hidden from members not logged in. Only members that are logged in can see the button.

The code seems to work perfectly only after manually refreshing the page. is there a way to force refresh the page? Currently, after login the code redirects the page to the homepage which i thought would fix the problem using the wixLocation.to, but getting redirected didn’t fix the refresh/button problem. Any suggestions?

Code:

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady( () => {
 if(wixUsers.currentUser.loggedIn) {
    $w("#loginButton").label = "Logout";
    $w("#profileButton1").show();
  }
 else {
    $w("#loginButton").label = "Courier Pickup";
    $w("#profileButton1").hide();
  }
} );

export function loginButton_click(event) { 
 // user is logged in
 if(wixUsers.currentUser.loggedIn) {
 // log the user out
 
        wixLocation.to("/homepage");
    wixUsers.logout()
      .then( () => {
 
 
 // update buttons accordingly
        $w("#loginButton").label = "Courier Pickup Login";
        $w("#profileButton1").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;
        wixLocation.to('/Members/' + userId);
 
 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("#profileButton1").show();
 
      } )
 
      .catch( (err) => {
        console.log(err);
      } );
  }
}
1 Like
2

I’m having a similar problem. I just read a feature request saying there’s currently no way to force a page refresh. Suggested workaround was to set an automatic refresh on a timer which won’t work for me.
I’ll post a new thread if I can’t find a solution to my problem.

3

I fixed my problem with the dataset.refresh() method. Maybe that will help you?

4

We have Same problems…Members Restricted pages are not displaying and do not refresh DB at page load right after members logs in action… always need to refresh page manually after login action to display members restricted datas on the page… I really think it is a WIX problems, OnReady is blocked right after login… Still looking and try to find answer or solutions.

5

Please If someone have a solution or answer about it will be really appreciated! It is a Really annoying problem!!!

6

The solution provided by Yisrael works flawlessly. https://www.wix.com/corvid/forum/community-discussion/how-to-auto-refresh-page-onevent

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

It works for me as the same page refreshes whenever the member logs in. it is not set to change to another page and return.
The 2 buttons switched between show and hide. Before adding the code, I need to manually refresh the page to switch the buttons.

import wixData from “wix-data”;
import wixBookings from “wix-bookings”;
import wixUsers from ‘wix-users’;
////
$w.onReady( () => {
setupPage();
wixUsers.onLogin( (user) => {
setupPage();
} );
} );
exportfunction setupPage() {
if (wixUsers.currentUser.loggedIn) {
$w(“#bookButton”).show()
$w(‘#loginButton’).hide()
}
else {
$w(‘#loginButton’).show();
$w(“#bookButton”).hide()
}
}

9

Yes that works brilliantly for you, however are you using the same as the code from the tutorial that David was asking about in the original post.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

Yours is only setup to show or hide the login button and book buttons, it isn’t setup to change any button value after login is successful as per the tutorial code.

Plus, for all novice coders or non-coders that use that tutorial as a guide, it is much easier for them to follow the tutorial as it is set out and add their page refresh to their lightbox code instead.

Otherwise, it would mean them having to try and add the setupPage code correctly into their existing page code and have to sort out adding or removing any extra () or {}.

Plus, Wix would really need to look at revamping and changing that tutorial guide which shows the correct coding for if a logged in member is not directed to another page and simply stays on the same page after being logged in.

To be honest, I could perfectly well just go and add the code myself to my existing page code, of which I also used that tutorial as a basis for my own Members page, then simply take out the current page refresh in the login lightbox.

However, whilst everything is working fine and ticking over nicely, I’m not going to change anything until Wix decide to break something again when they release a new update!

Like a lot of things with code, there are also two ways of doing things and there is also one way that works for some and another way that works for others.

So happy that yours is working with Yisrael’s help, the wise old Wix man that he is:), must have come into his head during his lunch break with a nice cold beer!

Anyways, here is my code that I’ve used for the page code with the refresh being on my login lightbox and talking of cold beers, it is a nice warm sunny evening here and I’m off to enjoy a nice drink too!

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();

}
} );

export function loginbutton_onclick(event) { 
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
  $w("#membersareaonlystrip").collapse();
  $w("#whitegapforfooter ").show();
  
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in 
wixUsers.promptLogin( {"mode": "signup"} )
.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("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

} )
.catch( (err) => {
console.log(err);
} );
}
}

export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
}

export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`); 
}

export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`); 
}

export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`); 
}
10

If you guys want to refresh a page keep in mind Wix, Corvid behind the scenes are ReactJS, Single Page Application for its nature won’t run any local reload. The workaround that we use with our clients which works nicely is to redirect the user to a blank page, this page contains a simple instruction in the onready event handler to redirect the user back to the previous page forcing the browser to reload the page that you need to. Any questions just let me know happy to explain it in more detail if needed.

11

what is the code you would use on that blank page to redirect to previous page?