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


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

1,228 views0 comments

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.