feat: motd (#361)

sosweetham · web-flow · commit a43502159e3b · 2025-10-13T16:08:47.000+05:30
* feat: motd

* feat: ui

* fix: env var
diff --git a/.env.example b/.env.example
@@ -4,10 +4,13 @@ PUBLIC_PICTIQUE_BASE_URL=your_public_pictique_base_url_here
 # Blabsy Configuration
 PUBLIC_BLABSY_BASE_URL=your_public_blabsy_base_url_here
 
-# Eid Wallet Configuration
+# Eid Wallet & Pictique Configuration (Svelte)
 PUBLIC_REGISTRY_URL=your_public_registry_url_here
 PUBLIC_PROVISIONER_URL=your_public_provisioner_url_here
 
+# Next.js Applications Configuration (eVoting, Blabsy, Group Charter Manager)
+NEXT_PUBLIC_REGISTRY_URL=your_public_registry_url_here
+
 # Neo4j Configuration
 NEO4J_URI=bolt://neo4j:7687
 NEO4J_USER=neo4j
diff --git a/platforms/blabsy/.env.example b/platforms/blabsy/.env.example
@@ -0,0 +1,4 @@
+# Registry URL for fetching motd and other registry services
+# Note: In Next.js, environment variables exposed to the browser must be prefixed with NEXT_PUBLIC_
+NEXT_PUBLIC_REGISTRY_URL=http://localhost:4321
+
diff --git a/platforms/blabsy/src/components/common/maintenance-banner.tsx b/platforms/blabsy/src/components/common/maintenance-banner.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Motd {
+    status: 'up' | 'maintenance';
+    message: string;
+}
+
+export function MaintenanceBanner(): JSX.Element | null {
+    const [motd, setMotd] = useState<Motd | null>(null);
+
+    useEffect(() => {
+        const fetchMotd = async () => {
+            try {
+                const registryUrl = process.env.NEXT_PUBLIC_REGISTRY_URL || 'http://localhost:4321';
+                const response = await axios.get<Motd>(`${registryUrl}/motd`);
+                setMotd(response.data);
+            } catch (error) {
+                console.error('Failed to fetch motd:', error);
+            }
+        };
+
+        void fetchMotd();
+    }, []);
+
+    if (motd?.status !== 'maintenance') {
+        return null;
+    }
+
+    return (
+        <div className='bg-yellow-500 px-4 py-3 text-center text-sm font-medium text-black'>
+            ⚠️ {motd.message}
+        </div>
+    );
+}
+
diff --git a/platforms/blabsy/src/pages/_app.tsx b/platforms/blabsy/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import '@styles/globals.scss';
 import { AuthContextProvider } from '@lib/context/auth-context';
 import { ThemeContextProvider } from '@lib/context/theme-context';
 import { AppHead } from '@components/common/app-head';
+import { MaintenanceBanner } from '@components/common/maintenance-banner';
 import type { ReactElement, ReactNode } from 'react';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
@@ -24,6 +25,7 @@ export default function App({
     return (
         <>
             <AppHead />
+            <MaintenanceBanner />
             <AuthContextProvider>
                 <ThemeContextProvider>
                     {getLayout(<Component {...pageProps} />)}
diff --git a/platforms/eVoting/src/app/layout.tsx b/platforms/eVoting/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { AuthProvider } from "@/lib/auth-context";
+import { MaintenanceBanner } from "@/components/MaintenanceBanner";
 
 export const metadata: Metadata = {
     title: "eVoting Platform",
@@ -18,6 +19,7 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body>
+                <MaintenanceBanner />
                 <AuthProvider>
                     {children}
                 </AuthProvider>
diff --git a/platforms/eVoting/src/components/MaintenanceBanner.tsx b/platforms/eVoting/src/components/MaintenanceBanner.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Motd {
+    status: 'up' | 'maintenance';
+    message: string;
+}
+
+export function MaintenanceBanner() {
+    const [motd, setMotd] = useState<Motd | null>(null);
+
+    useEffect(() => {
+        const fetchMotd = async () => {
+            try {
+                const registryUrl = process.env.NEXT_PUBLIC_REGISTRY_URL || 'http://localhost:4321';
+                const response = await axios.get<Motd>(`${registryUrl}/motd`);
+                setMotd(response.data);
+            } catch (error) {
+                console.error('Failed to fetch motd:', error);
+            }
+        };
+
+        fetchMotd();
+    }, []);
+
+    if (motd?.status !== 'maintenance') {
+        return null;
+    }
+
+    return (
+        <div className="bg-yellow-500 px-4 py-3 text-center text-sm font-medium text-black">
+            ⚠️ {motd.message}
+        </div>
+    );
+}
+
diff --git a/platforms/group-charter-manager/src/app/layout.tsx b/platforms/group-charter-manager/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { AuthProvider } from "@/components/auth/auth-provider";
 import DisclaimerModal from "@/components/disclaimer-modal";
+import { MaintenanceBanner } from "@/components/MaintenanceBanner";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,6 +24,7 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body className={inter.className}>
+                <MaintenanceBanner />
                 <AuthProvider>
                     {children}
                     <Toaster />
diff --git a/platforms/group-charter-manager/src/components/MaintenanceBanner.tsx b/platforms/group-charter-manager/src/components/MaintenanceBanner.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Motd {
+    status: 'up' | 'maintenance';
+    message: string;
+}
+
+export function MaintenanceBanner() {
+    const [motd, setMotd] = useState<Motd | null>(null);
+
+    useEffect(() => {
+        const fetchMotd = async () => {
+            try {
+                const registryUrl = process.env.NEXT_PUBLIC_REGISTRY_URL || 'http://localhost:4321';
+                const response = await axios.get<Motd>(`${registryUrl}/motd`);
+                setMotd(response.data);
+            } catch (error) {
+                console.error('Failed to fetch motd:', error);
+            }
+        };
+
+        fetchMotd();
+    }, []);
+
+    if (motd?.status !== 'maintenance') {
+        return null;
+    }
+
+    return (
+        <div className="bg-yellow-500 px-4 py-3 text-center text-sm font-medium text-black">
+            ⚠️ {motd.message}
+        </div>
+    );
+}
+
diff --git a/platforms/pictique/.env.example b/platforms/pictique/.env.example
@@ -0,0 +1,4 @@
+# Registry URL for fetching motd and other registry services
+# Note: In SvelteKit, public environment variables must be prefixed with PUBLIC_
+PUBLIC_REGISTRY_URL=http://localhost:4321
+
diff --git a/platforms/pictique/src/lib/fragments/MaintenanceBanner/MaintenanceBanner.svelte b/platforms/pictique/src/lib/fragments/MaintenanceBanner/MaintenanceBanner.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import axios from 'axios';
+	import { PUBLIC_REGISTRY_URL } from '$env/static/public';
+
+	let motd = $state<{ status: 'up' | 'maintenance'; message: string } | null>(null);
+
+	onMount(async () => {
+		try {
+			const registryUrl = PUBLIC_REGISTRY_URL || 'http://localhost:4321';
+			const response = await axios.get(`${registryUrl}/motd`);
+			motd = response.data;
+		} catch (error) {
+			console.error('Failed to fetch motd:', error);
+		}
+	});
+</script>
+
+{#if motd?.status === 'maintenance'}
+	<div class="bg-yellow-500 px-4 py-3 text-center text-sm font-medium text-black">
+		⚠️ {motd.message}
+	</div>
+{/if}
diff --git a/platforms/pictique/src/routes/+layout.svelte b/platforms/pictique/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import '../app.css';
 	import { page } from '$app/state';
+	import MaintenanceBanner from '$lib/fragments/MaintenanceBanner/MaintenanceBanner.svelte';
 
 	let { children } = $props();
 
@@ -46,11 +47,14 @@
 		<img src="/images/Logo.svg" alt="logo" />
 	</main>
 {:else}
-	<main
-		class="h-[100dvh] overflow-hidden {page.url.pathname.includes('/profile')
-			? 'px-0'
-			: 'px-4'}  md:px-0"
-	>
-		{@render children()}
-	</main>
+	<div class="flex h-[100dvh] flex-col overflow-hidden">
+		<MaintenanceBanner />
+		<main
+			class="flex-1 overflow-hidden {page.url.pathname.includes('/profile')
+				? 'px-0'
+				: 'px-4'}  md:px-0"
+		>
+			{@render children()}
+		</main>
+	</div>
 {/if}
diff --git a/platforms/registry/motd.json b/platforms/registry/motd.json
@@ -0,0 +1,4 @@
+{
+    "status": "maintenance",
+    "message": "Registry service is down"
+}
diff --git a/platforms/registry/src/index.ts b/platforms/registry/src/index.ts
@@ -1,13 +1,29 @@
 import fastify from "fastify";
 import { generateEntropy, generatePlatformToken, getJWK } from "./jwt";
 import dotenv from "dotenv";
-import path from "path";
+import path from "node:path";
 import { AppDataSource } from "./config/database";
 import { VaultService } from "./services/VaultService";
 import { UriResolutionService } from "./services/UriResolutionService";
 import { KubernetesService } from "./services/KubernetesService";
 import cors from "@fastify/cors";
 
+import fs from "node:fs";
+
+function loadMotdJSON() {
+    const motdJSON = fs.readFileSync(path.resolve(__dirname, "../motd.json"), "utf8");
+    return JSON.parse(motdJSON) as {
+        status: "up" | "maintenance"
+        message: string
+    };
+}
+
+let motd = loadMotdJSON();
+
+fs.watchFile(path.resolve(__dirname, "../motd.json"), (_curr, _prev) => {
+    motd = loadMotdJSON();
+});
+
 dotenv.config({ path: path.resolve(__dirname, "../../../.env") });
 
 const server = fastify({ logger: true });
@@ -55,6 +71,10 @@ const checkSharedSecret = async (request: any, reply: any) => {
     }
 };
 
+server.get("/motd", async (request, reply) => {
+    return motd;
+});
+
 // Create a new vault entry
 server.post(
     "/register",
