Added option to set sitename in admin panel

.devcontainer/init-cmd.sh

@@ -6,7 +6,6 @@ set -e
 # cat << EOF > .env
 # DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public
 # ZT_ADDR=${ZT_ADDR}
-# NEXT_PUBLIC_SITE_NAME=${NEXT_PUBLIC_SITE_NAME}
 # EOF
 
 until PGPASSWORD=$POSTGRES_PASSWORD psql -h "$POSTGRES_HOST" -U "$POSTGRES_USER" -c '\q'; do

.github/workflows/main_build.yml

@@ -31,7 +31,6 @@ jobs:
           echo "DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres?schema=public" >> .env
           echo "NEXTAUTH_SECRET=dummy_key" >> .env
           echo "NEXTAUTH_URL=http://localhost:3000" >> .env
-          echo "NEXT_PUBLIC_SITE_NAME=ZTnet" >> .env
           echo "NEXT_PUBLIC_APP_VERSION=" >> .env
           echo "IS_GITHUB_ACTION=true" >> .env
 

.github/workflows/pull_request.yml

@@ -20,7 +20,6 @@ jobs:
           echo "DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres?schema=public" >> .env
           echo "NEXTAUTH_SECRET=dummy_key" >> .env
           echo "NEXTAUTH_URL=http://localhost:3000" >> .env
-          echo "NEXT_PUBLIC_SITE_NAME=ZTnet" >> .env
           echo "NEXT_PUBLIC_APP_VERSION=" >> .env
           echo "IS_GITHUB_ACTION=true" >> .env
 

docs/docs/Installation/FreeBSD.md

@@ -81,7 +81,6 @@ setenv PRISMA_QUERY_ENGINE_LIBRARY /root/prisma-engines/target/release/libquery_
     ```
     DATABASE_URL=postgresql://postgres:postgres@localhost:5432/ztnet?schema=public
     ZT_ADDR=http://127.0.0.1:9993
-    NEXT_PUBLIC_SITE_NAME=ZTnet
     NEXTAUTH_URL="http://ZTNET_Controller_Web_UI_IP_ADDRESS:3000"
     NEXTAUTH_SECRET="random_secret"
     ```

docs/docs/Installation/options.md

@@ -19,7 +19,6 @@ To use these environment variables in a Docker Compose setup, define them in you
 services:
   ztnet:
     environment:
-      NEXT_PUBLIC_SITE_NAME: "ZTNET"
       NEXTAUTH_URL: http://your_server_ip:3000
       # ... other environment variables ...
 ```
@@ -29,18 +28,13 @@ Edit the `.env` file in `/opt/ztnet` to set the environment variables. For examp
 
 ```bash
 DATABASE_URL=postgresql://postgres:postgres@postgres:5432/ztnet?schema=public
