I am trying to design a simple log in system for my cousin’s website. Can you provide me with any code for this page please? I attach a screen shot of page:
Just follow Nayeli (Code Queen) excellent examples here and you can’t go wrong.
Register
https://www.totallycodable.com/wix/corvid/custom-registration-for-site-login-using-wix-code
https://www.youtube.com/watch?v=QbH8_eudjbE
Login
https://www.totallycodable.com/wix/corvid/create-custom-log-in-sign-on-screen-using-wix-code
Just remember to change your own signup settings for Corvid now.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration
You can also use the Wix Members app
https://support.wix.com/en/site-members/setting-up-a-members-area
Plus, create your own member profile pages too.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
Read here for the three different methods of signup and login for Wix
https://support.wix.com/en/article/about-the-member-signup-form
Thanks for the reply. This is the code I have for the above login page, but there is an error down at the bottom of the code that I can’t figure out:
I am having some trouble with the following linn of code:
$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.
Can anyone help me with this?
As the line says, if you are not going to use an error meseage then delete that line of code.
According to your screenshot, you did not add extra text element to display any possible error. So the code will mark it red because either the element does not exist on the page or the element was not detected by that name.
Do you have an example of the extra text element?
It is already shown in Nayeli’s example for the signup tutorial, it is the pink text underneath the submit button that reads ‘Oops! Check your info and try again.’
If you are wanting to use it then just simply put a text element on your page with your error message in it.
Call it errorMessage as the elements ID name and you won’t need to change the code example, plus don’t forget to set that text element as collapsed on load through the properties panel for it.
Otherwise, as Nayeli says already, just take it out if you don’t need that line.
Further to my query, I have made 2 additions to my layout. See screenshot:
This is the code I am using:
This what the member’s login page looks like:
However when I fill out the email and password to login I get a page error:
Can anyone give me some guidance? Thanks!
You shouldn’t just copy and paste and assume that everything will work correctly, you do actually have to know what is going on too.
As for your error, have you got the Wix Members app installed in your website?
https://support.wix.com/en/article/adding-a-members-area-to-your-site
As currently the line of code in your login lightbox here:
wixLocation.to("/account/my-account");
Is redirecting the now logged in site members to their own My Account through the Wix Members app, which is the page shown in the Wix Members app link above.
Everything that is done through the Wix Members app pages will have the prefix of /account/your-page-name, so for yours it would be yourwebsite/account/my-account.
When you add the Wix Members app to your website, it automatically adds the Wix Members/PrivateMembersData collection.
Velo: Wix Members "PrivateMembersData" Collection Fields | Help Center | Wix.com
As you are trying to redirect your site members to the My Account page, as you don’t have the Wix Members app installed, it will instead try to redirect you to your own data through this Members collection, as you can see in address bar in your error picture and hence why you get the 403 error message.
If you want to redirect the logged in member to another page then simply change that page url to whatever page you want the member to go to, for example:
wixLocation.to(wixLocation.url); //This reloads the same page
//or//
wixLocation.to(`/members-area`);
If you do this tutorial for Wix Member Profile pages, then you will see that all the pages for these dynamic pages are having the prefix of yourwebsite/members/{userID}, although the userID can be changed to another variable if you want it to be different.
Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com
Thanks for the reply. I think I follow your lead and will look at the wix location
Hi Michael. I made a small bit of progress. However when I enter login details, I get another login page instead:
I stil must have an error in the code.
Here is my amended 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 password = $w(“#password”).value;
wixUsers.login(email, password)
.then( () => {
console.log(“User is logged in”);
wixLocation.to(“/member-s-content”); //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.
} );
}
I
The only problem I have with the above code is that when I enter my login details and click the login button on my own custom login page, the wix login page appears. Instead I want the members tologin sucessfully to my member’s content page or get an error message saying login was not suuccessful.
made a small bit of progress. Please see 2 screenshots below:
I stil must have an error in the code.
Here is my amended 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 password = $w(“#password”).value;
wixUsers.login(email, password)
.then( () => {
console.log(“User is logged in”);
wixLocation.to(“/member-s-content”); //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.
} );
}
Yes when you change from the Wix default window to Corvid, you also need to change your member signup settings to suit your different choice too.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration
Hi Michael,
If you have the chance, could you please check this post out too as they are using your code for Wix Stores reviews.
https://www.wix.com/corvid/forum/community-discussion/product-review-issues
Tried linking you to the actual forum post through @Michael Patrick Strauch (MPS), however it wouldn’t let me do it.
@givemeawhisky He does not have an error in his code, per say. He is building this on a Page instead of a Lightbox. Therefore he needs to redirect his login lightbox (selected via the custom wix settings) to auto-redirect to the Page instead. He has been given the copies of the codes, Article and API reference (via this forum and the FB group). He is still unable to understand the process. I advised him it would be better to get private assistance from someone to walk him through the steps if he sill does not understand how to put it all together.
Yes, simply move the login parts to a lightbox and job is easily sorted and done. Or, as said above, have a blank lightbox which will automatically redirect to this login page in the lightboxes onReady function, there shouldn’t be hardly any delay for this latter option.
Plus, we do listen honestly, we know women are always right, well that is what my wife and the mother-in-law keeps telling me
I am sure it is staring me right in the face but I just can’t see it
As already stated, simply move this page to a lightbox along with the code and job is easily sorted and done.
Or, as said above, have a blank lightbox which will automatically redirect to another page in the lightboxes onReady function, there shouldn’t be hardly any delay for this latter option.
Something like this on your blank lightbox page.
$w.onReady( () => {
wixLocation.to(`/yourpageurlhere`);
});
However, you should really have just done the login and the signup process within a lightbox as the Wix Support pages tell you when talking about doing custom login and signup.
Plus, hence the reason why you can only connect your member signup settings to a lightbox when you use the Wix Corvid option in the settings itself.
To enable custom site registration:
-
Add a lightbox to your site.
-
Create a custom registration form in the lightbox using Corvid.
-
Enable custom signup settings:
-
Click Menus & Pages on the left side of the Editor.
-
Click Member Signup.
-
Click Member Signup Form.
-
Click the drop-down menu and select Corvid Form.
-
Select your form from the What does it link to? drop-down menu.