Add Auth Credentials UI

apps/client-ts/package.json

@@ -53,7 +53,8 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zustand": "^4.4.7",
+    "@radix-ui/react-scroll-area": "^1.0.5"
   },
   "devDependencies": {
     "@types/cookies": "^0.9.0",

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

@@ -37,6 +37,9 @@ 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 {AUTH_CREDENTIALS_MAPPINGS} from '@/components/Configuration/data/authCredentialsDemo'
 
   export default function Page() {
     const { data: linkedUsers, isLoading, error } = useLinkedUsers();
@@ -99,6 +102,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 +179,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={AUTH_CREDENTIALS_MAPPINGS} isLoading={false} />
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
             </Tabs>
           </div>
 

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

@@ -0,0 +1,89 @@
+'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 sampleData = {
+    "provider_name": "Zoho",
+    "auth_type": "Basic_Auth",
+    "activate": false,
+    "credentials": {
+      "username": "dsdsdsdsdsd",
+      "secret": "dddsddsdsdsdsdsdd",
+    },
+    "action": "sas",
+    "logoPath": 'https://assets-global.website-files.com/64f68d43d25e5962af5f82dd/64f68d43d25e5962af5f9812_64ad8bbe47c78358489b29fc_645e3ccf636a8d659f320e25_Group%25252012.png',
+
+}
+
+
+
+const AddAuthCredentials = () => {
+    const [open, setOpen] = useState(false);
+
+
+
+    const handleOpenChange = (open: boolean) => {
+        setOpen(open)
+        // form.reset()
+      };
+
+
+    //const [secret, setSecret] = useState('');
+    const posthog = usePostHog()
+
+    const {idProject} = useProjectStore();
+
+
+
+
+
+
+    // const Watch = form.watch()
+
+
+
+
+  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 />
+        </DialogContent>
+    </Dialog>   
+  )
+}
+
+export default AddAuthCredentials;