Hi everyone,
I’ve created a Lightbox (Corvid Custom Login Lightbox) which is working fine however I would like to improve it. I am new to Wix Corvid coding so really need help.
- I would like enterKeyPress function so when the user presses the enter key on keyboard, it should log them into the website.
- I also would like to set onfocus if a user clicks on login but doesn’t enter the username/email/ or password it should set focus on the Email textbox. So basically every time there is an error on login Lightbox, it should focus back to Email textbox.
- When user logs in, it takes it to their account page which is perfectly fine. However when user logs out, it takes them back to the lightbox Login page, how can I redirect it to Homepage please? The logout dropdown box is from Wix and it isn’t something I made so am not sure where to enter the Corvid code? Does it have to be on Site or on Login button under Lightbox?
Some say to set a timer like: wixUsers.logout().setTimout(500); but I don’t really know where to and how to do it. When I added .logout code into Site, .setTimeout(500); it just logs out the user as soon as they login.
- I have setup a Sign up page with form to signup which is working fine however I would like to hide it when user is login. The signup link is on the navigation bar. So in other words, I would like to keep the Signup page viewable for non-members but hide when a member login.
Login Button has the following code (inside the Lightbox):
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
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 password = $w("#password").value;
wixUsers.login(email, 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);
$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.
} );
}
Your kind help will be highly appreciated.
Kindest regards
Jehanzeb
Just do a onKeypress event instead of the onClick event with a setTimeout feature written into it as well.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time
For making the user input element effect options, then you can see the code for it here.
https://www.wix.com/corvid/reference/$w.EffectOptions.html
Now you can simply set it in code that if an user input text element is empty then it does something, you can use the TextInput API as shown here - https://www.wix.com/corvid/reference/$w.TextInput.html
Or you can setup your own custom validation and add those effect options by looking at this tutorial here that you can open up in Wix Editor and view it all setup along with all code too.
https://www.wix.com/corvid/example/custom-validations
https://support.wix.com/en/article/corvid-about-validating-user-input-with-code
Finally, you can also use the already supplied by Wix Editor settings for validations too.
https://support.wix.com/en/article/working-with-user-input-validation-in-the-settings-panel
As for your login and go straight to members account page, have you looked at this tutorial here as it is an easy thing to setup yourself and you can simply change the page from the profile page to the account page instead. - https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
For logout and redirect to somewhere else, that is simple too, just look at this forum post from Steve and it will explain it clearly for you.
https://www.wix.com/corvid/forum/community-discussion/this-is-how-to-logout-and-go-to-the-page-of-your-choice
Finally, as for your signup, then you can either simply create a custom signup lightbox and have your sign up form included on it too.
Otherwise, you can add it to the tutorial linked above about adding the members area and add it to that code so that when the user is logged in then the link is not shown and when the user is not logged in, then the link is shown.
Or you can just add it to your site code tab if it is site wide and just use Wix User API to check if the current user is logged in and hide the link if they are, or show the link if they are not. If it is just shown on certain pages only, then you will only need to add the code to whichever page it is shown on.
https://www.wix.com/corvid/reference/wix-users.html
As for your login lightbox code, you don’t need those top few lines.
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 password = $w("#password").value;
wixUsers.login(email, 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);
$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.
} );
}
If you want your login lightbox to close and reload the same page that it popped up on.
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.
} )
.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.
} );
}
For signup custom lightbox you can do something simple like the code below. You can simply add your user inputs to this if you want to add your signup form to your signup lightbox instead.
This works perfectly and closes after registering details before moving user onto my signup status page, then both names will be saved in contacts and once site member is manually approved the member details will be added to ‘Members’ database.
My ‘Members’ dataset is setup from this tutorial which I have used as a base to work off from for my Members Only page - https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
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.
} );
} );
});
Hi givemeawhisk y, Thank you for your kind and quick reply.
- I wanted a pressing an enter key on the keyboard after user entered their email address and password so they can login without clicking on the Login button using a mouse or trackpad on Macbook.
- onFocus if there is an error For example in my lightbox below, the user did not enter any email or password so the error message came up with “Whoops…please…” I want the trigger function that when error appears, it automatically focuses on User Email Textbox and remove Whoops message.
3. The issue with logout is, I have a Wix made login bar on my website header, the code that you shared is definitely what I want, logout and redirect at the same time but since I have a LoginBar, I cannot find where is the “Logout” so I can add the below code in it?
$w.onReady(() => {
$w("#logoutButton").onClick(logoutAndRedirect);
});
function logoutAndRedirect(event) {
Promise.all( [ wixLocation.to('/'), wixUsers.logout() ] );
}
Many thanks for your kind help.
Kindest regards
Jehanzeb
Firstly, with your submit button on the login lightbox, it looks like you are using the standard submit button that is in the Wix Editor and have used the automatic fail and pass messages that you can activate through that button’s settings.
Now that is fine, however if you are wanting to have something else happen then you need to not connect that submit button to any dataset and use the code that I have used in my own login lightbox where it says
$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.
} );
}
Then as the submit button is not connected to the dataset it will now not show the fail or pass messages and it will show the one that you have added to the code instead, plus the code itself will log the user in so you don’t need to have it connected to dataset, just as long as you have the onClick or onKeypress event turned on in the button’s properties panel etc.
Also, you can use the effect options or the text box options of say focus or blur for example when that error message is expanded.
EffectOptions - Velo API Reference - Wix.com
https://www.wix.com/corvid/reference/$w.TextBox.html
As for the Wix Login Bar, well that is something that is something that I don’t use personally myself.
Even though I have used the Wix tutorial for creating a members profile as a base to work off of for my members only page.
Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com
And I do use the Wix Members app myself and have a My Account page as shown here.
Site Members: Adding and Setting Up a Members Area | Help Center | Wix.com
I don’t use the Wix Login Bar anywhere on my site as you can’t change that to suit yourself as it is technically a Wix Members app addon.
https://support.wix.com/en/article/editing-your-member-login-bar-settings
The only way my users can login and logout is through the login button on my members only page which changes to logout when the user is logged in and changes back to login when the user logs themselves out and it also stays on the same page each time.
So my setup is like this.
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.
} );
} );
});
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_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.
} )
.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.
} );
}
My Members Only page that uses the members profile tutorial as a starting point and it also needs the login lightbox to automatically close and reload the page for the code to start so that the login button changes to logout and all the members only parts of my page are then shown.
If you navigate to another page then you do not need to have the reload option as you will then come back to this page if needed, which will then reload the page code anyway.
It is only needed if you intend to stay on the same page like I do so that the code runs and doesn’t not run so that the user is logged in and nothing changes on the page.
Basically when the user logs themselves in, the lightbox closes and the page is reloaded which drops my footer from being shown at the bottom of the page and also shows all my members bits in the members only strip.
When the users logs themselves back out the page will again change, however this time the code does it itself, with the members only strip being hidden and the footer moving back up the page to be displayed at the bottom of the page again, so that there is no white gap where something should be.
Members Page
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
}
} );
export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}
export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}
export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}
As for the logout part of it, you can simply have a logout button on any of your pages and simply put the code for it into your page tab for whatever page it is on, or if it your logout button is all throughout your site then place it in the site tab.
Although, note that you would not need it on the same page that you have the members page setup like I have as the logout in the code will automatically happen and stay on the same page when the user clicks on logout there.
$w.onReady(() => {
$w("#logoutButton").onClick(logoutAndRedirect);
});
function logoutAndRedirect(event) {
Promise.all( [ wixLocation.to.to('/'), wixUsers.logout() ] );
}
Also, remember that the onKeypress event needs to be on the final user input and not the submit button for it to work.
Although you might still have to incorporate the onClick event function too so that users have the use of either option, especially on mobile devices.
