chore: update admin signup journey

frontend/locales/en.json

@@ -18,7 +18,8 @@
     "sign-in": "Sign in",
     "sign-up": "Sign up",
     "sign-out": "Sign out",
-    "create-your-account": "Create your account"
+    "create-your-account": "Create your account",
+    "host-tip": "You are registering as Admin."
   },
   "analytics": {
     "self": "Analytics",

frontend/web/src/App.tsx

@@ -1,25 +1,21 @@
 import { useColorScheme } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import DemoBanner from "@/components/DemoBanner";
-import { useUserStore, useWorkspaceStore } from "@/stores";
+import { useWorkspaceStore } from "@/stores";
+import useNavigateTo from "./hooks/useNavigateTo";
 
 function App() {
+  const navigateTo = useNavigateTo();
   const { mode: colorScheme } = useColorScheme();
-  const userStore = useUserStore();
   const workspaceStore = useWorkspaceStore();
-  const [loading, setLoading] = useState(true);
 
+  // Redirect to sign up page if no instance owner.
   useEffect(() => {
-    (async () => {
+    if (!workspaceStore.profile.owner) {
-      try {
+      navigateTo("/auth/signup");
-        await Promise.all([workspaceStore.fetchWorkspaceProfile(), workspaceStore.fetchWorkspaceSetting(), userStore.fetchCurrentUser()]);
+    }
-      } catch (error) {
+  }, [workspaceStore.profile]);
-        // Do nothing.
-      }
-      setLoading(false);
-    })();
-  }, []);
 
   useEffect(() => {
     const styleEl = document.createElement("style");
@@ -61,13 +57,11 @@ function App() {
     }
   }, [colorScheme]);
 
-  return !loading ? (
+  return (
     <>
       <DemoBanner />
       <Outlet />
     </>
-  ) : (
-    <></>
   );
 }
 

frontend/web/src/layouts/CommonContextProvider.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { useUserStore, useWorkspaceStore } from "@/stores";
+
+interface Context {}
+
+const CommonContext = createContext<Context>({});
+
+const CommonContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const workspaceStore = useWorkspaceStore();
+  const userStore = useUserStore();
+  const [commonContext, setCommonContext] = useState<Context>({});
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        await Promise.all([workspaceStore.fetchWorkspaceProfile(), workspaceStore.fetchWorkspaceSetting(), userStore.fetchCurrentUser()]);
+      } catch (error) {
+        // Do nothing.
+      }
+      setInitialized(true);
+    })();
+  }, []);
+
+  return (
+    <CommonContext.Provider
+      value={{
+        ...commonContext,
+        setLocale: (locale: string) => setCommonContext({ ...commonContext, locale }),
+        setAppearance: (appearance: string) => setCommonContext({ ...commonContext, appearance }),
+      }}
+    >
+      {!initialized ? null : <>{children}</>}
+    </CommonContext.Provider>
+  );
+};
+
+export const useCommonContext = () => {
+  return useContext(CommonContext);
+};
+
+export default CommonContextProvider;

frontend/web/src/main.tsx

@@ -5,6 +5,7 @@ import { RouterProvider } from "react-router-dom";
 import "./css/index.css";
 import "./css/joy-ui.css";
 import "./i18n";
+import CommonContextProvider from "./layouts/CommonContextProvider";
 import router from "./routers";
 
 const container = document.getElementById("root");
@@ -12,7 +13,9 @@ const root = createRoot(container as HTMLElement);
 
 root.render(
   <CssVarsProvider>
-    <RouterProvider router={router} />
+    <CommonContextProvider>
+      <RouterProvider router={router} />
+    </CommonContextProvider>
     <Toaster position="top-center" />
   </CssVarsProvider>,
 );

frontend/web/src/pages/SignUp.tsx

@@ -113,12 +113,16 @@ const SignUp: React.FC = () => {
               </Button>
             </div>
           </form>
-          <p className="w-full mt-4 text-sm">
+          {!workspaceStore.profile.owner ? (
-            <span className="dark:text-gray-500">{"Already has an account?"}</span>
+            <p className="w-full mt-4 text-sm font-medium dark:text-gray-500">{t("auth.host-tip")}</p>
-            <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth" unstable_viewTransition>
+          ) : (
-              {t("auth.sign-in")}
+            <p className="w-full mt-4 text-sm">
-            </Link>
+              <span className="dark:text-gray-500">{"Already has an account?"}</span>
-          </p>
+              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth" unstable_viewTransition>
+                {t("auth.sign-in")}
+              </Link>
+            </p>
+          )}
         </div>
       </div>
     </div>