Custom Log In, Manual approval, Message for user (request is waiting approval)

Ask the community
, ,
1

I did a custom Log in, my problem is that I manually approve my users on my site, I would like a message that indicates that a user is pending approval if he enters his data in the log in and has not yet been approved. I tried with this message but not works I only display one msg something is missing in conditions I guess. I don’t know what functions to use for members with pending status.

This is my code

I hope you can help me, thank you!


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( ( ) => {
    console.log("Password reset submitted");
  } )
  .catch( (err) => {
 let errorMsg = err; // "The user closed the forgot password dialog"
  } );

 });

$w("#email").onKeyPress((event) => {
 let key = event.key;
    $w("#errorMessage").hide();
    $w("#pending").hide();
 });

 $w("#password").onKeyPress((event) => {
 let key = event.key;
    $w("#errorMessage").hide();
    $w("#pending").hide();

 if (key === "Enter") {
 
        console.log("Press enter key on password field")
 
 if ($w("#email").valid && $w("#password").valid ) {
 
 let email = $w("#email").value;
 let password = $w("#password").value;
 
                 wixUsers.login(email,password)
                 .then( (result) => {
                 console.log("User is logged in");
                 wixLocation.to("/account/my-account");
 
                })
                .catch ( (err) => {
                console.log(err);
                console.log("Your member request is waiting approval from the site owner");
                $w("#pending").show();
 
                });
 
            } else {
             console.log("Some inputs are invalid");
             $w("#errorMessage").show();
            } 
 
        }else {
             console.log("did not press enter key");
         }

 });

 $w("#login").onClick((event) => {

    console.log("Button was cliecked");
    $w("#errorMessage").hide();
    $w("#pending").hide();

 if ($w("#email").valid && $w("#password").valid) {

 let email = $w("#email").value;
 let password = $w("#password").value;
 
                 wixUsers.login(email,password, {

                 })
 
                 .then( (result) => {
                 console.log("User is logged in");
                 wixLocation.to("/account/my-account");
 
                })
                .catch ( (err) => {
                console.log(err);
                console.log("Your member request is waiting approval from the site owner");
                $w("#pending").show();
 
                });
 

    }else {
        $w("#errorMessage").show();
        console.log("Missing information");
 
         }

   });
});

function login_person () {

 let email = $w("#email").value;
 let password = $w("#password").value;
 
        wixUsers.login(email,password,{
 
        })
        .then( (result) => {
            console.log("User is logged in");
            wixLocation.to("/account/my-account");
 
        })
         .catch ( (err) => {
             console.log(err);
             console.log("Your member request is waiting approval from the site owner");
             $w("#pending").show();
 
         });

}

 export function registerbutton_click(event) {
      $w("#Loginbox").hide();
      $w("#box3").show();
 
   }
2

Hi there :raised_hand_with_fingers_splayed:

This approach is wrong, it’s wrong to assume that whenever the login fails that the user has not been approved , instead, I advice you to send the email to the backend to check the status of that email before trying to login, this way, you can easily tell if the account is pending approval or not, or even if the email doesn’t belong to any account and easily return an error message about that.

Hope that helps~!
Ahmad

3

Ok, I will do it, thanks for help.

4

@rutrodriguez Let me know how it goes.

5

@ahmadnasriya I can’t solve, can you help with an example? I really appreciate it.

6

@rutrodriguez Sure, I’ll write a short example in a minutes …

7

OK … First things first, we need to create a backend function to check if the account is approved or not, and return the answer to the frontend.

// Backend web module: account.jsw
import wixData from 'wix-data';

export function checkAccount(email) {
    return wixData.query('Members/PrivateMembersData').eq('loginEmail', email).find({suppressAuth: true}).then(result => {
        if (result.length > 0) {
            const member = result.items[0];
            const status = member.status.toLowerCase();
            
            if (status === 'active') {
                let response = {
                    type: 'success',
                    code: 200,
                    message: "The account is approved!"
                }
                return response;
            } else if (status === 'applicant') {
                let response = {
                    type: 'success',
                    code: 190,
                    message: "The account is pending approval!"
                }
                return response;
            }
        } else {
            let response = {
                type: 'success',
                code: 404,
                message: "This email doesn't belong to any account"
            }
            return response;
        }
    })
}

The function above will tell you whether the email belong to an account, approved or not.

Now on your login page, import the function above, and call it before attempting to login, and only attempt to login if the email is approved.

import { checkAccount } from 'backend/account.jsw';

$w.onReady(() => {
    
    $w('#loginBtn').onClick(async() => {
        const email = $w('#email').value;
        
        await checkAccount(email).then(result => {
            switch (result.code) {
                case 200:
                    // Attempt to login
                break;                
                case 190:
                    // The account is pending approval
                break;                
                case 404:
                    // The email doesn't belong to any account
                break;
            }            
        })
    })
})

This is a full solution, not just an example, try to learn from it :wink:

Hope this helps~!
Ahmad

8

Thank you very much for the help, I tested the code, Its look like everything works perfect. I really appreciate the help.

508×749 20.8 KB

414×691 18.5 KB

9

Glad that it worked for you :wink: