From 74aae0ce155ca0a5a056ccc24ccff564a6df1ed7 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 17 Mar 2025 07:03:02 -0700
Subject: [PATCH] Put 2fa under collapsible (#1951)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 .../credentials/PasswordCredentialContent.tsx | 254 +++++++++---------
 1 file changed, 134 insertions(+), 120 deletions(-)

diff --git a/skyvern-frontend/src/routes/credentials/PasswordCredentialContent.tsx b/skyvern-frontend/src/routes/credentials/PasswordCredentialContent.tsx
index cb34c0c9..c4ecf65d 100644
--- a/skyvern-frontend/src/routes/credentials/PasswordCredentialContent.tsx
+++ b/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,128 +114,136 @@ function PasswordCredentialContent({
         </div>
       </div>
       <Separator />
-      <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>
-        <div className="grid h-36 grid-cols-3 gap-4">
-          <div
-            className={cn(
-              "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
-              {
-                "bg-slate-elevation3": totpMethod === "authenticator",
-              },
-            )}
-            onClick={() => setTotpMethod("authenticator")}
-          >
-            <QRCodeIcon className="h-6 w-6" />
-            <Label>Authenticator App</Label>
-          </div>
-          <div
-            className={cn(
-              "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
-              {
-                "bg-slate-elevation3": totpMethod === "email",
-              },
-            )}
-            onClick={() => setTotpMethod("email")}
-          >
-            <EnvelopeClosedIcon className="h-6 w-6" />
-            <Label>Email</Label>
-          </div>
-          <div
-            className={cn(
-              "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
-              {
-                "bg-slate-elevation3": totpMethod === "text",
-              },
-            )}
-            onClick={() => setTotpMethod("text")}
-          >
-            <MobileIcon className="h-6 w-6" />
-            <Label>Text Message</Label>
-          </div>
-        </div>
-        {(totpMethod === "text" || totpMethod === "email") && (
-          <p className="text-sm text-slate-400">
-            <Link
-              to="https://meetings.hubspot.com/skyvern/demo"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline underline-offset-2"
-            >
-              Contact us to set up two-factor authentication in workflows
-            </Link>{" "}
-            or{" "}
-            <Link
-              to="https://docs.skyvern.com/running-tasks/advanced-features#time-based-one-time-password-totp"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline underline-offset-2"
-            >
-              see our documentation on how to set up two-factor authentication
-              in workflows
-            </Link>{" "}
-            to get started.
-          </p>
-        )}
-        {totpMethod === "authenticator" && (
-          <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>
+      <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">
+              <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(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
+                    {
+                      "bg-slate-elevation3": totpMethod === "authenticator",
+                    },
+                  )}
+                  onClick={() => setTotpMethod("authenticator")}
+                >
+                  <QRCodeIcon className="h-6 w-6" />
+                  <Label>Authenticator App</Label>
+                </div>
+                <div
+                  className={cn(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
+                    {
+                      "bg-slate-elevation3": totpMethod === "email",
+                    },
+                  )}
+                  onClick={() => setTotpMethod("email")}
+                >
+                  <EnvelopeClosedIcon className="h-6 w-6" />
+                  <Label>Email</Label>
+                </div>
+                <div
+                  className={cn(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
+                    {
+                      "bg-slate-elevation3": totpMethod === "text",
+                    },
+                  )}
+                  onClick={() => setTotpMethod("text")}
+                >
+                  <MobileIcon className="h-6 w-6" />
+                  <Label>Text Message</Label>
+                </div>
               </div>
-              <Input
-                value={totp}
-                onChange={(e) =>
-                  onChange({
-                    name,
-                    username,
-                    password,
-                    totp: e.target.value,
-                  })
-                }
-              />
+              {(totpMethod === "text" || totpMethod === "email") && (
+                <p className="text-sm text-slate-400">
+                  <Link
+                    to="https://meetings.hubspot.com/skyvern/demo"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline underline-offset-2"
+                  >
+                    Contact us to set up two-factor authentication in workflows
+                  </Link>{" "}
+                  or{" "}
+                  <Link
+                    to="https://docs.skyvern.com/running-tasks/advanced-features#time-based-one-time-password-totp"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline underline-offset-2"
+                  >
+                    see our documentation on how to set up two-factor
+                    authentication in workflows
+                  </Link>{" "}
+                  to get started.
+                </p>
+              )}
+              {totpMethod === "authenticator" && (
+                <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>
+                    </div>
+                    <Input
+                      value={totp}
+                      onChange={(e) =>
+                        onChange({
+                          name,
+                          username,
+                          password,
+                          totp: e.target.value,
+                        })
+                      }
+                    />
+                  </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:{"  "}
+                    <Link
+                      to="https://bitwarden.com/help/integrated-authenticator/#manually-enter-a-secret"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline underline-offset-2"
+                    >
+                      Bitwarden
+                    </Link>
+                    {", "}
+                    <Link
+                      to="https://support.1password.com/one-time-passwords#on-1passwordcom"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline underline-offset-2"
+                    >
+                      1Password
+                    </Link>
+                    {", and "}
+                    <Link
+                      to="https://support.lastpass.com/s/document-item?language=en_US&bundleId=lastpass&topicId=LastPass/create-totp-vault.html&_LANG=enus"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline underline-offset-2"
+                    >
+                      LastPass
+                    </Link>
+                    {"."}
+                  </p>
+                </div>
+              )}
             </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:{"  "}
-              <Link
-                to="https://bitwarden.com/help/integrated-authenticator/#manually-enter-a-secret"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline underline-offset-2"
-              >
-                Bitwarden
-              </Link>
-              {", "}
-              <Link
-                to="https://support.1password.com/one-time-passwords#on-1passwordcom"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline underline-offset-2"
-              >
-                1Password
-              </Link>
-              {", and "}
-              <Link
-                to="https://support.lastpass.com/s/document-item?language=en_US&bundleId=lastpass&topicId=LastPass/create-totp-vault.html&_LANG=enus"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline underline-offset-2"
-              >
-                LastPass
-              </Link>
-              {"."}
-            </p>
-          </div>
-        )}
-      </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 }