+
Account
@@ -1366,7 +1224,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
Username
@@ -1375,7 +1233,7 @@
type="text"
id="admin_username"
name="admin_username"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="enter username"
value="{{ username }}"
pattern="(.*?)"
@@ -1389,7 +1247,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
Password
@@ -1398,7 +1256,7 @@
type="password"
id="admin_password"
name="admin_password"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="enter password"
value="{{ password }}"
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
@@ -1412,7 +1270,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
Confirm Password
@@ -1423,7 +1281,7 @@
type="password"
id="admin_password_check"
name="admin_password_check"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="confirm password"
value="{{ password }}"
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
@@ -1438,7 +1296,7 @@
Settings
@@ -1447,7 +1305,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
UI Host (REVERSE_PROXY_HOST)
@@ -1457,7 +1315,7 @@
id="ui_host"
name="ui_host"
value="{{ ui_host }}"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="http://[hostname](:[port])"
pattern="^https?:\/\/.{1,255}(:((6553[0-5])|(655[0-2][0-9])|(65[0-4][0-9]{2})|(6[0-4][0-9]{3})|([1-5][0-9]{4})|([0-5]{0,5})|([0-9]{1,4})))?$"
required
@@ -1469,7 +1327,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
UI URL (REVERSE_PROXY_URL)
@@ -1478,7 +1336,7 @@
type="text"
id="ui_url"
name="ui_url"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="/admin"
value="{{ random_url }}"
pattern="\/(.*[a-z])"
@@ -1491,7 +1349,7 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
Server name
@@ -1500,7 +1358,7 @@
type="text"
id="server_name"
name="server_name"
- class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+ class="col-span-12 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="www.example.com"
value="www.example.com"
pattern=".*"
@@ -1513,14 +1371,14 @@
class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full"
>
Check server name DN
@@ -1702,27 +1560,25 @@
class Loader {
constructor() {
this.menuContainer = document.querySelector("[data-menu-container]");
- this.logoContainer = document.querySelector("[data-loader]");
+ this.loaderContainer = document.querySelector("[data-loader]");
this.logoEl = document.querySelector("[data-loader-img]");
this.isLoading = true;
this.init();
}
init() {
+ this.loaderContainer.setAttribute("aria-hidden", "false");
this.loading();
window.addEventListener("load", (e) => {
setTimeout(() => {
- this.logoContainer.classList.add("opacity-0");
- }, 350);
+ this.loaderContainer.classList.add("opacity-0");
+ }, 550);
setTimeout(() => {
this.isLoading = false;
- this.logoContainer.classList.add("hidden");
- }, 650);
-
- setTimeout(() => {
- this.logoContainer.remove();
- }, 800);
+ this.loaderContainer.classList.add("hidden");
+ this.loaderContainer.setAttribute("aria-hidden", "true");
+ }, 850);
});
}
@@ -1736,41 +1592,6 @@
}
}
- class FlashMsg {
- constructor() {
- this.delayBeforeRemove = 8000;
- this.init();
- }
-
- //remove flash message after this.delay if exist
- init() {
- window.addEventListener("DOMContentLoaded", () => {
- try {
- const flashEl = document.querySelector("[data-flash-message]");
- setTimeout(() => {
- try {
- flashEl.remove();
- } catch (err) {}
- }, this.delayBeforeRemove);
- } catch (err) {}
- });
-
- window.addEventListener("click", (e) => {
- try {
- if (
- e.target
- .closest("button")
- .hasAttribute("data-close-flash-message")
- ) {
- const closeBtn = e.target.closest("button");
- const flashEl = closeBtn.closest("[data-flash-message]");
- flashEl.remove();
- }
- } catch (err) {}
- });
- }
- }
-
class Checkbox {
constructor() {
this.init();
@@ -1814,16 +1635,25 @@
}
}
- class CheckPassword {
+ class SubmitForm {
constructor() {
this.pwEl = document.querySelector("#admin_password");
this.pwCheckEl = document.querySelector("#admin_password_check");
this.pwAlertEl = document.querySelector("[data-pw-alert]");
this.formEl = document.querySelector("#setup-form");
+ this.servInp = document.querySelector("#server_name");
+ this.sslCheck = document.querySelector("#auto_lets_encrypt");
+ this.urlInp = document.querySelector("#ui_url");
+ this.loaderContainer = document.querySelector("[data-loader]");
+ this.logoEl = document.querySelector("[data-loader-img]");
+ this.loaderMsg = document.querySelector("[data-loader-msg]");
+ this.isLoading = false;
+ this.flashMsg = document.querySelector("[data-flash-message]");
this.init();
}
init() {
+ // Check password to send
this.checkSamePW();
this.pwCheckEl.addEventListener("input", (e) => {
this.checkSamePW();
@@ -1833,47 +1663,131 @@
this.checkSamePW();
});
- // check that password and password check are the same
+ // Case error and display msg
+ window.addEventListener("click", (e) => {
+ try {
+ if (
+ e.target
+ .closest("button")
+ .hasAttribute("data-close-flash-message")
+ ) {
+ this.hideErrMsg();
+ }
+ } catch (err) {}
+ });
+
+ // Submit
this.formEl.addEventListener("submit", (e) => {
+ // Case not same PW
if (this.pwEl.value !== this.pwCheckEl.value)
return e.preventDefault();
+
+ e.preventDefault();
+
+ // Show loader
+ this.showLoader();
+ this.hideErrMsg();
+ // Else, send form and wait for response
+
+ const api = `http${
+ this.sslCheck.getAttribute("aria-checked") === "true" ? "s" : ""
+ }://${this.servInp.value}${this.urlInp.value}`;
+
+ fetch(api, {
+ method: "POST",
+ body: new FormData(this.formEl),
+ })
+ .then((res) => {
+ if (res.status === 200) {
+ setTimeout(() => {
+ window.location.href = api;
+ }, 400);
+ }
+ })
+ .catch((err) => {
+ setTimeout(() => {
+ this.stopLoader();
+ this.showErrMsg();
+ }, 400);
+ });
});
}
checkSamePW() {
if (!this.pwEl.value || !this.pwCheckEl.value)
- return this.hideAlert();
+ return this.hidePWAlert();
- if (this.pwEl.value !== this.pwCheckEl.value) return this.showAlert();
+ if (this.pwEl.value !== this.pwCheckEl.value)
+ return this.showPWAlert();
- return this.hideAlert();
+ return this.hidePWAlert();
}
- hideAlert() {
+ showErrMsg() {
+ this.flashMsg.classList.remove("hidden");
+ this.flashMsg.setAttribute("aria-hidden", "false");
+ }
+
+ hideErrMsg() {
+ this.flashMsg.classList.add("hidden");
+ this.flashMsg.setAttribute("aria-hidden", "true");
+ }
+
+ hidePWAlert() {
this.pwCheckEl.classList.remove(
"focus:!border-red-500",
- "focus:valid:!border-red-500"
+ "focus:valid:!border-red-500",
+ "active:!border-red-500",
+ "active:valid:!border-red-500",
+ "valid:!border-red-500"
);
this.pwAlertEl.classList.add("opacity-0");
this.pwAlertEl.setAttribute("aria-hidden", "true");
}
- showAlert() {
+ showPWAlert() {
this.pwCheckEl.classList.add(
"focus:!border-red-500",
- "focus:valid:!border-red-500"
+ "focus:valid:!border-red-500",
+ "active:!border-red-500",
+ "active:valid:!border-red-500",
+ "valid:!border-red-500"
);
this.pwAlertEl.classList.remove("opacity-0");
this.pwAlertEl.setAttribute("aria-hidden", "false");
}
+
+ showLoader() {
+ this.loaderMsg.textContent = "Setting up...";
+ // Show loader with animation
+ this.loaderContainer.classList.add("opacity-0");
+ setTimeout(() => {
+ this.loaderContainer.classList.remove("hidden");
+ this.loaderContainer.setAttribute("aria-hidden", "false");
+ }, 5);
+ setTimeout(() => {
+ this.loaderContainer.classList.remove("opacity-0");
+ }, 20);
+ }
+
+ stopLoader() {
+ setTimeout(() => {
+ this.loaderContainer.classList.add("opacity-0");
+ }, 350);
+
+ setTimeout(() => {
+ this.isLoading = false;
+ this.loaderContainer.classList.add("hidden");
+ this.loaderContainer.setAttribute("aria-hidden", "true");
+ }, 650);
+ }
}
const setLoader = new Loader();
- const setFlash = new FlashMsg();
const setResume = new Resume();
const setCheck = new Checkbox();
const setStateServ = new ServerCheck();
- const setCheckPW = new CheckPassword();
+ const setSubmit = new SubmitForm();
