implement account creation

html/admin.html

@@ -178,7 +178,7 @@
             </form>
         </div>
         <div id="notification-box"></div>
-        <div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
+        <div class="page-container">
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
                     <div class="text-neutral-700">

html/form-base.html

@@ -5,6 +5,5 @@
     window.invalidPassword = "{{ .lang.reEnterPasswordInvalid }}";
     window.URLBase = "{{ .urlBase }}";
 </script>
-<script src="js/modal.js"></script>
 <script src="js/form.js" type="module"></script>
 {{ end }}

html/form.html

@@ -13,6 +13,7 @@
                 <span class="button ~urge !normal full-width center supra submit" id="create-success-button">{{ .lang.successContinueButton }}</span>
             </div>
         </div>
+        <div id="notification-box"></div>
         <div class="page-container">
             <div class="card ~neutral !low">
                 <div class="row baseline">
@@ -21,17 +22,24 @@
                 </div>
                 <div class="row">
                     <div class="col">
-                        <form class="card ~neutral !normal" href="">
+                        <form class="card ~neutral !normal" id="form-create" href="">
-                            <label class="label supra" for="create-username">{{ .lang.username }}</label>
+                            <label class="label supra">
-                            <input type="text" class="input ~neutral !high mt-half mb-1" placeholder="{{ .lang.username }}" id="create-username" aria-label="{{ .lang.username }}">
+                                {{ .lang.username }}
+                                <input type="text" class="input ~neutral !high mt-half mb-1" placeholder="{{ .lang.username }}" id="create-username" aria-label="{{ .lang.username }}">
+                            </label>
                             
                             <label class="label supra" for="create-email">{{ .lang.emailAddress }}</label>
-                            <input type="email" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.emailAddress }}" id="create-email" aria-label="{{ .lang.emailAddress }}">
+                            <input type="email" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.emailAddress }}" id="create-email" aria-label="{{ .lang.emailAddress }}" value="{{ .email }}">
                             
                             <label class="label supra" for="create-password">{{ .lang.password }}</label>
                             <input type="password" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.password }}" id="create-password" aria-label="{{ .lang.password }}">
                             
-                            <input type="submit" class="button ~urge !normal full-width center supra submit" value="{{ .lang.createAccountButton }}">
+                            <label class="label supra" for="create-reenter-password">{{ .lang.reEnterPassword }}</label>
+                            <input type="password" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.password }}" id="create-reenter-password" aria-label="{{ .lang.reEnterPassword }}">
+                            <label>
+                                <input type="submit" class="unfocused">
+                                <span class="button ~urge !normal full-width center supra submit">{{ .lang.createAccountButton }}</span>
+                            </label>
                         </form>
                     </div>
                     <div class="col">
@@ -39,11 +47,8 @@
                             <span class="label supra" for="inv-uses">{{ .lang.passwordRequirementsHeader }}</span>
                             <ul>
                                 {{ range $key, $value := .requirements }}
-                                <li class="content" id="{{ $key }}" min="${{ $value }}">
+                                <li class="" id="requirement-{{ $key }}" min="{{ $value }}">
-                                     <span class="badge lg ~positive"><i class="icon ri-check-line"></i></span>
+                                    <span class="badge lg ~positive requirement-valid"></span> <span class="content requirement-content"></span>
-                                </li>
-                                <li class="content" id="{{ $key }}" min="${{ $value }}">
-                                     <span class="badge lg ~critical"><i class="icon ri-close-line"></i></span>
                                 </li>
                                 {{ end }}
                             </ul>

ts/form.ts

