101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
if (document.newacc) {
|
|
// Register
|
|
let form = document.newacc;
|
|
eventListenerInitialize(form, [form.password, form.repeat]);
|
|
$(form.username).on('change', function () {
|
|
let self = this;
|
|
if (!/^[a-z][a-z0-9_-]*$/.test(self.value) || (self.value.length > 20 || self.value == "")) {
|
|
setFieldStatus(self, "error", "請依照格式輸入");
|
|
setFieldLabel(self, "");
|
|
} else {
|
|
setFieldStatus(self, ""); // reset
|
|
setFieldLabel(self, "");
|
|
|
|
axios.request({
|
|
method: "GET",
|
|
url: `ajax/user.php?username=${this.value}`,
|
|
responseType: "json"
|
|
}).then(function (_res) {
|
|
// username exist
|
|
setFieldStatus(self, "error", "此帳號已被使用");
|
|
setFieldLabel(self, "此帳號已被使用");
|
|
}).catch(function (_error) {
|
|
// username not exist
|
|
setFieldStatus(self, "success");
|
|
setFieldLabel(self, "此帳號可以使用");
|
|
});
|
|
}
|
|
});
|
|
} else if (document.editacc) {
|
|
// Manage Profile
|
|
let form = document.editacc;
|
|
eventListenerInitialize(form, [form.new, form.repeat]);
|
|
$(form.new).on('input', function () {
|
|
if (this.value == "") {
|
|
form.repeat.removeAttribute("required");
|
|
setFieldStatus(form.repeat, "", "", false);
|
|
} else {
|
|
form.repeat.setAttribute("required", "required");
|
|
}
|
|
});
|
|
}
|
|
|
|
function eventListenerInitialize (form, inputs) {
|
|
// first is password input, second is repeat input
|
|
inputs.forEach(function (el) {
|
|
$(el).on('input', function (_e) {
|
|
if (inputs[0].value == inputs[1].value && inputs[0].value != "") {
|
|
setFieldStatus(inputs[1], "success");
|
|
} else {
|
|
setFieldStatus(inputs[1], "error", "密碼不正確，請再試一次。");
|
|
}
|
|
});
|
|
});
|
|
|
|
$(form).on('submit', function (e) {
|
|
e.preventDefault();
|
|
if (inputs[0].value != inputs[1].value) {
|
|
inputs[1].setCustomValidity("密碼不正確，請再試一次。");
|
|
inputs[1].focus();
|
|
return undefined;
|
|
}
|
|
|
|
axios.request({
|
|
method: "POST",
|
|
data: new FormData(this),
|
|
url: "account.php",
|
|
headers: {
|
|
'Content-Type': "application/x-www-form-urlencoded"
|
|
}
|
|
}).then(function (res) {
|
|
location.href = res.headers["axios-location"];
|
|
}).catch(function (error) {
|
|
if (error.response) {
|
|
location.href = error.response.headers["axios-location"];
|
|
} else {
|
|
ts('.snackbar').snackbar({
|
|
content: "發送失敗。"
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function setFieldStatus(el, status, validity="", required=true) {
|
|
el.parentElement.className = (required) ? `${status} required field` : `${status} field`;
|
|
el.setCustomValidity(validity);
|
|
}
|
|
|
|
function setFieldLabel(el, text) {
|
|
let sibling = el.nextElementSibling;
|
|
if (sibling.tagName == "SMALL" && text != "") {
|
|
let span = document.createElement('span');
|
|
span.className = "message";
|
|
span.innerText = text;
|
|
el.parentElement.insertBefore(span, sibling);
|
|
} else if (sibling.tagName == "SPAN" && text == "") {
|
|
$(sibling).remove();
|
|
} else if (sibling.tagName != "SMALL") {
|
|
sibling.innerText = text;
|
|
}
|
|
} |