vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Put 2fa under collapsible (#1951)

Browse Source 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Shuchang Zheng
2025-03-17 07:03:02 -07:00
committed by GitHub
parent 9e474ade7b
commit 74aae0ce15
1 changed files with 134 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
skyvern-frontend/src/routes/credentials/PasswordCredentialContent.tsx
View File

@@ -1,4 +1,10 @@
import { QRCodeIcon } from "@/components/icons/QRCodeIcon"; import { QRCodeIcon } from "@/components/icons/QRCodeIcon";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
@@ -108,128 +114,136 @@ function PasswordCredentialContent({
</div> </div>
</div> </div>
<Separator /> <Separator />
<div className="space-y-4"> <Accordion type="single" collapsible>
<div className="space-y-1"> <AccordionItem value="two-factor-authentication" className="border-b-0">
<h1>Two-Factor Authentication</h1> <AccordionTrigger className="py-2">
<h2 className="text-sm text-slate-400"> Two-Factor Authentication
Set up Skyvern to automatically retrieve two-factor authentication </AccordionTrigger>
codes. <AccordionContent>
</h2> <div className="space-y-4">
</div> <p className="text-sm text-slate-400">
<div className="grid h-36 grid-cols-3 gap-4"> Set up Skyvern to automatically retrieve two-factor
<div authentication codes.
className={cn( </p>
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3", <div className="grid h-36 grid-cols-3 gap-4">
{ <div
"bg-slate-elevation3": totpMethod === "authenticator", className={cn(
}, "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
)} {
onClick={() => setTotpMethod("authenticator")} "bg-slate-elevation3": totpMethod === "authenticator",
> },
<QRCodeIcon className="h-6 w-6" /> )}
<Label>Authenticator App</Label> onClick={() => setTotpMethod("authenticator")}
</div> >
<div <QRCodeIcon className="h-6 w-6" />
className={cn( <Label>Authenticator App</Label>
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3", </div>
{ <div
"bg-slate-elevation3": totpMethod === "email", className={cn(
}, "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
)} {
onClick={() => setTotpMethod("email")} "bg-slate-elevation3": totpMethod === "email",
> },
<EnvelopeClosedIcon className="h-6 w-6" /> )}
<Label>Email</Label> onClick={() => setTotpMethod("email")}
</div> >
<div <EnvelopeClosedIcon className="h-6 w-6" />
className={cn( <Label>Email</Label>
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3", </div>
{ <div
"bg-slate-elevation3": totpMethod === "text", className={cn(
}, "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-elevation1 hover:bg-slate-elevation3",
)} {
onClick={() => setTotpMethod("text")} "bg-slate-elevation3": totpMethod === "text",
> },
<MobileIcon className="h-6 w-6" /> )}
<Label>Text Message</Label> onClick={() => setTotpMethod("text")}
</div> >
</div> <MobileIcon className="h-6 w-6" />
{(totpMethod === "text" || totpMethod === "email") && ( <Label>Text Message</Label>
<p className="text-sm text-slate-400"> </div>
<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> </div>
<Input {(totpMethod === "text" || totpMethod === "email") && (
value={totp} <p className="text-sm text-slate-400">
onChange={(e) => <Link
onChange({ to="https://meetings.hubspot.com/skyvern/demo"
name, target="_blank"
username, rel="noopener noreferrer"
password, className="underline underline-offset-2"
totp: e.target.value, >
}) 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> </div>
<p className="text-sm text-slate-400"> </AccordionContent>
You need to find the authenticator secret from the website where </AccordionItem>
you are using the credential. Here are some guides from popular </Accordion>
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>
</div> </div>
); );
} }