Put 2fa under collapsible (#1951)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/credentials/PasswordCredentialContent.tsx

@@ -1,4 +1,10 @@
 import { QRCodeIcon } from "@/components/icons/QRCodeIcon";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
@@ -108,14 +114,17 @@ function PasswordCredentialContent({
         </div>
       </div>
       <Separator />
+      <Accordion type="single" collapsible>
+        <AccordionItem value="two-factor-authentication" className="border-b-0">
+          <AccordionTrigger className="py-2">
+            Two-Factor Authentication
+          </AccordionTrigger>
+          <AccordionContent>
             <div className="space-y-4">
-        <div className="space-y-1">
-          <h1>Two-Factor Authentication</h1>
-          <h2 className="text-sm text-slate-400">
-            Set up Skyvern to automatically retrieve two-factor authentication
-            codes.
-          </h2>
-        </div>
+              <p className="text-sm text-slate-400">
+                Set up Skyvern to automatically retrieve two-factor
+                authentication codes.
+              </p>
               <div className="grid h-36 grid-cols-3 gap-4">
                 <div
                   className={cn(
@@ -171,8 +180,8 @@ function PasswordCredentialContent({
                     rel="noopener noreferrer"
                     className="underline underline-offset-2"
                   >
-              see our documentation on how to set up two-factor authentication
-              in workflows
+                    see our documentation on how to set up two-factor
+                    authentication in workflows
                   </Link>{" "}
                   to get started.
                 </p>
@@ -181,7 +190,9 @@ function PasswordCredentialContent({
                 <div className="space-y-4">
                   <div className="flex items-center gap-12">
                     <div className="w-40 shrink-0">
-                <Label className="whitespace-nowrap">Authenticator Key</Label>
+                      <Label className="whitespace-nowrap">
+                        Authenticator Key
+                      </Label>
                     </div>
                     <Input
                       value={totp}
@@ -196,9 +207,9 @@ function PasswordCredentialContent({
                     />
                   </div>
                   <p className="text-sm text-slate-400">
-              You need to find the authenticator secret from the website where
-              you are using the credential. Here are some guides from popular
-              authenticator apps:{"  "}
+                    You need to find the authenticator secret from the website
+                    where you are using the credential. Here are some guides
+                    from popular authenticator apps:{"  "}
                     <Link
                       to="https://bitwarden.com/help/integrated-authenticator/#manually-enter-a-secret"
                       target="_blank"
@@ -230,6 +241,9 @@ function PasswordCredentialContent({
                 </div>
               )}
             </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 }