Custom Login and Registration Lightbox

Ask the community
, ,
1

Fellow Wix Members, Recently I have been having trouble with setting up my custom login/registration lightboxes. I have post lightboxes completed with the look and feel I want along with setting the each inputs correct ID and following the code provided ( https://support.totallycodable.com/en/article/create-custom-log-in-sign-on-screen-using-wix-code ). The only difference between my code is the use of #username ID. I want members to register with a username along with their email and password and log in with it as well. The current issue I am having is when I click the Register button the Lightbox does not close and I do not believe it is registering the user as when I go to the login lightbox and attempt to login it says successful but does not close the lightbox and does not log me in. Any feedback is appreciated.

Current Login Lightbox 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_click(event) {
let email = $w("#email").value;
let username = $w("#username").value;
let password = $w("#password").value;
wixUsers.login(email, username, password)
.then( () => {
console.log("User is logged in");
wixLocation.to("/account/my-account");  //Change the URL ending to whatever page you want to send the user to after they log in.
} )
.catch( (err) => {
console.log(err);
} );
}

Registration Code:

import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#registerButton").onClick( (event) => {
let email = $w("#email").value;
let username = $w("#username").value;
let password = $w("#password").value;
wixUsers.register(email, password, {
contactInfo: {
"email": email,
"username": username
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixWindow.openLightbox("login");
} );
} );
});

Been stuck for a few days and I really want to get my website up. If there is any insight that can be provided it would be much appreciated. I still a beginner when it comes to Wix and all of it functions so please go easy on me. Thank you all for reading.

2

Hi,
I see that the example you are referring to was not created by Wix. The method of custom sign up shown in the example is valid only for the custom registration form.

Note that login() function returns a Promise that resolves when the user with the specified email address and password is logged in. This doesn’t work with the username. See the API reference here .

To take a closer look into it, we will need the link to your editor, the names of the lightboxes.

You can also see a Wix tutorial of how to create a custom login page here .

3

How do I designate a specific page after lightbox submission. I want new members to go to page for membership payment, thanks