I added the Wix Login app to my site. I wanted to customize the login/registration pop up or even under member profile page as I'd like to add a text field where people can also tell me their company name. Not just their first, last, phone & addy.
I see the wix login prompt (username/password) window cannot be edited so I deleted the wix login app and created a custom registration form dynamic page and linked it to the database i created. I added the code from this article to the login page (page code) I created:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function loginbutton_click(event) { // user is logged in if(wixUsers.currentUser.loggedIn) { // log the user out wixUsers.logout() .then( () => { // update buttons accordingly $w("#loginbutton").label = "Login"; $w("#myprofilebutton").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("MEMBERPROFILE") .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("MEMBERPROFILE", toInsert) .catch( (err) => { console.log(err); } ); } // update buttons accordingly $w("#loginbutton").label = "Logout"; $w("#myprofilebutton").show(); } ) .catch( (err) => { console.log(err); } ); } } export function myprofilebutton_click(event, $w) { wixLocation.to(`/MEMBERPROFILE/UPDATE/${wixUsers.currentUser.id}`); } $w.onReady( () => { if(wixUsers.currentUser.loggedIn) { $w("#loginbutton").label = "Logout"; $w("#myprofilebutton").show(); } else { $w("#loginbutton").label = "Login"; $w("#myprofilebutton").hide(); }
But when I click the login button on my page nothing happens. It doesn't prompt a pop-up window where I can enter my username and password which would see if I'm an existing member or a new member? The "My Profile" button also is not hidden. There's a disconnect somewhere. Am I supposed to use this prompt function?
import wixUsers from 'wix-users';
// ...
wixUsers.promptLogin()
.then( (user) => {
let userId = user.id; // "r5me-6fem-45jf-djhe-484349"
let isLoggedIn = user.loggedIn; // true
let userRole = user.role; // "member"
return user.getEmail();
} )
.then( (email) => {
let userEmail = email; // "user@something.com"
} )
.catch( (err) => {
let errorMsg = err; // "The user closed the login dialog"
} );
I created a lightbox even with a username and password entry field but again I don't know how to prompt a login. What am i missing? How do I make the connection? What's that code? Did I delete something I shouldn't have when I deleted the wix user login app? Should I put it back? HELP!!!!
the login page is still white! I have double and triple checked everything.... What is going on. People have complained over and over that they can't login to post or comment
Hi Othman.
Yes it's possible with new wix-users function applySessionToken()
Hi Andrii,
I can not find a way to directly login a user, without using the promptLogin() method and the built-in pop-up. Is there any way to login directly with email and password fields ?
Thanks !
OMG IM SO EMBARRASSED!!! I was soooo certain that I had already did that. SMH. Andrii I can't thank you enough for your help! Thank you so much for your contribution = ) Awesome Human!!!!
You have to connect inputs to dataset
Andriiiiii - I need your brain again PLEASE!!!
This video helped me out a great deal as well. But can you tell me why when i go to my profile after updating all the fields why the information isnt saving? After I hit update, I go back into my profile and the info doesnt repopulate. Any ideas? Help!!
www.werbelmicrowave.com
zufi zuff, Yes, it's replica.
Contacts collection is not yet fully accessible with wix-code, only createContact and emailContact(read here). So you need to create your own collection (like users) and store the data there.
Hi
Is right that collection ("MEMBERPROFILE" in this case) is "replica" of Contacts and Users (+custom fields) and connected to Users by the same "_id"? Are Users and Contacts connected in the same way?
What if I need Users data (e.g. first+last name) grouped by roles or Contacts data by labels, have I triple it in my own collection?
Thanks in advance
Andrii...you are an angel sent from above. You saved me. It works!!!!! I cannot thank you enough. Thank you so very much for the code. You did it.
Hello Alicia.
I have copied your code and it works for me (i added the '})' at the end). I can only recommend to rewrite your code a little bit, and turn function myprofilebutton_click into $w('#myprofilebutton').onClick.
Also maybe you are trying to use it in preview mod( you can't logout and login in preview);
This code works for me.
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("#myprofilebutton").show(); } else { $w("#loginbutton").label = "Login"; $w("#myprofilebutton").hide(); } $w('#myprofilebutton').onClick(event => { wixLocation.to(`/MEMBERPROFILE/UPDATE/${wixUsers.currentUser.id}`); }); $w('#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("#myprofilebutton").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("MEMBERPROFILE") .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("MEMBERPROFILE", toInsert) .catch((err) => { console.log(err); }); } // update buttons accordingly $w("#loginbutton").label = "Logout"; $w("#myprofilebutton").show(); }) .catch((err) => { console.log(err); }); } }) })
Also take a look at https://www.wix.com/code/reference/wix-users-backend.html#register. It's new module function for registration, so you can create your custom registration form without using the wixUsers.promptLogin.