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"),
})
}