Good morning all, I would appreciate some help if possible please
Question:
I have created a custom signup form because we are in need of collecting some specific data at registration.
The form works, it signs the user up and collects the data required, but it does not work smoothly and it does not log the user into the site.
Product:
Wix Website Editor & Velo
What are you trying to achieve:
Currently I am not getting the ‘Member Logged in Success message’, and the user is not being signed in. However they are signed up to wix (I get the notification) and the db insert is made correctly.
What have you already tried:
I think the issue is a bit of a mismatch of code and if I put in the // areas it gives me the success message but then also a failed message saying the user exists, so it looks like I am looping the request.
Additional information:
If you see any other ways for me to be more efficient in the code I am open to ideas. I spend a lot of time scouring this site for ideas and best practices, I am not an expert by far but believe I have a fairly good understanding, but all ideas and help is appreciated.
Screenshot is the logs for the site showing (what I believe) is a success registration, db insert (extra member fields) and finally a successful login.
Last point - I haven’t yet added code to restrict the dates to check if the user is under 13. Any ideas on this welcomed. I tried using the frontend, but couldnt get it to restrict based on dates without having to consistently update it.
Thank you in advance all.
//From Page - Signup Form
import { authentication } from "wix-members.v2";
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(async () => {
//Clear Dropdown
$w("#dropdownclub2").options = []
//Sets up a dropdown for the clubs in a collection
const query = await wixData
.query("OmanBasedClubs")
.ascending("orderby", "title")
.find() // Run the query
.then((results) => {
if (results.items.length > 0) {
let item = (results.items[0]);
for (var i = 0; i < results.items.length; i++) {
let opts = $w('#dropdownclub2').options;
let x = (i).toString();
opts.push({ label: results.items[x].title, value: results.items[x].title });
$w('#dropdownclub2').options = opts;
}
} else {
console.log("No Clubs found");
}
});
})
$w.onReady(function () {
const errormessageReset = () => {
$w("#errormessage").hide();
const reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$/
$w("#passwordconfirminput").onCustomValidation((value, reject) => {
if ($w("#passwordinput").value !== $w("#passwordconfirminput").value) {
$w("#errormessage").text = "Your passwords do not match.";
$w("#errormessage").show();
$w("#signupbutton").disable();
} else {
$w("#passwordinput").onCustomValidation((value, reject) => {
if (!reg.test($w("#passwordinput").value)) {
$w("#errormessage").text = "Your passwords are not validated correctly.";
$w("#errormessage").show();
$w("#signupbutton").disable();
} else {
$w("#signupbutton").enable();
}
});
}
});
}
$w("#emailinput").onChange(errormessageReset);
$w("#passwordinput").onChange(errormessageReset);
$w("#passwordconfirminput").onChange(errormessageReset);
$w("#firstnameinput").onChange(errormessageReset);
$w("#familynameinput").onChange(errormessageReset);
$w("#phoneinput").onChange(errormessageReset);
$w("#codeinput").onChange(errormessageReset);
$w("#currentstatus").onChange(errormessageReset);
$w("#dropdownclub2").onChange(errormessageReset);
$w("#datebirthPicker1").onChange(errormessageReset);
const registerNewmember = () => {
const email = $w("#emailinput").value;
const password = $w("#passwordinput").value;
const passwordconfirm = $w("#passwordconfirminput").value;
const firstname = $w("#firstnameinput").value;
const familyname = $w("#familynameinput").value;
const Pstatus = $w("#currentstatus").value;
const phone = $w("#codeinput").value + $w("#phoneinput").value;
const currentclub = $w("#dropdownclub2").value;
const date = $w('#datebirthPicker1').value; // Get the value from the date picker and convert to date for collection
let dateObject = new Date(date);
authentication.register(email, password)
.then((registrationResult) => {
console.log(registrationResult.member);
//insert to members collection
wixData.query("Members")
.eq("email", email)
.find()
.then((results) => {
if (results.items.length === 0) {
console.log("Inserting Member row");
const toInsert = {
"HOW": "Signup",
"email": email,
"firstName": firstname,
"lastName": familyname,
"phone": phone,
"club": currentclub,
"currentStatus": Pstatus,
"dateofBirth": dateObject.toISOString().substring(0, 10)
//Data.js updates the last record if no new unique ID
};
wixData.insert("Members", toInsert)
.catch((err) => {
console.log(err);
});
console.log("Member inserted", email);
$w("#errormessage").hide();
$w("#successmessage").text = "Member registered successfully";
$w("#successmessage").show();
}
})
.catch((err) => {
console.log(err);
})
authentication.login(email, password)
.then((registrationResult) => {
console.log("Member logged in after signup", registrationResult);
//wixLocation.to("/"); removed currently whilst trying to sort issue
}
)
//Removed next code as it was pulling an error - email already exists - after recieving Member successfully inserted
// .catch((Error) => {
// console.log(Error)
// });
wixWindow.lightbox.close();
}).catch((Error) => {
console.log(Error)
$w("#errormessage").text = "There was an error when registering, please check the form";
$w("#errormessage").show();
})
}
$w("#signupbutton").onClick(registerNewmember);
});```