Custom login form

Ask the community
,
4

@morgilady

You just need to put code onto your custom lightbox as like I have done on mine. The forgot password part will link directly to the Wix default forgot password window as that can not be changed currently and you have to stick with it.

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. Change it to your own URL if you want it to go to another page when user is logged in
   } )
    .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.
   } ); 
}

With your ‘Not a member yet? Join today’ line you can simply just link that text element to your custom signup lightbox through the Wix Editor link settings itself.

Signup lightbox code.

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.
      } );     
    } );
    
});

If you add this after the lightbox close line…

   wixWindow.openLightbox("Login");

… instead of using the Wix Location function, then your signup lightbox will close and your login lightbox will open.

This works perfectly for me and closes after registering details before moving user to a set page, then both names will be saved in contacts and once site member is approved the member details will be added to my ‘members’ database.