Please Help me with promptLogin for Email approval

Hey guys greets from Sorrento in Italy, it’s exciting play in an international community :slight_smile:
Ok I would like create a Custom Area Members how described in the following: https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

But I would to get the approval procedure by email for new members.
I’m not able to imagine how can I use register(), how can I do ?

If you are wanting to ‘Register a user sending an email for confirmation’ then go to this link and scroll down to find the code for you:
https://www.wix.com/corvid/reference/wix-users-backend.html#register

Ciao @givemeawhisky I saw the code, but I am not able to reconcile the use of register() with the promptLogin(). Perhaps I believe is not possible .

So, my question, if you want send an email for confirmation on registering, perhaps, you cannot use the promptLogin and you must create from scratch the Login box , using:
login()
register()
and promptForgotPassword()

is it ?

promptLogin() box contains also the registering option, so I believe you couldn’t control it, is it ?

For the code to work from the tutorial that you linked to in your first post:
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

Then you need to have already had the user register themselves as a site member so that they are already registered. Then when the code from that tutorial prompts the user to login, they are shown either Wix login window or your own custom login lightbox.

However, please note that if you do use the code from the tutorial, then you will need to have the page refreshed after any member is logged in so that the code is kick started, otherwise the code will not work and the user will be logged in as a member yet the page will still be displayed as not logged in.

I have a similar setup on my website and use a version of that code for my own members area, I also use custom lightboxes for login and signup.

Plus, when a member wants to login on my members page, it brings up my custom login lightbox which allows the user to log themselves in and then it closes the lightbox and refreshes the members page so that the code works and the login button changes to say logout and my member only parts show on the page etc, etc.

Finally, the mode option you can add to promptLogin can be either “login” or “signup” which justs tells your website via the code which option it should show between your login or signup options when the user gets prompted to login.

wixUsers.promptLogin( {"mode": "login"} ) 
//or
wixUsers.promptLogin( {"mode": "signup"} )

This is my custom code for my signup lightbox which works perfectly and closes after registering details before moving the user onto my signup 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.
      } );     
    } );
    
});    

This is my custom code for my login lightbox which appears after members click on the login button on my members only page, with the code on my members only page being similar to the tutorial that you linked to.

After the member logs themselves in via the login lightbox, the lightbox then closes itself and the members page is refreshed automatically so that the code starts working and the button changes to logout etc.

The login lightbox also has a simple ‘forgot password’ text link on it too, so any member can reset their password, hence the forgotpassword part at the top of my code.

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

$w.onReady(function () {
 $w("#forgotPassword").onClick( (event) => {
    //wixWindow.lightbox.close()
   wixUsers.promptForgotPassword()
   .then( ( ) => {
   //
   } )
    .catch( (err) => {
    let errorMsg = err;  //"The user closed the forgot password dialog"
    });
 });
});

export function loginButton_onclick(event) {

 let email = $w("#email").value;
 let password = $w("#password").value;

 wixUsers.login(email, password)
   .then( () => {
     console.log("User is logged in");
     wixWindow.lightbox.close();
     wixLocation.to(wixLocation.url);  //This reloads the same page and allows code to show hidden member parts and login button to change to logout.
   } )
    .catch( (err) => {
     console.log(err);
     $w("#errorMessage").expand();  // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
   } ); 
}

Finally, with my custom signup lightbox, I have also setup Wix Automations so that the user gets a email after they first signup to become a member and then they also get another email confirming that they are now a member once we have manually approved the member ourselves.

You can setup

If you do go down the custom login and signup lightboxes, then please make sure that you change your member settings so that your custom lightboxes appear instead of Wix own windows.
https://support.wix.com/en/article/editing-your-member-signup-settings-for-the-default-form

Hi @givemeawhisky you were very kindly. Now I’m going to study your code, I’ll give a feedback as soon as. Thanks so much for now, I have a wiskey to you :smiley:

Hi @givemeawhisky only now I realize that I had been a bit unclear, I wanted to ask how I can to use the email in order to get an approval by email trough a verification link . I’m realizing that your code don’t get it, isn’t it ?

Was this not what you were after:
https://www.wix.com/corvid/reference/wix-users-backend.html#register

Register a user sending an email for confirmation

This example demonstrates a common email verification flow. A user is initially registered but not yet approved. At registration, a verification email is sent with a link to a verification page. When a user goes to the verification page, the approval is granted and the user is logged into the site.

The code is split between three locations:

  • A backend web module named register.jsw .

  • The page code for the page where users register.

  • The page code for the page where users confirm their registration.

/*******************************
 * backend code - register.jsw *
 *******************************/
import wixUsers from 'wix-users-backend';

export function doRegistration(email, password, firstName, lastName) {
  // register the user
  return wixUsers.register(email, password, {
    "contactInfo": {
      "firstName": firstName,
      "lastName": lastName
    }
  } )
  .then( (results) => {
    // user is now registered and pending approval
    // send a registration verification email
    wixUsers.emailUser('verifyRegistration', results.user.id, {
      "variables": {
        "name": firstName,
        "verifyLink": `http://yourdomain.com/post-register?token=${results.approvalToken}`
      }
    } );
  } );
}

export function doApproval(token) {
  // approve the user
  return wixUsers.approveByToken(token)
  // user is now active, but not logged in
  // return the session token to log in the user client-side
    .then( (sessionToken) => {
      return {sessionToken, "approved": true};
    } )
    .catch( (error) => {
      return {"approved": false, "reason": error};
    } );
}

/*********************************
 * client-side registration code *
 *********************************/
import wixUsers from 'wix-users';
import {doRegistration} from 'backend/register';

export function button_click(event) {
  let email = // the user's email address
  let password = // the user's password
  let firstName = // the user's first name
  let lastName = // the user's last name

  doRegistration(email, password, firstName, lastName)
    .then( () => {
      console.log("Confirmation email sent.");
    } );
}

/**************************************
 * client-side post-registration code *
 **************************************/
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import {doApproval} from 'backend/register';

$w.onReady( () => {
  // get the token from the URL
  let token = wixLocation.query.token;

  doApproval(token)
    .then( (result) => {
      if (result.approved){
        // log the user in
        wixUsers.applySessionToken(result.sessionToken);
          console.log("Approved");
      }
      else {
        console.log("Not approved!");
      }
    } );
} );

I just studied this code that is based on this sequence:

  • register (email, password)
  • emailuser // send a trigger email with a link to a verification page
  • approveByToken // approve the user by his registration token
  • applySessionToken // log in the user

and I am not able to use it with promptLogin(), cause you can’t get the password and it works in another way.

For this reason with this last code you have to build on you own the Login/Register/ForgotPassword box

Do you agree ?

I read the post of @sigpoggy , he has caught all, but it is unattainable