Log In Lightbox Coding

nrp616 · February 21, 2021, 4:26am

I have created a website for a sorority that requires a log in to access “member only” pages. Among these pages are profile pages for each member.

A year ago I had a college student do some coding in the site Lightbox that would verify the individual’s membership and direct them to their profile page to update. This is how it worked:

User logged in by providing their first name, last name, EMAIL ADDRESS, and a unique 5 digit key code. In addition, the user was required to create a password.
If the first name, last name, email address and key code matched, the user was given access to the member only pages.
When a user successfully logged in, they were immediately directed to their personal profile page to update and submit.

The coding done by the student worked. However, what I learned was that several users were not using the email address in the dataset to log into the site. As a result, they were denied access and could not access the member only pages.

I lost touch with the student, so I have been trying to find a solution on my own. I have decided not to tie the login to an email address, but rather tie it to the semester and year the member joined the sorority. (This information is also in the dataset.) I created new input boxes in the light box and edited the student’s coding to replace the references to “email” with “semester” and added references to “lineyear” where it appeared appropriate. I also made sure the input boxes had a valid selector.

Unfortunately, this simplistic approach is not working. I am not a coder, but have been trying for weeks to figure this out. Any assistance anyone could give is appreciated. If there is additional information you need from me please let me know.

[Edit] Below is an images of the log in Lightbox input boxes, and the code is embedded in a reply message below.

Thanking you in advance.

CODE-NINJA · February 21, 2021, 5:11am

Using pics to show some code is a very bad idea!
Use CODE-TAGs to show your CODE.

ANYBODY will retype all that code from the pic to recunstruct your CODE ! ! ! !
Waste of time!

And as it seems to be you are NOT NEW in CODING, you should normaly know that!

nrp616 · February 21, 2021, 1:52pm

@russian-dima Thank you for the response. I did not know you could use CODE-TAG to show the code. I learn something new everyday.

Here is the CODE

import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
//TODO: write your page related code here…

});

