feat(onboarding): frontend for onboarding users

frontend/src/context/AuthContext/AuthContext.tsx

@@ -18,7 +18,7 @@ type Props = {
 // Provide a context for whole app to notify user is authorized or not
 export const AuthProvider = ({ children }: Props): JSX.Element => {
   const { isLoading } = useGetAuthToken();
-  const { pathname, push } = useRouter();
+  const { pathname, push, asPath } = useRouter();
   const [isReady, setIsReady] = useToggle(false);
 
   useEffect(() => {
@@ -26,7 +26,7 @@ export const AuthProvider = ({ children }: Props): JSX.Element => {
     if (!isLoading) {
       // not a public path and not authenticated kick to login page
       if (!publicPaths.includes(pathname) && !isLoggedIn()) {
-        push("/login").then(() => {
+        push({ pathname: "/login", query: { redirect: asPath } }).then(() => {
           setIsReady.on();
         });
       } else {
@@ -40,7 +40,12 @@ export const AuthProvider = ({ children }: Props): JSX.Element => {
   if (isLoading || !isReady) {
     return (
       <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
-        <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" />
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="infisical loading indicator"
+        />
       </div>
     );
   }

frontend/src/context/ServerConfigContext/ServerConfigContext.tsx

@@ -0,0 +1,53 @@
+import { createContext, ReactNode, useContext, useEffect, useMemo } from "react";
+import { useRouter } from "next/router";
+
+import { ContentLoader } from "@app/components/v2/ContentLoader";
+import { useGetServerConfig } from "@app/hooks/api";
+import { TServerConfig } from "@app/hooks/api/admin/types";
+
+type TServerConfigContext = {
+  config: TServerConfig;
+};
+
+const ServerConfigContext = createContext<TServerConfigContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
+  const router = useRouter();
+  const { data, isLoading } = useGetServerConfig();
+
+  // memorize the workspace details for the context
+  const value = useMemo<TServerConfigContext>(() => {
+    return {
+      config: data!
+    };
+  }, [data]);
+
+  useEffect(() => {
+    if (!isLoading && data && !data.initialized) {
+      router.push("/admin/signup");
+    }
+  }, [isLoading, data]);
+
+  if (isLoading || (!data?.initialized && router.pathname !== "/admin/signup")) {
+    return (
+      <div className="bg-bunker-800">
+        <ContentLoader text="Loading configurations" />
+      </div>
+    );
+  }
+
+  return <ServerConfigContext.Provider value={value}>{children}</ServerConfigContext.Provider>;
+};
+
+export const useServerConfig = () => {
+  const ctx = useContext(ServerConfigContext);
+  if (!ctx) {
+    throw new Error("useServerConfig has to be used within <UserContext.Provider>");
+  }
+
+  return ctx;
+};

frontend/src/context/ServerConfigContext/index.tsx

@@ -0,0 +1 @@
+export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";

frontend/src/context/index.tsx

@@ -14,6 +14,7 @@ export {
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";
+export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
 export { SubscriptionProvider, useSubscription } from "./SubscriptionContext";
 export { UserProvider, useUser } from "./UserContext";
 export { useWorkspace, WorkspaceProvider } from "./WorkspaceContext";