Merge pull request #118 from nebulabroadcast/custom-login-background

Customizable login background

Author: martastain

backend/api/init/init_request.py

@@ -1,3 +1,5 @@
+import functools
+import os
 from typing import Annotated, get_args
 
 import fastapi
@@ -16,6 +18,12 @@
 from .client_settings import ClientSettingsModel, get_client_settings
 
 
+@functools.cache
+def is_login_background_enabled() -> bool:
+    img_path = f"/mnt/{nebula.config.site_name}_01/.nx/login-background.jpg"
+    return os.path.isfile(img_path)
+
+
 class InitResponseModel(ResponseModel):
     installed: Annotated[
         bool | None,
@@ -33,6 +41,15 @@ class InitResponseModel(ResponseModel):
         ),
     ] = None
 
+    background: Annotated[
+        bool,
+        Field(
+            title="Background",
+            description="Is the login background image enabled?",
+            default_factory=is_login_background_enabled,
+        ),
+    ]
+
     user: Annotated[
         UserModel | None,
         Field(

backend/server/server.py

@@ -174,6 +174,14 @@ async def ws_endpoint(websocket: WebSocket) -> None:
 # API endpoints and the frontend
 #
 
+@app.get("/api/login-background.jpg")
+def login_background() -> FileResponse:
+    """Serve the login background image."""
+    img_path = f"/mnt/{nebula.config.site_name}_01/.nx/login-background.jpg"
+    if os.path.exists(img_path):
+        return FileResponse(img_path, media_type="image/jpeg")
+    return JSONResponse(status_code=404, content={"detail": "File not found"})
+
 
 def install_frontend_plugins(app: FastAPI) -> None:
     for plugin in get_frontend_plugins():

frontend/src/app.jsx

@@ -40,6 +40,7 @@ const App = () => {
         nebula.experimental = response.data.experimental || false;
         nebula.plugins = response.data.frontend_plugins || [];
         nebula.scopedEndpoints = response.data.scoped_endpoints || [];
+        nebula.loginBackground = response.data.background || false;
         nebula.user = response.data.user || {};
         axios.interceptors.response.use(
           (response) => {

frontend/src/pages/LoginPage.jsx

@@ -7,6 +7,8 @@ import NebulaLogo from '/src/svg/logo-wide.svg';
 
 import styled from 'styled-components';
 
+import nebula from '/src/nebula';
+
 import LoadingPage from './LoadingPage';
 
 const LoginContainer = styled.div`
@@ -21,6 +23,10 @@ const LoginContainer = styled.div`
   justify-content: center;
   gap: 12px;
 
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
   small {
     font-size: 0.8em;
     font-style: italic;
@@ -29,7 +35,7 @@ const LoginContainer = styled.div`
 `;
 
 const LoginForm = styled.form`
-  padding: 30px;
+  padding: 40px;
   background-color: var(--color-surface-02);
   border-radius: 12px;
   display: flex;
@@ -41,6 +47,23 @@ const LoginForm = styled.form`
   max-height: 85%;
   position: relative;
 
+  &.glass {
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(10px);
+
+    input,
+    button,
+    a {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+      color: #eee !important;
+
+      &::placeholder {
+        color: #ccc;
+        opacity: 1; /* Firefox */
+      }
+    }
+  }
+
   hr {
     border: none;
     border-top: 1px solid var(--color-surface-04);
@@ -144,10 +167,20 @@ const LoginPage = ({ motd, onLogin, ssoOptions }) => {
     return <LoadingPage />;
   }
 
+  const pageStyle = {};
+  let formClass = null;
+  if (nebula.loginBackground) {
+    pageStyle.backgroundImage = `url(/api/login-background.jpg)`;
+    pageStyle.backgroundPosition = 'center';
+    pageStyle.backgroundRepeat = 'no-repeat';
+    pageStyle.backgroundSize = 'cover';
+    formClass = 'glass';
+  }
+
   return (
-    <main>
+    <main style={pageStyle}>
       <LoginContainer>
-        <LoginForm onSubmit={onSubmit}>
+        <LoginForm onSubmit={onSubmit} className={formClass}>
           <div className="logo-container">
             <img src={NebulaLogo} alt="Nebula" />
           </div>