Custom Login box

Ask the community
,
1

Hi, Im trying to configure a custom Login lightbox, everything works just fine but the only thing is I want to trigger the login button by “Enter” key, It works well except the fact I cant get to solve the pharsing problems in the end of the code.

1280×720 47.9 KB

Here’s my 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 loginNow_click(event) {

let email = $w(“#LoginEmail”).value;
let password = $w(“#LoginPassword”).value;

wixUsers.login(email, password)
.then(() => {
console.log(“User is logged in”);
wixLocation.to(/PaidMembers/${wixUsers.currentUser.id});

}) 

. **catch** ((err) => { 
  console.log(err); 
  $w("#errorMessage").expand();  
});

}
$w.onReady( function () {
$w(“#LoginPassword”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
let email = $w(“#LoginEmail”).value;
let password = $w(“#LoginPassword”).value;

        wixUsers.login(email, password) 
          .then(() => { 
            console.log("User is logged in"); 
            wixLocation.to(`/PaidMembers/${wixUsers.currentUser.id}`); 
            }) 

. **catch** ((err) => { 
  console.log(err); 
  $w("#errorMessage").expand();

Thanks,
Faidda

2

You can’t use that onReady in the middle of your code, it needs to go at the top underneath the imports and used once only.
https://www.wix.com/corvid/reference/$w.html#onReady

As for the end of your code, the red dot indicates an error on that line and the underlined ‘;’ is your error. Simply delete it and see what happens, although you will need to make sure that your code has matching pairs of curly brackets and parentheses, which are () and {}.

The onKeypress api reference.
https://www.wix.com/corvid/reference/$w.TextInputMixin.html#onKeyPress

Take out the second onReady and simply add another export function for the onKeypress event, although this time you will need to make sure that the onKeypress event is clicked in your properties panel for it as you will not be calling the event in your code.

Then simply place your existing code up underneath the onKeypress export function like you have done already for the onClick function and check your code has matching pairs of () and {} etc.

3

Hi, thanks for you quick respond. I did what you say and it looks like its ok. Im just having peoblem with closing the phrase. can you tell me where am I missing brackets?
Thanks.

1280×720 68.3 KB

4

Just have a count through the whole of your code to make sure that you have matching pairs of curly brackets and parentheses.

So you should equal numbers of open { and close } and the same with open ( and close ).

Can’t use just the pic that you have posted as you have not shown what is on the other 28 lines above.

5

Hi. So I did so but I cant get where I left one open. Really appreciate if you can take a quick look
thanks.

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;
$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 loginNow_click(event) {

let email = $w(“#LoginEmail”).value;
let password = $w(“#LoginPassword”).value;
let userId;
let userEmail;
wixUsers.login(email, password)
.then(() => {

        console.log("User is logged in"); 
        wixLocation.to(`/PaidMembers/${wixUsers.currentUser.id}`);

//Change the URL ending to whatever page you want to send the user to after they log in.
})

    . **catch** ((err) => { 
        console.log(err); 
        $w("#errorMessage").expand(); 
    });

}
export function LoginPassword_keyPress(event) {
$w(“#LoginPassword”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
let email = $w(“#LoginEmail”).value;
let password = $w(“#LoginPassword”).value;
wixUsers.login(email, password)
.then(() => {
console.log(“User is logged in”);
wixLocation.to(/PaidMembers/${wixUsers.currentUser.id});
})
. catch ((err) => {
console.log(err);
});
}
}

6

First a few things to correct.

Make your mind up on which function to use.

export function LoginPassword_keyPress(event) {
$w("#LoginPassword").onKeyPress((event, $w) => {

You do not need both of them.

export function LoginPassword_keyPress(event) {

This is the same as the export function for the onClick event and needs the click event to be actioned in the properties panel for that element

$w("#LoginPassword").onKeyPress((event, $w) => {

This is the same as the forgot password click event and has the onClick event written into the code so that you do not need the onClick event to be actioned in the properties panel.

I would recommend that you keep the existing export function so that it is the same as the onClick event above and delete the second onKeypress line instead,

In theory, what you have under the export function onClick should be the same as under the export function onKeypress after the if event key call.

7

Solved! Thanks Really appreciate it!