🔀 Merge oauth cred

apps/client-ts/package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@stytch/nextjs": "^18.0.0",
     "@stytch/vanilla-js": "^4.7.1",
     "@tanstack/react-query": "^5.12.2",

apps/client-ts/src/app/configuration/page.tsx

@@ -37,17 +37,24 @@ import {
   import { usePostHog } from 'posthog-js/react'
   import config from "@/lib/config";
   import useProjectStore from "@/state/projectStore";
+import AddAuthCredentials from "@/components/Configuration/AddAuthCredentials";
+import AuthCredentialsTable from "@/components/Configuration/AuthCredentialsTable";
+import useConnectionStrategies from "@/hooks/useConnectionStrategies";
+import { extractAuthMode,extractProvider,extractVertical} from '@panora/shared'
 
   export default function Page() {
+    const {idProject} = useProjectStore();
+
+
     const { data: linkedUsers, isLoading, error } = useLinkedUsers();
     const { data: webhooks, isLoading: isWebhooksLoading, error: isWebhooksError } = useWebhooks();
+    const {data: ConnectionStrategies, isLoading: isConnectionStrategiesLoading,error: isConnectionStategiesError} = useConnectionStrategies(idProject)
 
     const { data: mappings, isLoading: isFieldMappingsLoading, error: isFieldMappingsError } = useFieldMappings();
     const [open, setOpen] = useState(false);
     const handleClose = () => {
       setOpen(false);
     };
-    const {idProject} = useProjectStore();
 
 
     const posthog = usePostHog()
@@ -72,6 +79,18 @@ import {
     if(isWebhooksError){
       console.log("error fetching webhooks..");
     }
+
+    if(isConnectionStrategiesLoading)
+    {
+      console.log("loading Connection Strategies...");
+    }
+
+    if(isConnectionStategiesError)
+    {
+      console.log("error Fetching connection Strategies!")
+    }
+
+
 
     const mappingTs = mappings?.map(mapping => ({
       standard_object: mapping.ressource_owner_type,
@@ -82,6 +101,19 @@ import {
       destination_field: mapping.slug,
       data_type: mapping.data_type,
     }))
+
+    // console.log(ConnectionStrategies)
+
+    const mappingConnectionStrategies = ConnectionStrategies?.map(cs => ({
+      id_cs : cs.id_connection_strategy,
+      provider_name : extractProvider(cs.type),
+      auth_type: extractAuthMode(cs.type),
+      vertical: extractVertical(cs.type),
+      type: cs.type,
+      status: cs.status
+    }))
+
+    console.log(mappingConnectionStrategies)
 
     return (
 
@@ -99,6 +131,9 @@ import {
                 <TabsTrigger value="webhooks">
                   Webhooks
                 </TabsTrigger>
+                <TabsTrigger value="0auth">
+                  0Auth Credentials
+                </TabsTrigger>
               </TabsList>
               <TabsContent value="linked-accounts" className="space-y-4">
                 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-12">
@@ -173,6 +208,24 @@ import {
                   </Card>
                 </div>
               </TabsContent>
+
+              <TabsContent value="0auth" className="space-y-4">
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-12">
+                  <AddAuthCredentials/>
+                  <Card className="col-span-12">
+                    <CardHeader>
+                      <CardTitle className="text-left">Your Providers</CardTitle>
+                      <CardDescription className="text-left">
+                        Use and setup the credentials of your providers.
+                      </CardDescription>
+                    </CardHeader>
+                    <Separator className="mb-10"/>
+                    <CardContent>
+                      <AuthCredentialsTable mappings={mappingConnectionStrategies} isLoading={false} />
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
             </Tabs>
           </div>
 

apps/client-ts/src/app/events/layout.tsx

@@ -14,9 +14,10 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
+  const { session, isInitialized} = useStytchSession();
   const router = useRouter();
   useEffect(() => {
+
     if(config.DISTRIBUTION !== "selfhost" && !session){
       router.replace("/b2c/login");
     }

apps/client-ts/src/components/Configuration/AddAuthCredentials.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+
+import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { useState } from "react"
+import useProjectStore from "@/state/projectStore"
+
+import { cn } from "@/lib/utils"
+
+import { usePostHog } from 'posthog-js/react'
+import config from "@/lib/config"
+// import { toast } from "@/components/ui/use-toast"
+
+import AddAuthCredentialsForm from "./AddAuthCredentialsForm"
+
+
+
+
+const AddAuthCredentials = () => {
+    const [open, setOpen] = useState(false);
+    const posthog = usePostHog()
+    const {idProject} = useProjectStore();
+
+
+
+
+    const handleOpenChange = (open: boolean) => {
+        setOpen(open)
+        // form.reset()
+      };
+
+
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogTrigger asChild>
+        <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className={cn("w-[210px] justify-between")}
+            onClick={ () => {
+                posthog?.capture("add_webhook_button_clicked", {
+                    id_project: idProject,
+                    mode: config.DISTRIBUTION
+                })
+            }}
+          >
+            <PlusCircledIcon className=" h-5 w-5" />
+            Add 0Auth Credentials
+        </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:w-[450px] lg:max-w-screen-lg overflow-y-scroll max-h-screen">
+            <AddAuthCredentialsForm performUpdate={false} closeDialog={() => setOpen(false)} />
+        </DialogContent>
+    </Dialog>   
+  )
+}
+
+export default AddAuthCredentials;