feat: add config for admin folder

Dockerfile.dev

@@ -3,7 +3,7 @@ FROM node:18-alpine3.18 as ui-builder
 RUN apk add --no-cache make
 WORKDIR /app
 
-COPY ui ./ui
+COPY web/apps/admin-ui ./web/apps/admin-ui
 COPY Makefile .
 RUN make ui
 
@@ -16,7 +16,7 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
-COPY --from=ui-builder /app/ui/dist /app/ui/dist
+COPY --from=ui-builder /app/web/apps/admin-ui/dist /app/web/apps/admin-ui/dist
 
 RUN make build
 

Makefile

@@ -8,7 +8,7 @@ PROTON_COMMIT := "4144445eb0f9cbd1a801a3d0aa5cfce4cc0ea551"
 
 ui:
 	@echo " > generating ui build"
-	@cd ui && $(MAKE) build
+	@cd web/apps/admin-ui && $(MAKE) build
 
 install:
 	@echo "Clean up imports..."
@@ -31,7 +31,7 @@ lint-fix:
 	golangci-lint run --fix
 
 test: ## Run tests
-	@go test -race $(shell go list ./... | grep -v /ui | grep -v /vendor/ | grep -v /test/ | grep -v /mocks | grep -v postgres/migrations | grep -v /proto) -coverprofile=coverage.out -count 2 -timeout 150s
+	@go test -race $(shell go list ./... | grep -v /web/apps/admin-ui | grep -v /vendor/ | grep -v /test/ | grep -v /mocks | grep -v postgres/migrations | grep -v /proto) -coverprofile=coverage.out -count 2 -timeout 150s
 
 test-all: lint test e2e-test ## Run all tests
 
@@ -52,7 +52,7 @@ coverage: ## print code coverage
 	go test -race -coverprofile coverage.out -covermode=atomic ./... -tags=unit_test && go tool cover -html=coverage.out
 
 clean :
-	rm -rf ui/dist/ui
+	rm -rf web/apps/admin-ui/dist/admin-ui
 
 proto: ## Generate the protobuf files
 	@echo " > generating protobuf from raystack/proton"

pkg/server/server.go

@@ -31,7 +31,7 @@ import (
 
 	"github.com/raystack/frontier/pkg/server/consts"
 	"github.com/raystack/frontier/pkg/server/health"
-	"github.com/raystack/frontier/ui"
+	"github.com/raystack/frontier/web/apps/admin-ui"
 
 	connectinterceptors "github.com/raystack/frontier/pkg/server/connect_interceptors"
 	"github.com/raystack/frontier/pkg/server/interceptors"
@@ -93,7 +93,7 @@ func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServe
 		return
 	}
 
-	spaHandler, err := spa.Handler(ui.Assets, "dist/ui", "index.html", false)
+	spaHandler, err := spa.Handler(adminui.Assets, "dist/admin-ui", "index.html", false)
 	if err != nil {
 		logger.Warn("failed to load ui", "err", err)
 		return

web/apps/admin-ui/Makefile

@@ -0,0 +1,12 @@
+.PHONY: dist test
+
+build: dep dist
+
+dist:
+	@pnpm run build
+
+test:
+	@pnpm run test
+
+dep:
+	@pnpm install

ui/embed.go → web/apps/admin-ui/embed.go

@@ -1,8 +1,8 @@
-package ui
+package adminui
 
 import (
 	"embed"
 )
 
 //go:embed all:dist
 var Assets embed.FS

ui/vite.config.ts → web/apps/admin-ui/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig(() => {
   return {
     base: "/",
     build: {
-      outDir: "dist/ui",
+      outDir: "dist/admin-ui",
     },
     server: {
       proxy: {

web/packages/core/admin/components/PageTitle.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import type { AdminConfig } from '../types';
+
+export function AdminPageTitle({
+  title,
+  appName,
+  config
+}: {
+  title?: string;
+  appName?: string;
+  config?: AdminConfig;
+}) {
+  const titleAppName = appName || config?.title || 'Frontier Admin';
+  const fullTitle = title ? `${title} | ${titleAppName}` : titleAppName;
+
+  useEffect(() => {
+    document.title = fullTitle;
+    return () => {
+      document.title = titleAppName;
+    };
+  }, [fullTitle, titleAppName]);
+
+  return null;
+}
+

web/packages/core/admin/index.ts

@@ -0,0 +1,6 @@
+import '@raystack/apsara/style.css';
+
+export type { AdminConfig, AdminLoginProps } from './types';
+export { AdminPageTitle } from './components/PageTitle';
+export { AdminLogin } from './pages/auth/Login';
+

web/packages/core/admin/pages/auth/Login.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Box, Flex, Image } from '@raystack/apsara';
+import { Header } from '../../../react/components/Header';
+import { MagicLink } from '../../../react/components/onboarding/magiclink';
+import { AdminPageTitle } from '../../components/PageTitle';
+import type { AdminLoginProps } from '../../types';
+
+export function AdminLogin({ config, logoIcon }: AdminLoginProps) {
+  return (
+    <Flex>
+      <AdminPageTitle title="Login" config={config} />
+      <Box style={{ width: '100%' }}>
+        <Flex
+          direction="column"
+          justify="center"
+          align="center"
+          style={{
+            margin: 'auto',
+            height: '100vh',
+            width: '280px'
+          }}
+        >
+          <Flex direction="column" gap={5} style={{ width: '100%' }}>
+            <Header
+              logo={
+                config?.logo ? (
+                  <Image
+                    alt="logo"
+                    src={config.logo}
+                    width={80}
+                    height={80}
+                    style={{ borderRadius: 'var(--rs-space-3)' }}
+                  />
+                ) : (
+                  logoIcon
+                )
+              }
+              title={`Login to ${config?.title || 'Frontier Admin'}`}
+            />
+            <MagicLink open />
+          </Flex>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+

web/packages/core/admin/types.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+
+export type AdminConfig = {
+  title?: string;
+  logo?: string;
+};
+
+export type AdminLoginProps = {
+  config?: AdminConfig;
+  logoIcon?: React.ReactNode;
+};
+

sdks/js/packages/core/package.json → web/packages/core/package.json

@@ -9,6 +9,7 @@
   "files": [
     "dist/**/*",
     "react/dist/**/*",
+    "admin/dist/**/*",
     "hooks/dist/**/*",
     "README.md"
   ],
@@ -50,6 +51,12 @@
       "module": "./react/dist/index.mjs",
       "require": "./react/dist/index.js"
     },
+    "./admin": {
+      "types": "./admin/dist/index.d.ts",
+      "import": "./admin/dist/index.mjs",
+      "module": "./admin/dist/index.mjs",
+      "require": "./admin/dist/index.js"
+    },
     "./hooks": {
       "types": "./hooks/dist/index.d.ts",
       "import": "./hooks/dist/index.mjs",