2nd button press launches onClick() function + redirect err.

Ask the community
, ,
1

This is the login page tutorial I followed and am now trying to modify slightly: Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com

Our sites ‘Account’ login area: https://www.singleboxstorage.com/login

My client wants to make the login prompt a page instead of a popup when clicking on the ‘Login’ button unlike the tutorial, but unfortunately I don’t believe there’s an option for that in Wix Code’s API so instead I decided to make the button redirect to a “Login” page that automatically prompts users a login screen popup so that it is an illusion that it’s a physical page that users can then click the back button to return to the login page if need be (as per client’s request).

I found that I have to click the button twice to launch the onClick() function but I don’t see why. What’s even weirder, is that when the onClick() function does initiate, the code redirects you to the blank ‘Login’ page (url: /login-1) but instantly jumps back to the ‘Account’ page (url: /login) and then the login prompts appears. It’s like the page stopped loading the ‘Login’ page but loaded the Page Code inside of it which is incredibly unusual.

There’s so many weird glitches with this feature I’m implementation that I may try to convince my client it is not doable to the liking he’d want and that the significance of this feature is negligible.

‘Account’ Page Code:

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

$w.onReady( () => {
 if(wixUsers.currentUser.loggedIn) {
    $w("#button1").label = "Logout";
    $w("#button2").show();
    $w("#button3").show();
  }
 else {
    $w("#button1").label = "Login";
    $w("#button2").hide();
    $w("#button3").hide();
  }
} );

export function button1_onclick() { 
 // user is logged in
 if(wixUsers.currentUser.loggedIn) {
 // log the user out
    wixUsers.logout()
      .then( () => {
 // update buttons accordingly
        $w("#button1").label = "Login";
        $w("#button2").hide();
        $w("#button3").hide();
    } );
  }
 // user not logged in
 else {
    wixLocation.to(`/login-1`);
  }
}

‘Login’ Page Code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady( () => {
 if(wixUsers.currentUser.loggedIn) {
//Reirect
    wixLocation.to('/login');
    }
  //Prompt-Login
  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("ProfilePage")
          .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("ProfilePage", toInsert)
            .catch( (err) => {
              console.log(err);
            } );
          wixLocation.to(`/Update/ProfilePage/`+userId); 
        }
      } )
      .catch( (err) => {
        console.log(err);
      } );
 }
 wixLocation.to(`/login`);
  }
 );