Add general settings, ombi

host, port, theme, tls are included in general. Page theme changes with
setting. Fixed checkbox support messages. Split some cards into columns.

html/setup2.html

@@ -61,6 +61,57 @@
                     <span class="button ~urge !normal next">{{ .lang.Strings.next }}</span>
                 </section>
             </div>
+            <div class="card ~neutral !low mb-1 unfocused">
+                <span class="heading">{{ .lang.General.title }}</span>
+                <div class="row">
+                    <div class="col">
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.General.listenAddress }}</span>
+                            <input type="url" class="input ~neutral !normal mt-half mb-1" id="ui-host" value="0.0.0.0">
+                        </label>
+                        <label class="row switch">
+                            <input type="checkbox" id="advanced-tls"><span>{{ .lang.General.useHTTPS }}</span>
+                        </label>
+                        <p class="support mb-1">{{ .lang.General.useHTTPSNotice }}</p>
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.General.pathToCertificate }}</span>
+                            <input type="text" class="input ~neutral !normal mt-half mb-1" id="advanced-tls_cert">
+                        </label>
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.General.pathToKeyFile }}</span>
+                            <input type="text" class="input ~neutral !normal mt-half mb-1" id="advanced-tls_key">
+                        </label>
+                    </div>
+                    <div class="col">
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.Strings.port }}</span>
+                            <input type="number" class="input ~neutral !normal mt-half mb-1" id="ui-port" value="8056">
+                        </label>
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.General.httpsPort }}</span>
+                            <input type="number" class="input ~neutral !normal mt-half mb-1" id="advanced-tls_port" value="8057">
+                        </label>
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.General.urlBase }} ({{ .lang.Strings.optional }})</span>
+                            <input type="url" class="input ~neutral !normal mt-half" id="ui-url_base">
+                            <p class="support mb-1">{{ .lang.General.urlBaseNotice }}</p>
+                        </label>
+                        <label class="label">
+                            <span>{{ .lang.Strings.theme }}</span>
+                            <div class="select ~neutral !normal mt-half mb-1">
+                                <select id="ui-theme">
+                                    <option value="Jellyfin (Dark)">{{ .lang.General.darkTheme }}</option>
+                                    <option value="Default (Light)">{{ .lang.General.lightTheme }}</option>
+                                </select>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+                <section class="section ~neutral banner footer flex-expand middle">
+                    <span class="button ~neutral !normal back">{{ .lang.Strings.back }}</span>
+                    <span class="button ~urge !normal next">{{ .lang.Strings.next }}</span>
+                </section>
+            </div>
             <div class="card ~neutral !low mb-1 unfocused">
                 <span class="heading">{{ .lang.Login.title }}</span>
                 <p class="content">{{ .lang.Login.description }}</p>
@@ -98,6 +149,8 @@
             <div class="card ~neutral !low mb-1 unfocused">
                 <span class="heading">{{ .lang.JellyfinEmby.title }}</span>
                 <p class="content">{{ .lang.JellyfinEmby.description }}</p>
+                <div class="row">
+                    <div class="col">
                         <label class="label">
                             <span>{{ .lang.Strings.serverType }}</span>
                             <div class="select ~neutral !normal mt-half">
@@ -113,6 +166,16 @@
                             <input type="text" class="input ~neutral !normal mt-half" id="jellyfin-substitute_jellyfin_strings">
                             <p class="support mb-1">{{ .lang.JellyfinEmby.replaceJellyfinNotice }}</p>
                         </label>
+                        <label class="label">
+                            <span class="mt-half">{{ .lang.Strings.username }}</span>
+                            <input type="text" id="jellyfin-username" class="input ~neutral !normal mt-half mb-1" placeholder="{{ .lang.Strings.username }}">
+                        </label>
+                        <label class="label">
+                            <span>{{ .lang.Strings.password }}</span>
+                            <input type="password" id="jellyfin-password" class="input ~neutral !normal mt-half mb-1" placeholder="{{ .lang.Strings.password }}">
+                        </label>
+                    </div>
+                    <div class="col">
                         <label class="label">
                             <span class="mt-half">{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.internal }})</span>
                             <input type="url" class="input ~neutral !normal mt-half mb-1" id="jellyfin-server" placeholder="http://jellyf.in:80">
@@ -122,14 +185,8 @@
                             <input type="url" class="input ~neutral !normal mt-half" id="jellyfin-public_server" placeholder="https://jellyf.in">
                             <p class="support mb-1">{{ .lang.JellyfinEmby.addressExternalNotice }}</p>
                         </label>
-                <label class="label">
+                    </div>
-                    <span class="mt-half">{{ .lang.Strings.username }}</span>
+                </div>
-                    <input type="text" id="jellyfin-username" class="input ~neutral !normal mt-half mb-1" placeholder="{{ .lang.Strings.username }}">
-                </label>
-                <label class="label">
-                    <span>{{ .lang.Strings.password }}</span>
-                    <input type="password" id="jellyfin-password" class="input ~neutral !normal mt-half mb-1" placeholder="{{ .lang.Strings.password }}">
-                </label>
                 <section class="section ~neutral banner footer flex-expand middle">
                     <span class="button ~neutral !normal back">{{ .lang.Strings.back }}</span>
                     <div>
