admin: add setting to hide background on login

for #288.

config/config-base.json

@@ -274,6 +274,18 @@
                     "value": false,
                     "advanced": true,
                     "description": "Navigate directly to the above URL instead of needing the user to click \"Continue\"."
+                },
+                "login_appearance": {
+                    "name": "Login screen appearance",
+                    "required": false,
+                    "requires_restart": false,
+                    "type": "select",
+                    "options": [
+                        ["clear", "Transparent"],
+                        ["opaque", "Opaque"]
+                    ],
+                    "value": "clear",
+                    "description": "Appearance of the Admin login screen."
                 }
             }
         },

css/base.css

@@ -15,6 +15,9 @@
     --border-width-4: 5px;
     --border-width-8: 8px;
     font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    --bg-light: #fff;
+    --bg-dark: #101010;
 }
 
 .light {
@@ -26,11 +29,11 @@
 }
 
 .dark body {
-    background-color: #101010;
+    background-color: var(--bg-dark);
 }
 
 html:not(.dark) body {
-    background-color: #fff;
+    background-color: var(--bg-light);
 }
 
 .dark select, .dark option, .dark input {

css/modal.css

@@ -10,6 +10,24 @@
     background-color: rgba(0,0,0,40%);
 }
 
+.wall {
+    position: fixed;
+    z-index: 11;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+html.dark .wall {
+    background-color: var(--bg-dark);
+}
+
+html:not(.dark) .wall {
+    background-color: var(--bg-light);
+}
+
 .modal-close {
     float: right;
     color: #aaa;

html/admin.html

@@ -18,6 +18,7 @@
             window.jfAdminOnly = {{ .jfAdminOnly }};
             window.jfAllowAll = {{ .jfAllowAll }};
             window.referralsEnabled = {{ .referralsEnabled }};
+            window.loginAppearance = "{{ .loginAppearance }}";
         </script>
         <title>Admin - jfa-go</title>
         {{ template "header.html" . }}

ts/admin.ts

@@ -163,7 +163,7 @@ window.onpopstate = (event: PopStateEvent) => {
     window.tabs.switch(event.state);
 }
 
-const login = new Login(window.modals.login as Modal, "/");
+const login = new Login(window.modals.login as Modal, "/", window.loginAppearance);
 login.onLogin = () => {
     console.log("Logged in.");
     window.updater = new Updater();

ts/modules/login.ts

@@ -8,13 +8,21 @@ export class Login {
     private _endpoint: string;
     private _onLogin: (username: string, password: string) => void;
     private _logoutButton: HTMLElement = null;
+    private _wall: HTMLElement;
+    private _hasOpacityWall: boolean = false;
 
-    constructor(modal: Modal, endpoint: string) {
+    constructor(modal: Modal, endpoint: string, appearance: string) {
         this._endpoint = endpoint;
         this._url = window.URLBase + endpoint;
         if (this._url[this._url.length-1] != '/') this._url += "/";
 
         this._modal = modal;
+        if (appearance == "opaque") {
+            this._hasOpacityWall = true;
+            this._wall = document.createElement("div");
+            this._wall.classList.add("wall");
+            this._modal.asElement().parentElement.appendChild(this._wall);
+        }
         this._form = this._modal.asElement().querySelector(".form-login") as HTMLFormElement;
         this._form.onsubmit = (event: SubmitEvent) => {
             event.preventDefault();
@@ -86,6 +94,7 @@ export class Login {
                     if (this._onLogin) {
                         this._onLogin(username, password);
                     }
+                    if (this._hasOpacityWall) this._wall.remove();
                     this._modal.close();
                     if (this._logoutButton != null)
                         this._logoutButton.classList.remove("unfocused");

ts/typings/d.ts

@@ -41,6 +41,7 @@ declare interface Window {
     jfAdminOnly: boolean;
     jfAllowAll: boolean;
     referralsEnabled: boolean;
+    loginAppearance: string; 
 }
 
 declare interface Update {

ts/user.ts

@@ -644,7 +644,7 @@ document.addEventListener("details-reload", () => {
     });
 });
 
-const login = new Login(window.modals.login as Modal, "/my/");
+const login = new Login(window.modals.login as Modal, "/my/", "opaque");
 login.onLogin = () => {
     console.log("Logged in.");
     document.querySelector(".page-container").classList.remove("unfocused");

views.go

@@ -176,6 +176,7 @@ func (app *appContext) AdminPage(gc *gin.Context) {
 		"jfAllowAll":       jfAllowAll,
 		"userPageEnabled":  app.config.Section("user_page").Key("enabled").MustBool(false),
 		"referralsEnabled": app.config.Section("user_page").Key("enabled").MustBool(false) && app.config.Section("user_page").Key("referrals").MustBool(false),
+		"loginAppearance":  app.config.Section("ui").Key("login_appearance").MustString("clear"),
 	})
 }