Custom Login code not working

Ask the community
, , ,
1

I have a lightbox I am trying to get working for a custom login. Everything else is working fine. I have a login button on my header which will switch from login to logout depending on if the user is logged in. Clicking it brings you to the lightbox, which I can’t figure out how to get right.

I’m a beginner to JS, but this is what I would like to have happen in shorthand. Please see the attached image for a reference.

My user input elements are:
#loginEmail
#loginPassword
#submitButton
My error texts are:
#textNoInput - when any of the inputs are blank
#textNoMatch - when there’s no such email
#textWrongPass - when the user has input the wrong password
I have a database named “Members”

—attempted code—

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

export function submitButton_click(event) {
    if $w("#loginEmail") and/or $w("#loginPassword") are blank {    
       $w("#textNoInput").show();
       // this is validating the input field
       // if the input field is blank > show an error by
       // showing a hidden text

    } else {
      wixData.query('Members')
        .eq('email', $w("#loginEmail").value)
        .find()
        // this searches the database table for the entered email
        // if it finds an email in the "email" column
        // then it runs the next if loop
        
 .then(results => {
      if (results.length === 0) {
             $w("#textNoMatch").show();
             //  if email does not match whats in the DB. show message
      } else if the email matches {
      verify "#loginPassword" matches the password associated with the ID.
             if password matches {
             wixUsers.login($w("#loginEmail"), $w("#loginPassword"))
             wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
             //logs the user in, and sends them to their members page
             } else { 
                  $w("#textWrongPass").show();
                  //displays error that the password is incorrect.
                  User must try to input again
                  }
       }
   });

I’m trying to not store the users password in the database collection

— in English (if my code above just isn’t readable)—

user hits login button
checks to see if there’s anything blank in the user input
if anything is blank, display a general message asking the user to completely fill in the above
otherwise, check to see if the email they entered matches what is in the database
if the email does not match, display message saying no such account exists
if it matches, get the password tied to the user ID associated with the email
compare that password with what the user has entered in the password input field
if it matches, log the user in and bring them to their members page
otherwise, show a message saying that the password is wrong.
user can keep trying until it’s right.

700×541 63.1 KB

Please and thank you for any feedback :slight_smile:

2

On login I would not be searching a database to see if their email exists I would just try to log in the user with their email and password, if the login is unsuccessful just display a message like “account not found, check your email and password is correct”. Have you registered users already prior to login using wixUsers.register, do you have member listed in the CRM ?

3

That seems much less complicated. Let me try to work on what you said above and post any problems I run into with it