-NEXT_PUBLIC_SITE_NAME=ZTNET
 NEXTAUTH_URL=http://your_server_ip:3000
 ```
 
 ## Available Environment options
 
 Configure the application using the following environment variables:
 ### ZTNET Configuration
-- `NEXT_PUBLIC_SITE_NAME`
-  - Description: Site name.
-  - Default: `ZTNET`.
-
 - `HOSTNAME`
   - Description: Hostname of the server. Only available in standalone mode.
   - Default: `0.0.0.0`.

install.ztnet/bash/ztnet.sh

@@ -728,7 +728,6 @@ check_existing_env_handler() {
   # Define default values for variables
   declare -A env_vars=(
     ["NEXTAUTH_SECRET"]=$(openssl rand -hex 32)
-    ["NEXT_PUBLIC_SITE_NAME"]="ZTnet"
     ["NEXTAUTH_URL"]="${server_ip}:3000"
     ["ZT_ADDR"]=
     ["ZT_SECRET"]=
@@ -1000,7 +999,6 @@ NEXT_PUBLIC_APP_VERSION="${CUSTOM_VERSION:-$latestTag}"
 DATABASE_URL="postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@127.0.0.1:5432/$POSTGRES_DB?schema=public"
 set_env_temp_var "DATABASE_URL" "$DATABASE_URL"
 set_env_temp_var "ZT_ADDR" "$ZT_ADDR"
-set_env_temp_var "NEXT_PUBLIC_SITE_NAME" "$NEXT_PUBLIC_SITE_NAME"
 set_env_temp_var "NEXTAUTH_URL" "$NEXTAUTH_URL"
 set_env_temp_var "NEXT_PUBLIC_APP_VERSION" "$NEXT_PUBLIC_APP_VERSION"
 set_env_temp_var "NEXTAUTH_SECRET" "$NEXTAUTH_SECRET"

prisma/migrations/20241215102802_sitename/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "GlobalOptions" ADD COLUMN     "siteName" TEXT NOT NULL DEFAULT 'ZTNET';

prisma/schema.prisma

@@ -20,8 +20,9 @@ enum Role {
 }
 
 model GlobalOptions {
-  id Int @id @default(autoincrement())
-
+  id                    Int     @id @default(autoincrement())
+  // Site
+  siteName              String  @default("ZTNET")
   // Registration
   enableRegistration    Boolean @default(true)
   firstUserRegistration Boolean @default(true) // not in use, will be removed at a later stage

src/__tests__/__mocks__/networkById.ts

@@ -30,6 +30,22 @@ jest.mock("../../utils/api", () => ({
 				}),
 			},
 		},
+		settings: {
+			getAllOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+			getPublicOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+		},
 		networkMember: {
 			getNetworkMemberById: {
 				useQuery: () => ({

src/__tests__/pages/auth/signin.test.tsx

@@ -48,6 +48,22 @@ jest.mock("../../../utils/api", () => ({
 				}),
 			},
 		},
+		settings: {
+			getAllOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+			getPublicOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+		},
 		network: {
 			getUserNetworks: {
 				useQuery: jest.fn(),

src/__tests__/pages/network/[id].test.tsx

@@ -28,6 +28,34 @@ jest.mock("~/server/db", () => ({
 	},
 }));
 
+jest.mock("../../../utils/api", () => {
+	return {
+		api: {
+			settings: {
+				getAllOptions: {
+					useQuery: () => ({
+						data: {},
+						isLoading: false,
+						refetch: jest.fn(),
+					}),
+				},
+				getPublicOptions: {
+					useQuery: () => ({
+						data: {},
+						isLoading: false,
+						refetch: jest.fn(),
+					}),
+				},
+			},
+			network: {
+				getNetworkById: {
+					useQuery: jest.fn(),
+				},
+			},
+		},
+	};
+});
+
 jest.mock("~/components/auth/withAuth", () => ({
 	withAuth: jest.fn().mockImplementation((gssp) => gssp),
 }));
@@ -66,6 +94,7 @@ describe("NetworkById component", () => {
 			refetch: jest.fn(),
 		});
 		api.network.getNetworkById.useQuery = useQueryMock;
+
 		const context = {
 			params: { orgIds: [] } as ParsedUrlQuery,
 			locale: "en",
@@ -351,7 +380,6 @@ describe("NetworkById component", () => {
 		});
 
 		api.network.getNetworkById.useQuery = useQueryMock;
-
 		render(
 			<QueryClientProvider client={queryClient}>
 				<NextIntlClientProvider locale="en" messages={enTranslation}>

src/__tests__/pages/network/index.test.tsx

@@ -15,6 +15,22 @@ jest.mock("../../../utils/api", () => ({
 				useQuery: jest.fn(),
 			},
 		},
+		settings: {
+			getAllOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+			getPublicOptions: {
+				useQuery: () => ({
+					data: {},
+					isLoading: false,
+					refetch: jest.fn(),
+				}),
+			},
+		},
 		network: {
 			getUserNetworks: {
 				useQuery: jest.fn(),

src/components/layouts/header.tsx

@@ -1,10 +1,10 @@
 import { useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
-import { globalSiteTitle } from "~/utils/global";
 import { useSidebarStore } from "~/utils/store";
 import ZtnetLogo from "docs/images/logo/ztnet_200x178.png";
 import Link from "next/link";
 import { forwardRef } from "react";
+import { api } from "~/utils/api";
 
 const Themes = [
 	"light",
@@ -26,6 +26,8 @@ const Header = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
 		const { theme, setTheme } = useTheme();
 		const { toggle, open } = useSidebarStore();
 
+		const { data: globalOptions } = api.settings.getAllOptions.useQuery();
+
 		return (
 			<header
 				ref={ref}
@@ -42,7 +44,7 @@ const Header = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
 								src={ZtnetLogo.src}
 							/>
 							<span className="ml-1 text-2xl font-bold uppercase leading-10 text-accent zt-color">
-								{globalSiteTitle}
+								{globalOptions?.siteName || "ZTNET"}
 							</span>
 						</Link>
 					</div>

src/locales/en/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Application",
+				"description": "Customize the application's appearance and behavior to better align with your brand"
+			},
 			"publicPages": {
 				"sectionTitle": "Public Pages",
 				"description": "Customize the text displayed on your login and registration pages to better align with your brand or provide specific instructions to your users."

src/locales/es/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Aplicación",
+				"description": "Personaliza la apariencia y el comportamiento de la aplicación para alinearla mejor con tu marca"
+			},
 			"publicPages": {
 				"sectionTitle": "Páginas Públicas",
 				"description": "Personaliza el texto que se muestra en tus páginas de inicio de sesión y registro para alinearlo mejor con tu marca o proporcionar instrucciones específicas a tus usuarios."

src/locales/fr/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Application",
+				"description": "Personnalisez l'apparence et le comportement de l'application pour mieux correspondre à votre marque"
+			},
 			"publicPages": {
 				"sectionTitle": "Pages publiques",
 				"description": "Personnalisez le texte affiché sur vos pages de connexion et d'inscription pour mieux correspondre à votre marque ou fournir des instructions spécifiques à vos utilisateurs."

src/locales/no/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Applikasjon",
+				"description": "Tilpass applikasjonens utseende og oppførsel for å bedre tilpasse den til merkevaren din"
+			},
 			"publicPages": {
 				"sectionTitle": "Offentlige Sider",
 				"description": "Tilpass teksten som vises på innloggings- og registreringssidene dine for å bedre samsvare med merkevaren din eller gi spesifikke instruksjoner til brukerne dine."

src/locales/pl/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Aplikacja",
+				"description": "Dostosuj wygląd i zachowanie aplikacji, aby lepiej pasowała do Twojej marki"
+			},
 			"publicPages": {
 				"sectionTitle": "Strony startowe",
 				"description": "Dostosuj tekst wyświetlany na stronach logowania i rejestracji, aby lepiej pasował do Twojej marki lub zapewniał użytkownikom szczegółowe instrukcje."

src/locales/ru/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "Приложение",
+				"description": "Настройте внешний вид и поведение приложения для лучшего соответствия вашему бренду"
+			},
 			"publicPages": {
 				"sectionTitle": "Публичные страницы",
 				"description": "Настройте текст, отображаемый на ваших страницах входа и регистрации, чтобы лучше соответствовать вашему бренду или предоставить специальные инструкции вашим пользователям."

src/locales/zh-tw/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "應用程式",
+				"description": "自訂應用程式的外觀和行為，以更好地符合您的品牌"
+			},
 			"publicPages": {
 				"sectionTitle": "公開頁面",
 				"description": "自訂登入和註冊頁面上顯示的文字，以更好地與您的品牌保持一致或向您的使用者提供具體說明。"

src/locales/zh/common.json

@@ -441,6 +441,10 @@
 	},
 	"admin": {
 		"settings": {
+			"application": {
+				"title": "应用",
+				"description": "自定义应用的外观和行为，以更好地匹配您的品牌"
+			},
 			"publicPages": {
 				"sectionTitle": "公共页面",
 				"description": "自定义登录和注册页面上显示的文本，以更好地与您的品牌保持一致或向您的用户提供具体说明。"

src/pages/admin/index.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "next/router";
 import { LayoutAdminAuthenticated } from "~/components/layouts/layout";
 import Users from "./users";
 import Controller from "./controller";
-import { globalSiteTitle } from "~/utils/global";
 import Mail from "./mail";
 import Notification from "./notification";
 import { useTranslations } from "next-intl";
@@ -13,9 +12,11 @@ import { getServerSideProps } from "~/server/getServerSideProps";
 import useOrganizationWebsocket from "~/hooks/useOrganizationWebsocket";
 import MetaTags from "~/components/shared/metaTags";
 import Link from "next/link";
+import { api } from "~/utils/api";
 
 const AdminSettings = ({ orgIds }) => {
-	const title = `${globalSiteTitle} - Admin Settings`;
+	const { data: globalOptions } = api.settings.getAllOptions.useQuery();
+	const title = `${globalOptions?.siteName} - Admin Settings`;
 
 	const router = useRouter();
 	const { tab = "members" } = router.query;