added ReservedAliasesForm.tsx

public/locales/en-US/translation.json

@@ -279,6 +279,9 @@
         "LogoutRoute": {
             "title": "Log out",
             "description": "We are logging you out..."
+        },
+        "AdminRoute": {
+            "title": "Site configuration"
         }
     },
 
@@ -287,7 +290,8 @@
             "overview": "Overview",
             "aliases": "Aliases",
             "reports": "Reports",
-            "settings": "Settings"
+            "settings": "Settings",
+            "admin": "Admin"
         },
         "AuthenticateRoute": {
             "signup": "Sign up",

src/App.tsx

@@ -24,6 +24,7 @@ import SettingsRoute from "~/routes/SettingsRoute"
 import SignupRoute from "~/routes/SignupRoute"
 import VerifyEmailRoute from "~/routes/VerifyEmailRoute"
 
+import AdminRoute from "~/routes/AdminRoute"
 import I18nHandler from "./I18nHandler"
 import "./init-i18n"
 
@@ -101,7 +102,7 @@ const router = createBrowserRouter([
 					},
 					{
 						path: "/admin",
-						element: <EnterDecryptionPassword />,
+						element: <AdminRoute />,
 					},
 				],
 			},

src/apis/get-admin-users.ts

@@ -0,0 +1,19 @@
+import {client} from "~/constants/axios-client"
+
+export interface GetAdminUsersResponse {
+	users: Array<{
+		id: string
+		email: {
+			id: string
+			address: string
+		}
+	}>
+}
+
+export default async function getAdminUsers(): Promise<GetAdminUsersResponse> {
+	const {data} = await client.get(`${import.meta.env.VITE_SERVER_BASE_URL}/v1/admin/users`, {
+		withCredentials: true,
+	})
+
+	return data
+}

src/apis/get-reserved-aliases.ts

@@ -0,0 +1,23 @@
+import {GetPageData, PaginationResult, ReservedAlias} from "~/server-types"
+import {client} from "~/constants/axios-client"
+
+export interface GetReservedAliasesData extends GetPageData {
+	query?: string
+}
+
+export default async function getReservedAliases({
+	query,
+	size,
+	page,
+}: GetReservedAliasesData = {}): Promise<PaginationResult<ReservedAlias>> {
+	const {data} = await client.get(`${import.meta.env.VITE_SERVER_BASE_URL}/v1/reserved-alias/`, {
+		withCredentials: true,
+		params: {
+			query,
+			size,
+			page,
+		},
+	})
+
+	return data
+}

src/apis/index.ts

@@ -38,3 +38,7 @@ export * from "./delete-report"
 export {default as deleteReport} from "./delete-report"
 export * from "./get-me"
 export {default as getMe} from "./get-me"
+export * from "./get-admin-users"
+export {default as getAdminUsers} from "./get-admin-users"
+export * from "./get-reserved-aliases"
+export {default as getReservedAliases} from "./get-reserved-aliases"

src/route-widgets/AdminPage/ReservedAliasesForm.tsx

@@ -0,0 +1,17 @@
+import {ReactElement} from "react"
+import {AxiosError} from "axios"
+
+import {useQuery} from "@tanstack/react-query"
+
+import {GetAdminUsersResponse, getAdminUsers} from "~/apis"
+
+export interface ReservedAliasesFormProps {}
+
+export default function ReservedAliasesForm({}: ReservedAliasesFormProps): ReactElement {
+	const {data: {users} = {}} = useQuery<GetAdminUsersResponse, AxiosError>(
+		["getAdminUsers"],
+		getAdminUsers,
+	)
+
+	console.log(users)
+}

src/routes/AdminRoute.tsx

@@ -1,15 +1,26 @@
-import {ReactElement, useLayoutEffect} from "react";
-import {useNavigateToNext, useUser} from "~/hooks";
+import {ReactElement, useLayoutEffect} from "react"
+import {useTranslation} from "react-i18next"
+
+import {SimplePageBuilder} from "~/components"
+import {useNavigateToNext, useUser} from "~/hooks"
+import ReservedAliasesForm from "~/route-widgets/AdminPage/ReservedAliasesForm"
+import ReservedAliasesList from "~/route-widgets/AdminPage/ReservedAliasesList"
 
 export default function AdminRoute(): ReactElement {
-    const navigateToNext = useNavigateToNext();
-    const user = useUser();
-
-    useLayoutEffect(() => {
-        if (!user.isAdmin) {
-            navigateToNext();
-        }
-    }, [user.isAdmin, navigateToNext])
+	const {t} = useTranslation()
+	const navigateToNext = useNavigateToNext()
+	const user = useUser()
 
+	useLayoutEffect(() => {
+		if (!user.isAdmin) {
+			navigateToNext()
+		}
+	}, [user.isAdmin, navigateToNext])
 
+	return (
+		<SimplePageBuilder.Page title={t("routes.AdminRoute.title")}>
+			<ReservedAliasesList />
+			<ReservedAliasesForm />
+		</SimplePageBuilder.Page>
+	)
 }

src/server-types.ts

@@ -101,6 +101,16 @@ export interface Alias {
 	prefExpandUrlShorteners: boolean | null
 }
 
+export interface ReservedAlias {
+	id: string
+	domain: string
+	local: string
+	users: Array<{
+		id: string
+		email: string
+	}>
+}
+
 export interface AliasNote {
 	version: "1.0"
 	data: {