Check password & login status before submitting WixForm

Ask the community
, , ,
1

I am trying to create a wix form that collects additional info from users and a password to register and log into an account, then redirect the user. The form registers new members and logs in existing members. My problem is that if an existing user enters a wrong password, the form will submit and redirect regardless - is there a way to check if the user logged in successfully before submitting the form?
I want to prevent form submission if the password is incorrect - but it seems like onWixFormSubmit () doesn’t work well with async functions.

$w.onReady(async function () {
  $w(FORM_ID).onWixFormSubmit(registerAndLogIn);
});

async function registerAndLogIn() {
  const email = $w('#email').value;
  const password = $w('#password').value;
  const isMember = await isSiteMember(email);

  // only attempt registration if is not already member
  if (!isMember) {
    try {
      const registered = await wixUsers.register(email, password);
      console.log(`Registered status: ${registered.status}`);
    } catch (error) {
      console.error(`Registration error: ${error}`);
    }
  }
  let loggedIn;
  try {
    await wixUsers.login(email, password);
    loggedIn = true;
  } catch (error) {
    console.error(error);
    loggedIn = false;
  }
  return loggedIn;
}

export function registerForm_wixFormSubmitted() {
  console.log('Form submitted successfully; doing stuff and redirecting.')
  doStuff();
  wixLocation.to(getRedirectPathFromQuery());
}
2

Hi David :raised_hand_with_fingers_splayed:

You should use the onWixFormSubmit( ) event handler to check whether to accept the request or reject it.

$w("#wixForms1").onWixFormSubmit(async ({ fields }) => {
    const email = fields[0].fieldValue;
    const password = fields[1].fieldValue

    try {
        const isNew = isSiteMember();
        if (isNew) {
            await wixUsers.register(email, password);
        } else {
            await wixUsers.login(email, password)
        }
    } catch (err) {
        // If any of the promises above failed, the whole promise will be rejected
        return Promise.reject(err);
    }
});

PS: I do not recommend using WixForms if you have any experience in JavaScript, use custom forms instead, it’s more reliable and flexible.

Hope this helps~!
Ahmad