flush -- WIP admin panel

2019-05-30 14:18:07 +08:00
parent 75af7df7b4
commit 84fb4180c9
53 changed files with 9104 additions and 2 deletions
--- a/include/js/account.js
+++ b/include/js/account.js
@@ -0,0 +1,102 @@
+ 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;
+        }
+
+        let fd = new URLSearchParams(new FormData(this)).toString();
+        axios.request({
+            method: "POST",
+            data: fd,
+            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;
+    }
+}