Log In panel to collect first and last name

Discussion Ask a question
,
1

Hi,
I need some help updating my Login panel to request the user first and last name so the contact list will have them as well as the email and password.
Any help will be very much appreciated

Pierre
ibmretraitesqc

Here my code:
import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
import {getUser} from ‘backend/getID’;
$w.onReady( () => {
$w(‘#horizontalMenu1’).hide();
$w(“#button29”).hide();
$w(“#button40”).hide();
$w(“#text25”).hide();
$w(“#anchor1”).scrollTo();
$w(“#text24”).hide()
if(wixUsers.currentUser.loggedIn) {
$w(“#button4”).label = “Déconnexion de votre compte actuel”;
$w(“#text24”).show()
$w(“#button3”).show();
}
else {
$w(“#button4”).label = “Connexion / Inscription”;
$w(“#button3”).hide();
$w(“#text24”).hide();
}
});
export function button4_onClick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w(“#button4”).label = “Connexion / inscription”;
$w(“#button3”).hide();
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in with French panel 
let options = {"mode": "login", "lang": "fr"}; 
wixUsers.promptLogin(options) 
  .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("ListeMembres") 
      .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, 
		  "adresseCourriel": userEmail, 
    "autorisation": "À valider",//write label to evaluate application as a member 
      }; 
      // add the item to the collection 
     wixData.insert("ListeMembres", toInsert) 
       .catch( (err) => { 
         console.log(err); 
       } ); 
    } 
    // update buttons accordingly 
    $w("#button4").label = "Déconnexion de votre compte actuel"; 
    $w("#button3").show();  
    $w("#text24").show();               
  } ) 
  .catch( (err) => { 
    console.log(err); 
  } );

}
}
// Go to the profile page
export function button3_onclick(event) {
//console.log (wixUsers.currentUser.id)
//wixLocation.to(/ListeMembres/Update/${wixUsers.currentUser.id});
redirect();
}

function redirect () {

let id = wixUsers.currentUser.id
//console.log (“ICI”)
console.log (id)
getUser(id).then(product => { //This is waht you get from the backend
//console.log (product.autorisation)
console.log(product.autorisation)
console.log (product.infoComplet)
if (product.autorisation === ‘ok’ && product.infoComplet === “0”)
{
//console.log (“ici”)

wixLocation.to(“/accueil”)} //Your page if the profile is complete

else {

if (product.autorisation === 'À valider' && product.infoComplet === "0") 

  { 
    //console.log ("ici2") 
    $w("#text25").show(); 
		
    $w("#text25").text = "Désolé, pas encore autorisé pour l'accès au site. Un courriel vous sera envoyé pour vous confirmer." 

  } 
else {wixLocation.to(`/ListeMembres/Update/${wixUsers.currentUser.id}`);

//your page if the profile is imcomplete
//console.log (“ici3)”)
}}

// .catch(error => {
// console.log(error);
})}

2

It would be much easier if you just collected that first and last name info in your signup form.

This code below works perfectly on my custom signup lightbox and closes automatically after registering details before moving them onto my sign up status page, then both names will be saved in contacts and once site member is approved the member details will be added to ‘members’ database.

import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(function () {
    
    $w("#registerButton").onClick( (event) => {
        
   let email = $w("#email").value;
   let password = $w("#password").value;
   let first = $w("#firstName").value;
   let last = $w("#lastName").value;

   wixUsers.register(email, password, {
       contactInfo: {
        "firstName": $w('#firstName').value,
        "lastName": $w('#lastName').value,
       }
      } )
      .then( (result) => {
        let resultStatus = result.status;
  wixWindow.lightbox.close();
  wixLocation.to("/sign-in-status");  //Change the URL ending to whatever page you want to send the user to after they log in.
      } );     
    } );
    
});

Fore more register api info, go to he api reference below.
https://www.wix.com/corvid/reference/wix-users.html#register
https://www.wix.com/corvid/reference/wix-users-backend.html#register

You can use either way as shown above in the register api sections, just remember to add it into the contact info of your signup code.

3

Thank you!

How do I integrate this into my actual code?

Presently, I only capture email and password and no authorisation. I manage the authorisation/validation process differently using a dynamic page that capture much more details for member validation.

Do it have to be in the backend?

Thank you!

Pierre
Ibmretraitesqc@gmail.com

4

@ibmretraitesqc

If you can’t do it in your signup/register code and you are using the members profile tutorial as a basis for your code above.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

Then simply add it to the data that you insert in your login code above after you have queried your Members dataset.

5

love it! Thanks for sharing GOS!