github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-09 07:28:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2747 from Infisical/misc/finalized-design-of-totp-registration

Browse Source 
misc: finalized design of totp registration
This commit is contained in:
Sheen
2024-11-19 02:13:54 +08:00
committed by GitHub
parent 6ff1602fd5 64ec741f1a
commit afe35dbbb5
4 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/images/mfa-email.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 555 KiB

After

Width:  |  Height:  |  Size: 558 KiB

16
frontend/src/components/mfa/TotpRegistration.tsx
View File

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import QRCode from "qrcode";
import { twMerge } from "tailwind-merge";
import { useGetUserTotpRegistration } from "@app/hooks/api";
import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";
@@ -9,9 +10,10 @@ import { Button, ContentLoader, Input } from "../v2";
type Props = {
onComplete?: () => Promise<void>;
shouldCenterQr?: boolean;
};
const TotpRegistration = ({ onComplete }: Props) => {
const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
const { data: registration, isLoading } = useGetUserTotpRegistration();
const { mutateAsync: verifyUserTotp, isLoading: isVerifyLoading } =
useVerifyUserTotpRegistration();
@@ -48,16 +50,18 @@ const TotpRegistration = ({ onComplete }: Props) => {
if (isLoading) {
return <ContentLoader />;
}
return (
<div className="flex max-w-sm flex-col text-bunker-200">
<div className="mb-4 text-center">
Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR code.
<div className="flex max-w-lg flex-col text-bunker-200">
<div className="mb-8">
1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
code.
</div>
<div className="mb-10 flex items-center justify-center">
<div className={twMerge("mb-8 flex items-center", shouldCenterQr && "justify-center")}>
<img src={qrCodeUrl} alt="registration-qr" />
</div>
<form onSubmit={handleTotpVerify}>
<div className="mb-4 text-center">Enter the resulting verification code</div>
<div className="mb-4">2. Enter the resulting verification code</div>
<div className="mb-4 flex flex-row gap-2">
<Input
onChange={(e) => setTotp(e.target.value)}

1
frontend/src/views/Login/Mfa.tsx
View File

@@ -118,6 +118,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
</div>
<div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
<TotpRegistration
shouldCenterQr
onComplete={async () => {
setShouldShowTotpRegistration(false);
await successCallback();

2
frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
View File

@@ -203,7 +203,7 @@ export const MFASection = () => {
For added security, you can configure a mobile authenticator and set it as your
selected 2FA method.
</div>
<div className="mt-6 flex min-w-full justify-center">
<div className="ml-6 mt-6 flex min-w-full">
<TotpRegistration
onComplete={async () => {
await queryClient.invalidateQueries(userKeys.totpConfiguration);