@@ -138,6 +195,28 @@
                     </div>
                 </section>
             </div>
+            <div class="card ~neutral !low mb-1 unfocused">
+                <span class="heading">{{ .lang.Ombi.title }}</span>
+                <p class="content">{{ .lang.Ombi.description }}</p>
+                <label class="row switch pb-1">
+                    <input type="checkbox" id="ombi-enabled"><span>{{ .lang.Strings.enabled }}</span>
+                </label>
+                <label class="label">
+                    <span class="mt-half">{{ .lang.Strings.serverAddress }}</span>
+                    <input type="url" class="input ~neutral !normal mt-half mb-1" id="ombi-server" placeholder="ombi.jellyf.in">
+                </label>
+                <label class="label">
+                    <span class="mt-half">{{ .lang.Strings.apiKey }}</span>
+                    <input type="text" class="input ~neutral !normal mt-half" id="ombi-api_key">
+                    <p class="support mb-1">{{ .lang.Ombi.apiKeyNotice }}</p>
+                </label>
+                <section class="section ~neutral banner footer flex-expand middle">
+                    <span class="button ~neutral !normal back">{{ .lang.Strings.back }}</span>
+                    <div>
+                        <span class="button ~urge !normal next">{{ .lang.Strings.next }}</span>
+                    </div>
+                </section>
+            </div>
             <div class="card ~neutral !low mb-1 unfocused">
                 <span class="heading">{{ .lang.Email.title }}</span>
                 <p class="content" id="email-description"></p>
@@ -155,8 +234,8 @@
                         </label>
                         <label class="row switch">
                             <input type="checkbox" id="email-no_username"><span>{{ .lang.Email.useEmailAsUsername }}</span>
-                            <p class="support mb-1">{{ .lang.Email.useEmailAsUsernameNotice }}</p>
                         </label>
+                        <p class="support mb-1">{{ .lang.Email.useEmailAsUsernameNotice }}</p>
                         <label class="label">
                             <span class="mt-half">{{ .lang.Email.fromAddress }}</span>
                             <input type="email" class="input ~neutral !normal mt-half mb-1" id="email-address" placeholder="mail@jellyf.in">
@@ -215,7 +294,7 @@
                                 <input type="url" class="input ~neutral !normal mt-half mb-1" id="mailgun-api_url" placeholder="https://api.eu.mailgun.net/v3/mail.jellyf.in/messages">
                             </label>
                             <label class="label">
-                                <span class="mt-half">{{ .lang.Email.mailgunApiKey }}</span>
+                                <span class="mt-half">{{ .lang.Strings.apiKey }}</span>
                                 <input type="text" class="input ~neutral !normal mt-half mb-1" id="mailgun-api_key">
                             </label>
                         </div>

lang.go

@@ -91,9 +91,11 @@ type setupLang struct {
 	Strings            langSection `json:"strings"`
 	StartPage          langSection `json:"startPage"`
 	EndPage            langSection `json:"endPage"`
+	General            langSection `json:"general"`
 	Language           langSection `json:"language"`
 	Login              langSection `json:"login"`
 	JellyfinEmby       langSection `json:"jellyfinEmby"`
+	Ombi               langSection `json:"ombi"`
 	Email              langSection `json:"email"`
 	Notifications      langSection `json:"notifications"`
 	WelcomeEmails      langSection `json:"welcomeEmails"`

lang/admin/de-de.json

@@ -6,7 +6,6 @@
         "invites": "Invites",
         "accounts": "Konten",
         "settings": "Einstellungen",
-        "theme": "Thema",
         "inviteDays": "Tage",
         "inviteHours": "Stunden",
         "inviteMinutes": "Minuten",

lang/admin/en-us.json

@@ -6,7 +6,6 @@
         "invites": "Invites",
         "accounts": "Accounts",
         "settings": "Settings",
-        "theme": "Theme",
         "inviteDays": "Days",
         "inviteHours": "Hours",
         "inviteMinutes": "Minutes",

lang/admin/fr-fr.json

@@ -7,7 +7,6 @@
         "invites": "Invite",
         "accounts": "Comptes",
         "settings": "Reglages",
-        "theme": "Thème",
         "inviteDays": "Jours",
         "inviteHours": "Heures",
         "inviteMinutes": "Minutes",

lang/admin/nl-nl.json

@@ -6,7 +6,6 @@
         "invites": "Uitnodigingen",
         "accounts": "Accounts",
         "settings": "Instellingen",
-        "theme": "Thema",
         "inviteDays": "Dagen",
         "inviteHours": "Uren",
         "inviteMinutes": "Minuten",

lang/common/de-de.json

@@ -8,6 +8,7 @@
         "emailAddress": "E-Mail-Adresse",
         "submit": "Absenden",
         "success": "Erfolg",
-        "error": "Fehler"
+        "error": "Fehler",
+        "theme": "Thema"
     }
 }

lang/common/en-us.json

