Member Profile Custom Login (2017 Version)

1 regular page + 1 dynamic + Wix Code = Member can view and edit THEIR profile page upon login.

You can make it:

All it takes is a little creativity, a little style and you have yourself a custom member platform ;) Imagine? You're own customer / member dashboard on your own Wix site.

Follow Along #1

https://codequeen.wixsite.com/wixrgv

Follow Along #2

https://support.wix.com/en/article/how-to-create-member-profile-pages-with-wix-code

https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

Good to Know #1

Be sure to watch the tutorial video above to understand the code and how to modify it.

 import wixUsers from 'wix-users';
 import wixData from 'wix-data';
 import wixLocation from 'wix-location';
 
 $w.onReady( () => {
  if(wixUsers.currentUser.loggedIn) {
  $w("#button3").label = "Logout";
  $w("#button4").show();
  }
  else {
  $w("#button3").label = "Login";
  $w("#button4").hide();
  }
 } );
 
 export function button3_onclick() {
  // user is logged in
  if(wixUsers.currentUser.loggedIn) {
  // log the user out
  wixUsers.logout()
  .then( () => {
  // update buttons accordingly
  $w("#button3").label = "Login";
  $w("#button4").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;
  return wixData.query("Profile")
  .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("Profile", toInsert)
  .catch( (err) => {
  console.log(err);
  } );
  }
  // update buttons accordingly
  $w("#button3").label = "Logout";
  $w("#button4").show();
  } )
  .catch( (err) => {
  console.log(err);
  } );
  }
 }
 
 export function button4_onclick() {
  wixLocation.to(`/Profile/Update/${wixUsers.currentUser.id}`);
 }
 
 

Author

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details