Custom login form

Ask the community
,
1

Hi there,

I’ve created a lightbox with a custom login form:

1881×914 238 KB

Now I’m trying to add an error message that will show up in case the user types incorrect email or password. So i’ve added a text with the ID “errorText” and checked the ‘collapsed on load’ box. Just a little thing I’m missing - the code :slight_smile:

I don’t really have an idea how to code it - any help here?

2

Hi Mor,

you can use the catch function that will execute if the login fails.
then if the login fails you simply expand you errortext item.

function loginFunction(){
$w(‘#loginNow’).onClick(()=>{
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.login(email, password)
.then(()=>{
wixWindow.lightbox.close();
})
. catch (()=>{
$w(‘#errorText’).expand();
})
})
}

3

Yesss thank you so much!! i’ve been stuck on it for days…

any chance you also know or can refer me to an example on how to set up a reset password page/lightbox which I can link from this custom form?

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.

5

@givemeawhisky Wow thank you so much for your answer! that helped me a lot!

My sign up form should be different though, since it’s gonna be a paid subscription site - all users should pay in order to become members. I need to create a sign up form with recurring payments.
I’m trying to follow this example https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-stripe-payment-processing - it’s not exactly what I need but I can probably use parts of it. If you have any other idea or can refer me to something that can help me with that it would be just awesome!

Thank you

6

@morgilady
You should have a look at using Wix Paid Plans.
https://support.wix.com/en/paid-plans/setting-up-paid-plans

Plus, you can use Wix Users API to get the current users plan and do whatever you want etc.
https://www.wix.com/corvid/reference/wix-users.User.html#getPricingPlans

Something like this.

import wixUsers from 'wix-users';

$w.onReady(function () {

let user = wixUsers.currentUser;
let userId = user.id;
let isLoggedIn = user.loggedIn;

user.getPricingPlans()
.then( (pricingPlans) => {
let firstPlan = pricingPlans[0];
let planName = firstPlan.name;

if (planName === "Basic Plan") {
$w("#eventtype").disable();
$w("#specialrequests").disable();
$w("#errormessage1").show();
}
else {
$w("#eventtype").enable();
$w("#specialrequests").enable();
$w("#errormessage1").hide();
}}
)}
)
7

See more here too.
https://www.wix.com/corvid/reference/wix-paid-plans.html
https://www.wix.com/corvid/reference/wix-paid-plans-backend.html
https://support.wix.com/en/article/corvid-tutorial-using-the-paid-plans-api-to-customize-ordering-and-payment

8

@givemeawhisky Yes I know the paid plan app. My main problem with it is that it requires users to sign up first in order to register for a paid plan (am I right?). This complicates the process. since I have some free content (doesn’t require users to sign up) and members only content (all members are paying), I’m trying to create something simpler that requires the user to sign up and pay with one step.

9

Yes you are right.
A logged-in site visitor selects a membership plan by clicking the plan or a button. (If the visitor is not logged-in, the sign up page is displayed.)

This way you have full control over all of your members and you can always limit your members only pages to certain users on different paid plans.
https://support.wix.com/en/article/limiting-site-pages-to-paying-members-using-the-paid-plans

You can obviously just keep the free info on pages that are open to all users and so keep your free content open to all, whilst keeping the member info behind the paid plan pages.

However doing it through Wix Paid Plans app gives the user the opportunity to sign up as a site member and then let them either do a trial plan to test your site or to choose the specific plan that they require, or you can create a free plan that they can be on until they cancel the plan or upgrade to a new plan to access content that can’t be viewed under the free plan.