b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import Button from "@calcom/ui/Button";
|
|
import { Badge } from "@calcom/ui/components/badge";
|
|
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
|
|
|
import DisableTwoFactorModal from "./DisableTwoFactorModal";
|
|
import EnableTwoFactorModal from "./EnableTwoFactorModal";
|
|
|
|
const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
|
|
const [enabled, setEnabled] = useState(twoFactorEnabled);
|
|
const [enableModalOpen, setEnableModalOpen] = useState(false);
|
|
const [disableModalOpen, setDisableModalOpen] = useState(false);
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
|
<div>
|
|
<div className="flex flex-row items-center">
|
|
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
|
|
<Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
|
|
{enabled ? t("enabled") : t("disabled")}
|
|
</Badge>
|
|
</div>
|
|
<p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
|
|
</div>
|
|
<div className="mt-5 sm:mt-0 sm:self-center">
|
|
<Button
|
|
type="submit"
|
|
color="secondary"
|
|
onClick={() => (enabled ? setDisableModalOpen(true) : setEnableModalOpen(true))}>
|
|
{enabled ? t("disable") : t("enable")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{enableModalOpen && (
|
|
<EnableTwoFactorModal
|
|
onEnable={() => {
|
|
setEnabled(true);
|
|
setEnableModalOpen(false);
|
|
}}
|
|
onCancel={() => setEnableModalOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{disableModalOpen && (
|
|
<DisableTwoFactorModal
|
|
onDisable={() => {
|
|
setEnabled(false);
|
|
setDisableModalOpen(false);
|
|
}}
|
|
onCancel={() => setDisableModalOpen(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TwoFactorAuthSection;
|