Member Profile Custom Login (2017 Version)

Tutorial Video

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

You can make it:

• Public View (display collected data on another public page of your site) and Member can Edit

• Private View and Member can Edit

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

Tutorial Page

https://codequeen.wixsite.com/wixrgv

---

Follow Along #2

Official Wix Article

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

The Code

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

by Code Queen

Services world wide

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