cal.pub0.org/apps/web/components/security/EnableTwoFactorModal.tsx

220 lines
6.5 KiB
TypeScript
Raw Normal View History

import type { BaseSyntheticEvent } from "react";
import React, { useEffect, useState } from "react";
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
import { useForm } from "react-hook-form";
import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
import TwoFactor from "@components/auth/TwoFactor";
import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
import TwoFactorModalHeader from "./TwoFactorModalHeader";
interface EnableTwoFactorModalProps {
/**
* Called when the user closes the modal without disabling two-factor auth
*/
onCancel: () => void;
/**
* Called when the user enables two-factor auth
*/
onEnable: () => void;
}
enum SetupStep {
ConfirmPassword,
DisplayQrCode,
EnterTotpCode,
}
const WithStep = ({
step,
current,
children,
}: {
step: SetupStep;
current: SetupStep;
children: JSX.Element;
}) => {
return step === current ? children : null;
};
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
interface EnableTwoFactorValues {
totpCode: string;
}
const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
2021-10-15 10:53:42 +00:00
const { t } = useLocale();
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
const form = useForm<EnableTwoFactorValues>();
2021-10-15 10:53:42 +00:00
const setupDescriptions = {
[SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
[SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
[SetupStep.EnterTotpCode]: t("2fa_enter_six_digit_code"),
};
const [step, setStep] = useState(SetupStep.ConfirmPassword);
const [password, setPassword] = useState("");
const [dataUri, setDataUri] = useState("");
const [secret, setSecret] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
async function handleSetup(e: React.FormEvent) {
e.preventDefault();
if (isSubmitting) {
return;
}
setIsSubmitting(true);
setErrorMessage(null);
try {
const response = await TwoFactorAuthAPI.setup(password);
const body = await response.json();
if (response.status === 200) {
setDataUri(body.dataUri);
setSecret(body.secret);
setStep(SetupStep.DisplayQrCode);
return;
}
if (body.error === ErrorCode.IncorrectPassword) {
setErrorMessage(t("incorrect_password"));
} else {
setErrorMessage(t("something_went_wrong"));
}
} catch (e) {
setErrorMessage(t("something_went_wrong"));
console.error(t("error_enabling_2fa"), e);
} finally {
setIsSubmitting(false);
}
}
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
async function handleEnable({ totpCode }: EnableTwoFactorValues, e: BaseSyntheticEvent | undefined) {
e?.preventDefault();
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
if (isSubmitting) {
return;
}
setIsSubmitting(true);
setErrorMessage(null);
try {
const response = await TwoFactorAuthAPI.enable(totpCode);
const body = await response.json();
if (response.status === 200) {
onEnable();
return;
}
if (body.error === ErrorCode.IncorrectTwoFactorCode) {
setErrorMessage(`${t("code_is_incorrect")} ${t("please_try_again")}`);
} else {
setErrorMessage(t("something_went_wrong"));
}
} catch (e) {
setErrorMessage(t("something_went_wrong"));
console.error(t("error_enabling_2fa"), e);
} finally {
setIsSubmitting(false);
}
}
const handleEnableRef = useCallbackRef(handleEnable);
const totpCode = form.watch("totpCode");
// auto submit 2FA if all inputs have a value
useEffect(() => {
if (totpCode?.trim().length === 6) {
form.handleSubmit(handleEnableRef.current)();
}
}, [form, handleEnableRef, totpCode]);
return (
<Dialog open={true}>
<DialogContent>
<TwoFactorModalHeader title={t("enable_2fa")} description={setupDescriptions[step]} />
<WithStep step={SetupStep.ConfirmPassword} current={step}>
<form onSubmit={handleSetup}>
<div className="mb-4">
<label htmlFor="password" className="text-default mt-4 block text-sm font-medium">
{t("password")}
</label>
<div className="mt-1">
<input
type="password"
name="password"
id="password"
required
value={password}
onInput={(e) => setPassword(e.currentTarget.value)}
className="border-default block w-full rounded-sm text-sm"
/>
</div>
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
</div>
</form>
</WithStep>
<WithStep step={SetupStep.DisplayQrCode} current={step}>
<>
<div className="flex justify-center">
{
// eslint-disable-next-line @next/next/no-img-element
<img src={dataUri} alt="" />
}
</div>
2022-02-09 22:32:31 +00:00
<p className="text-center font-mono text-xs">{secret}</p>
</>
</WithStep>
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
<Form handleSubmit={handleEnable} form={form}>
<WithStep step={SetupStep.EnterTotpCode} current={step}>
<div className="mb-4">
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
<TwoFactor center />
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
</div>
</WithStep>
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<WithStep step={SetupStep.ConfirmPassword} current={step}>
<Button
type="submit"
className="me-2 ms-2"
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
onClick={handleSetup}
disabled={password.length === 0 || isSubmitting}>
{t("continue")}
</Button>
</WithStep>
<WithStep step={SetupStep.DisplayQrCode} current={step}>
<Button type="submit" className="me-2 ms-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
{t("continue")}
</Button>
</WithStep>
<WithStep step={SetupStep.EnterTotpCode} current={step}>
<Button type="submit" className="me-2 ms-2" disabled={isSubmitting}>
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
{t("enable")}
</Button>
</WithStep>
<Button color="secondary" onClick={onCancel}>
{t("cancel")}
</Button>
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
</div>
</Form>
</DialogContent>
</Dialog>
);
};
export default EnableTwoFactorModal;