export async function registerHandler(fields, validateField) {
const usernameMsg = [Link]('email-msg');
let allValid = true;// means assume everything is correct
unless we find a problem
// Validate every field first (username presence only;
availability is checked separately)
[Link](field => {
const isValid = validateField(field);// check each field
using validateFiled function
if (!isValid) {// if the validField function is invalid,
make the form invalid
allValid = false;
// If empty, show red warning
const input = [Link]([Link]);
const msg = [Link]([Link]);
if ([Link]() === "") {
[Link] = `❌ Please fill ${[Link]}`;
[Link] = 'red';
}
}
});
if (!allValid) return; // Stop submission if any field is
invalid
// Replace create account text with a rotating spinner so
user sees progress
const createBtn = [Link]('.js-create-account-
button');
let _origBtnHTML, _origBtnDisabled;
if (createBtn) {
_origBtnHTML = [Link];
_origBtnDisabled = [Link];
[Link] = true;
[Link] = '<svg
xmlns="[Link] width="16" height="16" viewBox="0 0
50 50" style="vertical-align:middle;margin-right:8px;"><path
fill="currentColor" d="M43.935,25.145c0-10.318-8.356-18.686-18.686-
18.686c-10.329,0-18.686,8.368-18.686,18.686h4.068c0-8.07,6.548-
14.617,14.617-14.617
c8.07,0,14.617,6.547,14.617,14.617H43.935z"><animateTransform
attributeType="xml" attributeName="transform" type="rotate" from="0 25
25" to="360 25 25" dur="0.8s"
repeatCount="indefinite"/></path></svg>Processing...';
}
try {
const username =
[Link]('email').[Link]();
const profilePictureFile =
[Link]('pfpInput').files[0];
if (!profilePictureFile) {
const msg = [Link]('profile-error');
if (msg) { [Link] = '❌ Please select a profile
picture'; [Link] = 'red'; }
return;
}
const pwd = [Link]('password').[Link]();
const firstname =
[Link]('fname').[Link]();
const lastname =
[Link]('lname').[Link]();
const age = [Link]('age').[Link]();
const country =
[Link]('country').[Link]();
const confirm =
[Link]('confirm').[Link]();
// Re-check availability right before submit and block if
taken
try {
const r = await
fetch(`[Link]
{encodeURIComponent(username)}`);// checks if username exists among
finalized registrations
if ([Link]) {
const j = await [Link]();
if ([Link]) {// if username exists
[Link] = '❌ username already taken';
[Link] = 'red';
return; // block submission
}
}
} catch (e) {
[Link]('availability check failed', e);
}
try {// send data to backend
const formData = new FormData();
[Link]('user', username);
[Link]('pwd', pwd);
[Link]('profilePicture', profilePictureFile);
[Link]('firstname', firstname);
[Link]('lastname', lastname);
[Link]('age', age);
[Link]('country', country);
[Link]('confirm', confirm);
const res = await
fetch('[Link] {
method: 'POST',
credentials: 'include',// this allows cookies to be
stored and sent
body: formData
});
const json = await [Link]().catch(() => ({}));
if (![Link]) {// if the request or register did not succeed
const msg = [Link]('profile-error');
if (msg) { [Link] = [Link] ||
`Registration failed (${[Link]}).`; [Link] = 'red'; }
return;
}
// Registration succeeded and the verification email was
sent.
// NOTE: the account only becomes a real, loggable-in
account once
// the code below is verified (it currently lives in the
"pending"
// collection, not Registered) - so there's no point trying
to log
// in yet. Just show the verify-code modal.
const verifyModal = [Link]('verifyModal');
if (verifyModal) [Link] = 'flex';
const signupForm = [Link]('signupForm');
if (signupForm) [Link] = 'none';
return json;
} catch (err) {
[Link](err);
}
} finally {
if (createBtn) {
[Link] = _origBtnDisabled;
[Link] = _origBtnHTML;
}
}
}