Introduce sample key management dashboard

v3xlabs · Feb 17, 2025 · 95aba64 · 95aba64
1 parent 9d1efd5
commit 95aba64
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 12 deletions.
diff --git a/engine/src/state.rs b/engine/src/state.rs
@@ -24,6 +24,23 @@ pub struct AppConfig {
     pub s3_bucket_name: String,
     pub s3_access_key: String,
     pub s3_secret_key: String,
+    pub github_app: Option<GithubAppConfig>,
+}
+
+/// Github App Config
+/// 
+/// Setup your app with Callback URL
+/// /api/github/oauth
+/// 
+/// Setup URL (optional)
+/// /github/setup
+/// 
+/// Webhook URL (optional)
+/// /api/github/webhook
+#[derive(Deserialize, Debug)]
+pub struct GithubAppConfig {
+    pub client_id: String,
+    pub client_secret: String,
 }
 
 impl AppState {

diff --git a/web/src/components/button/index.tsx b/web/src/components/button/index.tsx
@@ -43,9 +43,8 @@ const [buttonVariants, buttonVariantsConfig] = cvax(
                     'disabled:bg-yellow-300 disabled:text-yellow-500 disabled:border-transparent disabled:hover:bg-yellow-300 disabled:hover:border-transparent disabled:cursor-not-allowed',
                 ],
                 destructive: [
-                    'text-foreground border',
-                    'bg-red-400 hover:bg-red-400/80 border-transparent',
-                    'disabled:bg-red-300 disabled:text-red-500 disabled:border-transparent disabled:hover:bg-red-300 disabled:hover:border-transparent disabled:cursor-not-allowed',
+                    'bg-default text-red-500 border border-solid hover:bg-red-800 hover:text-white',
+                    'disabled:text-red-300 disabled:opacity-50 disabled:cursor-not-allowed',
                 ],
             },
             size: {

diff --git a/web/src/layouts/SidePage.tsx b/web/src/layouts/SidePage.tsx
@@ -6,6 +6,7 @@ import { getTitle } from '@/util/title';
 
 export type SidePageProperties = PropsWithChildren<{
     title: string;
+    subtitle?: string;
     suffix?: ReactNode;
     className?: ClassValue;
     sidebar?: ReactNode;
@@ -14,6 +15,7 @@ export type SidePageProperties = PropsWithChildren<{
 export const SidePage: FC<SidePageProperties> = ({
     children,
     title,
+    subtitle,
     suffix,
     className,
     sidebar,
@@ -32,7 +34,14 @@ export const SidePage: FC<SidePageProperties> = ({
             {sidebar && <div className="w-full md:max-w-64">{sidebar}</div>}
             <div className="w-full space-y-4">
                 <div className="flex items-end justify-between">
-                    <h1 className="h1 pl-4">{title}</h1>
+                    <div>
+                        <h1 className="h1 pl-4">{title}</h1>
+                        {subtitle && (
+                            <div className="text-muted pl-4 text-sm">
+                                {subtitle}
+                            </div>
+                        )}
+                    </div>
                     {suffix}
                 </div>
                 {children}

diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
@@ -8,6 +8,7 @@ import { bootstrapPreflight } from '@/api';
 export interface MyRouterContext {
     title: string;
     suffix?: ReactNode;
+    subtitle?: string;
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({

diff --git a/web/src/routes/_authed/site/$siteId/settings/_s.tsx b/web/src/routes/_authed/site/$siteId/settings/_s.tsx
@@ -14,10 +14,15 @@ export const Route = createFileRoute('/_authed/site/$siteId/settings/_s')({
 function RouteComponent() {
     const matches = useRouterState({ select: (s) => s.matches });
 
-    const { title, suffix } = matches[matches.length - 1].context;
+    const { title, suffix, subtitle } = matches[matches.length - 1].context;
 
     return (
-        <SidePage title={title} suffix={suffix} sidebar={<SiteSettingsNav />}>
+        <SidePage
+            title={title}
+            suffix={suffix}
+            sidebar={<SiteSettingsNav />}
+            subtitle={subtitle}
+        >
             <Outlet />
         </SidePage>
     );

diff --git a/web/src/routes/_authed/team/$teamId/settings/_s.keys.tsx b/web/src/routes/_authed/team/$teamId/settings/_s.keys.tsx
@@ -1,9 +1,54 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router';
+import { FiKey } from 'react-icons/fi';
+
+import { Button } from '@/components';
 
 export const Route = createFileRoute('/_authed/team/$teamId/settings/_s/keys')({
-  component: RouteComponent,
-})
+    component: RouteComponent,
+    context(context) {
+        return {
+            title: 'Access Keys',
+            suffix: <Button>Generate new key</Button>,
+            subtitle: (
+                <span>
+                    <span className="text-yellow-400">⚠️ CAUTION</span> This
+                    page contains sample data
+                </span>
+            ),
+        };
+    },
+});
 
 function RouteComponent() {
-  return <div className="card">Domains go here</div>
+    return (
+        <>
+            <ul className="card no-padding divide-y">
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((key) => (
+                    <li key={key} className="flex gap-4 p-4">
+                        <div className="py-1.5">
+                            <FiKey />
+                        </div>
+                        <div>
+                            <div>
+                                <span>*****</span>
+                                <span>8a9faa19</span>
+                            </div>
+                            <div>
+                                Created by{' '}
+                                <span className="font-bold">John Doe</span>
+                            </div>
+                            <div>
+                                Last used <span>1 hour ago</span>
+                            </div>
+                        </div>
+                        <div className="flex grow items-center justify-end">
+                            <Button variant="destructive" size="sm">
+                                Delete
+                            </Button>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </>
+    );
 }
diff --git a/web/src/routes/_authed/team/$teamId/settings/_s.tsx b/web/src/routes/_authed/team/$teamId/settings/_s.tsx
@@ -14,10 +14,15 @@ export const Route = createFileRoute('/_authed/team/$teamId/settings/_s')({
 function RouteComponent() {
     const matches = useRouterState({ select: (s) => s.matches });
 
-    const { title, suffix } = matches[matches.length - 1].context;
+    const { title, suffix, subtitle } = matches[matches.length - 1].context;
 
     return (
-        <SidePage title={title} suffix={suffix} sidebar={<TeamSettingsNav />}>
+        <SidePage
+            title={title}
+            suffix={suffix}
+            sidebar={<TeamSettingsNav />}
+            subtitle={subtitle}
+        >
             <Outlet />
         </SidePage>
     );