From 9956bbd974149db9d515a2737743ff1fe50c2839 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Mon, 2 Oct 2023 10:34:07 +0100 Subject: [PATCH] admin: add setting to hide background on login for #288. --- config/config-base.json | 12 ++++++++++++ css/base.css | 7 +++++-- css/modal.css | 18 ++++++++++++++++++ html/admin.html | 1 + ts/admin.ts | 2 +- ts/modules/login.ts | 11 ++++++++++- ts/typings/d.ts | 1 + ts/user.ts | 2 +- views.go | 1 + 9 files changed, 50 insertions(+), 5 deletions(-) diff --git a/config/config-base.json b/config/config-base.json index 01c4852..c0c59ff 100644 --- a/config/config-base.json +++ b/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." } } }, diff --git a/css/base.css b/css/base.css index 2c60e94..9519951 100644 --- a/css/base.css +++ b/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 { diff --git a/css/modal.css b/css/modal.css index ef6536e..11a0e27 100644 --- a/css/modal.css +++ b/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; diff --git a/html/admin.html b/html/admin.html index 4cd41d7..3c7ae1b 100644 --- a/html/admin.html +++ b/html/admin.html @@ -18,6 +18,7 @@ window.jfAdminOnly = {{ .jfAdminOnly }}; window.jfAllowAll = {{ .jfAllowAll }}; window.referralsEnabled = {{ .referralsEnabled }}; + window.loginAppearance = "{{ .loginAppearance }}"; Admin - jfa-go {{ template "header.html" . }} diff --git a/ts/admin.ts b/ts/admin.ts index f29fe2b..2fe99c7 100644 --- a/ts/admin.ts +++ b/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(); diff --git a/ts/modules/login.ts b/ts/modules/login.ts index 1527e10..12e6aba 100644 --- a/ts/modules/login.ts +++ b/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"); diff --git a/ts/typings/d.ts b/ts/typings/d.ts index 9aed65d..8d97410 100644 --- a/ts/typings/d.ts +++ b/ts/typings/d.ts @@ -41,6 +41,7 @@ declare interface Window { jfAdminOnly: boolean; jfAllowAll: boolean; referralsEnabled: boolean; + loginAppearance: string; } declare interface Update { diff --git a/ts/user.ts b/ts/user.ts index 00b105c..f8e4e2b 100644 --- a/ts/user.ts +++ b/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"); diff --git a/views.go b/views.go index f1f7fdd..f388c35 100644 --- a/views.go +++ b/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"), }) }