@@ -0,0 +1,178 @@
+import { Modal } from "./modules/modal.js";
+import { _post, toggleLoader } from "./modules/common.js";
+
+interface formWindow extends Window {
+    validationStrings: pwValStrings;
+    invalidPassword: string;
+    modal: Modal;
+}
+
+interface pwValString {
+    singular: string;
+    plural: string;
+}
+
+interface pwValStrings {
+    length: pwValString;
+    uppercase: pwValString;
+    lowercase: pwValString;
+    number: pwValString;
+    special: pwValString;
+    [ type: string ]: pwValString;
+}
+
+window.modal = new Modal(document.getElementById("modal-success"));
+declare var window: formWindow;
+
+var defaultPwValStrings: pwValStrings = {
+    length: {
+        singular: "Must have at least {n} character",
+        plural: "Must have a least {n} characters"
+    },
+    uppercase: {
+        singular: "Must have at least {n} uppercase character",
+        plural: "Must have at least {n} uppercase characters"
+    },
+    lowercase: {
+        singular: "Must have at least {n} lowercase character",
+        plural: "Must have at least {n} lowercase characters"
+    },
+    number: {
+        singular: "Must have at least {n} number",
+        plural: "Must have at least {n} numbers"
+    },
+    special: {
+        singular: "Must have at least {n} special character",
+        plural: "Must have at least {n} special characters"
+    }
+}
+
+const form = document.getElementById("form-create") as HTMLFormElement;
+const submitButton = form.querySelector("input[type=submit]") as HTMLInputElement;
+const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
+let usernameField = document.getElementById("create-username") as HTMLInputElement;
+const emailField = document.getElementById("create-email") as HTMLInputElement;
+if (!window.usernameEnabled) { usernameField.parentElement.remove(); usernameField = emailField; }
+const passwordField = document.getElementById("create-password") as HTMLInputElement;
+const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;
+
+const checkPasswords = () => {
+    if (passwordField.value != rePasswordField.value) {
+        rePasswordField.setCustomValidity(window.invalidPassword);
+        submitButton.disabled = true;
+        submitSpan.setAttribute("disabled", "");
+    } else {
+        rePasswordField.setCustomValidity("");
+        submitButton.disabled = false;
+        submitSpan.removeAttribute("disabled");
+    }
+};
+rePasswordField.addEventListener("keyup", checkPasswords);
+passwordField.addEventListener("keyup", checkPasswords);
+
+interface respDTO {
+    [ type: string ]: boolean;
+}
+
+interface sendDTO {
+    code: string;
+    email: string;
+    username: string;
+    password: string;
+}
+
+const create = (event: SubmitEvent) => {
+    event.preventDefault();
+    toggleLoader(submitSpan);
+    let send: sendDTO = {
+        code: window.location.href.split('/').pop(),
+        username: usernameField.value,
+        email: emailField.value,
+        password: passwordField.value
+    };
+    _post("/newUser", send, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            let vals = JSON.parse(req.response) as respDTO;
+            let valid = true;
+            for (let type in vals) {
+                if (requirements[type]) { requirements[type].valid = vals[type]; }
+                if (!vals[type]) { valid = false; }
+            }
+            toggleLoader(submitSpan);
+            if (req.status == 200 && valid) {
+                window.modal.show();
+            } else {
+                submitSpan.classList.add("~critical");
+                submitSpan.classList.remove("~urge");
+                setTimeout(() => {
+                    submitSpan.classList.add("~urge");
+                    submitSpan.classList.remove("~critical");
+                }, 1000);
+            }
+        }
+    });
+};
+
+form.onsubmit = create;
+
+class Requirement {
+    private _name: string;
+    private _minCount: number;
+    private _content: HTMLSpanElement;
+    private _valid: HTMLSpanElement;
+    private _li: HTMLLIElement;
+
+    get valid(): boolean { return this._valid.classList.contains("~positive"); }
+    set valid(state: boolean) {
+        if (state) {
+            this._valid.classList.add("~positive");
+            this._valid.classList.remove("~critical");
+            this._valid.innerHTML = `<i class="icon ri-check-line" title="valid"></i>`;
+        } else {
+            this._valid.classList.add("~critical");
+            this._valid.classList.remove("~positive");
+            this._valid.innerHTML = `<i class="icon ri-close-line" title="invalid"></i>`;
+        }
+    }
+
+    constructor(name: string, el: HTMLLIElement) {
+        this._name = name;
+        this._li = el;
+        this._content = this._li.querySelector("span.requirement-content") as HTMLSpanElement;
+        this._valid = this._li.querySelector("span.requirement-valid") as HTMLSpanElement;
+        this.valid = false;
+        this._minCount = +this._li.getAttribute("min");
+
+        let text = "";
+        if (this._minCount == 1) {
+            text = window.validationStrings[this._name].singular.replace("{n}", "1");
+        } else {
+            text = window.validationStrings[this._name].plural.replace("{n}", ""+this._minCount);
+        }
+        this._content.textContent = text;
+    }
+}
+
+const testStrings = (f: pwValString): boolean => {
+    const testString = (s: string): boolean => {
+        if (s == "" || !s.includes("{n}")) { return false; }
+        return true;
+    }
+    return testString(f.singular) && testString(f.plural);
+}
+
+var requirements: { [category: string]: Requirement} = {};
+
+if (!window.validationStrings) {
+    window.validationStrings = defaultPwValStrings;
+} else {
+    for (let category in window.validationStrings) {
+        if (!testStrings(window.validationStrings[category])) {
+            window.validationStrings[category] = defaultPwValStrings[category];
+        }
+        const el = document.getElementById("requirement-" + category);
+        if (el) {
+            requirements[category] = new Requirement(category, el as HTMLLIElement);
+        } else { console.log(category); }
+    }
+}

ts/typings/d.ts

@@ -59,7 +59,6 @@ declare interface Modals {
     settingsRestart: Modal;
     settingsRefresh: Modal;
     ombiDefaults?: Modal;
-    newAccountSuccess?: Modal;
     profiles: Modal;
     addProfile: Modal;
 }