@@ -8,6 +8,7 @@
         "emailAddress": "Email Address",
         "submit": "Submit",
         "success": "Success",
-        "error": "Error"
+        "error": "Error",
+        "theme": "Theme"
     }
 }

lang/common/fr-fr.json

@@ -9,6 +9,7 @@
         "emailAddress": "Addresse Email",
         "submit": "Soumettre",
         "success": "Succès",
-        "error": "Erreur"
+        "error": "Erreur",
+        "theme": "Thème"
     }
 }

lang/common/nl-nl.json

@@ -8,6 +8,7 @@
         "emailAddress": "E-mailadres",
         "submit": "Verstuur",
         "success": "Success",
-        "error": "Fout"
+        "error": "Fout",
+        "theme": "Thema"
     }
 }

lang/setup/en-us.json

@@ -14,7 +14,8 @@
         "message": "Message",
         "serverAddress": "Server Address",
         "emailSubject": "Email Subject",
-        "URL": "URL"
+        "URL": "URL",
+        "apiKey": "API Key"
     },
     "startPage": {
         "welcome": "Welcome!",
@@ -33,6 +34,19 @@
         "defaultFormLang": "Default account creation language",
         "defaultEmailLang": "Default email language"
     },
+    "general": {
+        "title": "General",
+        "listenAddress": "Listen Address",
+        "urlBase": "URL Base",
+        "urlBaseNotice": "Only needed if using a reverse proxy on a subdomain (e.g 'jellyf.in/accounts').",
+        "lightTheme": "Light",
+        "darkTheme": "Dark",
+        "useHTTPS": "Use HTTPS",
+        "httpsPort": "HTTPS Port",
+        "useHTTPSNotice": "Only recommended if you aren't using a reverse proxy.",
+        "pathToCertificate": "Path to certificate",
+        "pathToKeyFile": "Path to key file"
+    },
     "login": {
         "title": "Login",
         "description": "To access the admin page, you need to login with a method below:",
@@ -52,6 +66,11 @@
         "addressExternalNotice": "Leave blank to use the same address.",
         "testConnection": "Test Connection"
     },
+    "ombi": {
+        "title": "Ombi",
+        "description": "By connecting to Ombi, both a Jellyfin and Ombi account will be created when a user joins through jfa-go. After setup if finished, go to Settings to set a default profile for new ombi users.",
+        "apiKeyNotice": "Find this in the first tab of Ombi settings."
+    },
     "email": {
         "title": "Email",
         "description": "jfa-go can send password reset PINs and various notifications through email. You can connect to an SMTP server, or use the {n} API.",
@@ -65,8 +84,7 @@
         "time24h": "24h Time",
         "time12h": "12h Time",
         "encryption": "Encryption",
-        "mailgunApiURL": "API URL",
+        "mailgunApiURL": "API URL"
-        "mailgunApiKey": "API Key"
     },
     "notifications": {
         "title": "Notifications",

ts/setup.ts

@@ -212,6 +212,10 @@ const settings = {
         "substitute_jellyfin_strings": new Input(get("jellyfin-substitute_jellyfin_strings"))
     },
     "ui": {
+        "host": new Input(get("ui-host")),
+        "port": new Input(get("ui-port")),
+        "url_base": new Input(get("ui-url_base")),
+        "theme": new Select(get("ui-theme")),
         "language-form": new LangSelect("form", get("ui-language-form")),
         "language-admin": new LangSelect("admin", get("ui-language-admin")),
         "jellyfin_login": new BoolRadios("ui-jellyfin_login", "", false, "ui", "jellyfin_login"),
@@ -269,8 +273,34 @@ const settings = {
         "port": new Input(get("smtp-port")),
         "password": new Input(get("smtp-password"))
     },
+    "ombi": {
+        "enabled": new Checkbox(get("ombi-enabled"), "", false, "ombi", "enabled"),
+        "server": new Input(get("ombi-server"), "", "", "enabled", true, "ombi"),
+        "api_key": new Input(get("ombi-api_key"), "", "", "enabled", true, "ombi")
+    },
+    "advanced": {
+        "tls": new Checkbox(get("advanced-tls"), "", false, "advanced", "tls"),
+        "tls_port": new Input(get("advanced-tls_port"), "", "", "tls", true, "advanced"),
+        "tls_cert": new Input(get("advanced-tls_cert"), "", "", "tls", true, "advanced"),
+        "tls_key": new Input(get("advanced-tls_key"), "", "", "tls", true, "advanced")
+    }
 };
 
+(() => {
+    const checkTheme = () => {
+        if (settings["ui"]["theme"].value.includes("Dark")) {
+            document.documentElement.classList.add("dark-theme");
+            document.documentElement.classList.remove("light-theme");
+        } else {
+            document.documentElement.classList.add("light-theme");
+            document.documentElement.classList.remove("dark-theme");
+        }
+    };
+    settings["ui"]["theme"].onchange = checkTheme;
+    checkTheme();
+})();
+
+
 const restartButton = document.getElementById("restart") as HTMLSpanElement;
 const serialize = () => {
     toggleLoader(restartButton);