export async function signUp_click(event) {

let semester = $w( “#semester” ).value;
let lineyear = $w( “#lineyear” ).value;
let pass = $w( “#password” ).value;
let secret = $w( “#secretKey” ).value;
let firstName = $w( “#firstName” ).value;
let lastName = $w( “#lastName” ).value;
var loggedIn = false ;
var entry;

let firstQuery = wixData.query( “tnMembers” );

await firstQuery.eq( “first_name” , firstName).and(firstQuery.eq( “married_name” , lastName).or(firstQuery.eq( “maiden_name” , lastName))).find().then((results) => {
if (results === null ) {
$w( “#error” ).text = “Name not recognized” ;
$w( “#error” ).show();
} else {

            entry = results.items[ 0 ];

if (entry.returning !== true ) {
//console.log(parseInt(secret, 10));
//console.log(entry.specialKey);
/$w(“#error”).text = secret + “\n” + entry.specialKey;
$w(“#error”).show();/
if (parseInt(secret, 10 ) === entry.specialKey) {
wixUsers.register(semester, lineyear, pass, {
contactInfo: {
“firstName” : firstName,
“lastName” : lastName,
“semester” : semester,
“lineyear” : lineyear,
“password” : pass
}
});
wixUsers.login(semester, lineyear, pass);
wixWindow.lightbox.close();
loggedIn = true ;
} else {
//$w(“#error”).text = “Secret Key required to register account”;
//$w(“#error”).show();
}
} else {
if (parseInt(secret, 10 ) === entry.specialKey) {
loggedIn = true ;
console.log( “here” );

                    wixUsers.login(semester, lineyear, pass).then(() => {

//loggedIn = true;
wixWindow.lightbox.close();
//loggedIn = true;
console.log( “successful login” );
}). catch ((error) => {
$w( “#error” ).text = “Semester/Line Year/Password Incorrect” ;
$w( “#error” ).show();
})
} else {
$w( “#error” ).text = “Incorrect Secret Key” ;
$w( “#error” ).show();
}

            } 
        } 
    }). **catch** (() => { 
        $w( "#error" ).text =  "Name not recognized" ; 
        $w( "#error" ).show(); 
    }); 

    console.log(entry); 
    console.log(loggedIn);

if (loggedIn === true ) {
//console.log(“got here not working”);
wixLocation.to(/tnmembers/${entry.semester}/${entry.line_year_2Digits}/${entry.line_number}/);
}

}

nrp616 · February 21, 2021, 1:58pm

@russian-dima

If helpful, here is the CODE that worked when “email” was used

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
//TODO: write your page related code here…

});

export async function signUp_click(event) {

let email = $w( “#email” ).value;
let pass = $w( “#password” ).value;
let secret = $w( “#secretKey” ).value;
let firstName = $w( “#firstName” ).value;
let lastName = $w( “#lastName” ).value;
var loggedIn = false ;
var entry;

let firstQuery = wixData.query( “tnMembers” );

await firstQuery.eq( “first_name” , firstName).and(firstQuery.eq( “married_name” , lastName).or(firstQuery.eq( “maiden_name” , lastName))).find().then((results) => {
if (results === null ){
$w( “#error” ).text = “Name not recognized” ;
$w( “#error” ).show();
}
else {

    entry = results.items[ 0 ];

if (entry.returning !== true ) {
//console.log(parseInt(secret, 10));
//console.log(entry.specialKey);
/$w(“#error”).text = secret + “\n” + entry.specialKey;
$w(“#error”).show();/
if (parseInt(secret, 10 ) === entry.specialKey){
wixUsers.register(email, pass, {contactInfo: {
“firstName” : firstName,
“lastName” : lastName,
“email” : email,
“password” : pass
}
});
wixUsers.login(email, pass);
wixWindow.lightbox.close();
loggedIn = true ;
}
else {
//$w(“#error”).text = “Secret Key required to register account”;
//$w(“#error”).show();
}
}
else {
if (parseInt(secret, 10 ) === entry.specialKey){
loggedIn = true ;
console.log( “here” );

            wixUsers.login(email, pass).then(() => {

//loggedIn = true;
wixWindow.lightbox.close();
//loggedIn = true;
console.log( “successful login” );
}). catch ((error) => {
$w( “#error” ).text = “Email/Password Incorrect” ;
$w( “#error” ).show();
})
}
else {
$w( “#error” ).text = “Incorrect Secret Key” ;
$w( “#error” ).show();
}

    } 
    } 
}). catch (() => { 
    $w( "#error" ).text =  "Name not recognized" ; 
    $w( "#error" ).show(); 
}); 

console.log(entry); 
console.log(loggedIn);

if (loggedIn === true ){
//console.log(“got here not working”);
wixLocation.to(/tnmembers/${entry.semester}/${entry.line_year_2Digits}/${entry.line_number}/);
}

//console.log(loggedIn);
//console.log(test);

/* console.log(“now here”);
wixUsers.login(email, pass).then(() => {
wixWindow.lightbox.close();
console.log(“successful login”);
})*/

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

/wixData.query(“tnMembers”).eq(“email_address”, email).find().then((results) => {
if (results.items.length > 0) {
console.log(“email exists”);
}
else {
console.log(“Something went wrong”);
}
})
.catch((error) => {
console.log(“email doesn’t exist”);
})/

/if (secret === “1234”){
wixUsers.login(email, pass)
.then(() => {
console.log(“User logged in.”);
wixWindow.lightbox.close();
//wixLocation.to(“/account/my-account”);
})
.catch((error) => {
console.log(“failed”);
});
}
else {
console.log(“Incorrect Secret Key”);
}/

}

CODE-NINJA · February 23, 2021, 12:38am

Ok, back to you!

You still did not understand completely —> what is a CODE-TAG.

Ok look here, this is a CODE in CODE-TAGs…

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

$w.onReady(function () {
    $w('#signUp').onClick(()=>{
        signUp()
    })
});

async function signUp() {
    let email = $w("#email").value;
    let pass = $w("#password").value;
    let secret = $w("#secretKey").value;
    let firstName = $w("#firstName").value;
    let lastName = $w("#lastName").value;
    let loggedIn = false;
    let entry;
    
    let firstQuery = wixData.query("tnMembers");

 await firstQuery.eq("first_name", firstName)
     .and(firstQuery.eq("married_name", lastName)
     .or(firstQuery.eq("maiden_name", lastName)))
     .find()
     .then((results) => {
         if (results === null){
            $w("#error").text = "Name not recognized";
            $w("#error").show();
         }
         else {entry = results.items[0];
             if (entry.returning !== true) {
                 //console.log(parseInt(secret, 10));
                 //console.log(entry.specialKey);
                 /*$w("#error").text = secret + "\n" + entry.specialKey;
                 $w("#error").show();*/
                 if (parseInt(secret, 10) === entry.specialKey){
                    wixUsers.register(email, pass, {contactInfo: {
                    "firstName": firstName,
                     "lastName": lastName,
                     "email": email,
                     "password": pass
                 }
                });
                wixUsers.login(email, pass);
                wixWindow.lightbox.close();
                loggedIn = true;
            }
 else {.......and so on.......} ......

You should also write a code in a specific structure, like shown in this example.
The better the structure of your code, the more readable it will be later for you and especially for extern coder.
What you want here is already not a little help, it’s already a JOB!

So if you want to hire someone to do your issue, you perhaps should take a look here…

…or find someone here in forum, who could do it for you. You will find more information on every FORUM-USER, when you take a look into his profile.

nrp616 · February 23, 2021, 4:53am

@russian-dima Thank you for your response. I clearly still have a lot to learn.

CODE-NINJA · February 23, 2021, 4:56am

@nrp616
We learn every-day something new

Topic		Replies	Views
Code to allow users to login? Urgent help! Ask the community code , question	0	88	March 26, 2019
Adding code verification for customers to log in Ask the community code , question	0	56	January 17, 2022
How to make a lightbox for members only Ask the community code , wix-members-area , question	3	281	December 15, 2021
Members Only Area/ Login Ask the community code , wix-members-area , question	1	83	August 23, 2020
Custom lightbox login that mis-functions like registration. Why? Ask the community code , wix-members-area , question	5	113	August 27, 2020

Log In Lightbox Coding

Related topics