first commit

calcom/apps/web/components/auth/BackupCode.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, TextField } from "@calcom/ui";
+
+export default function TwoFactor({ center = true }) {
+  const { t } = useLocale();
+  const methods = useFormContext();
+
+  return (
+    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+      <Label className="mt-4">{t("backup_code")}</Label>
+
+      <p className="text-subtle mb-4 text-sm">{t("backup_code_instructions")}</p>
+
+      <TextField
+        id="backup-code"
+        label=""
+        defaultValue=""
+        placeholder="XXXXX-XXXXX"
+        minLength={10} // without dash
+        maxLength={11} // with dash
+        required
+        {...methods.register("backupCode")}
+      />
+    </div>
+  );
+}

calcom/apps/web/components/auth/Turnstile.tsx

@@ -0,0 +1,12 @@
+import type { TurnstileProps } from "react-turnstile";
+import Turnstile from "react-turnstile";
+
+import { CLOUDFLARE_SITE_ID } from "@calcom/lib/constants";
+
+type Props = Omit<TurnstileProps, "sitekey">;
+
+export default function TurnstileWidget(props: Props) {
+  if (!CLOUDFLARE_SITE_ID || process.env.NEXT_PUBLIC_IS_E2E) return null;
+
+  return <Turnstile {...props} sitekey={CLOUDFLARE_SITE_ID} theme="auto" />;
+}

calcom/apps/web/components/auth/TwoFactor.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import useDigitInput from "react-digit-input";
+import { useFormContext } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui";
+
+export default function TwoFactor({ center = true, autoFocus = true }) {
+  const [value, onChange] = useState("");
+  const { t } = useLocale();
+  const methods = useFormContext();
+
+  const digits = useDigitInput({
+    acceptedCharacters: /^[0-9]$/,
+    length: 6,
+    value,
+    onChange,
+  });
+
+  useEffect(() => {
+    if (value) methods.setValue("totpCode", value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const className = "h-12 w-12 !text-xl text-center";
+
+  return (
+    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+      <Label className="mt-4">{t("2fa_code")}</Label>
+
+      <p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
+
+      <input type="hidden" value={value} {...methods.register("totpCode")} />
+
+      <div className="flex flex-row justify-between">
+        {digits.map((digit, index) => (
+          <Input
+            key={`2fa${index}`}
+            className={className}
+            name={`2fa${index + 1}`}
+            inputMode="decimal"
+            {...digit}
+            autoFocus={autoFocus && index === 0}
+            autoComplete="one-time-code"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

calcom/apps/web/components/auth/layouts/AdminLayout.tsx

@@ -0,0 +1,38 @@
+import { useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+import React, { useEffect } from "react";
+
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import type Shell from "@calcom/features/shell/Shell";
+import { UserPermissionRole } from "@calcom/prisma/enums";
+import { ErrorBoundary } from "@calcom/ui";
+
+export default function AdminLayout({
+  children,
+  ...rest
+}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const pathname = usePathname();
+  const session = useSession();
+  const router = useRouter();
+
+  // Force redirect on component level
+  useEffect(() => {
+    if (session.data && session.data.user.role !== UserPermissionRole.ADMIN) {
+      router.replace("/settings/my-account/profile");
+    }
+  }, [session, router]);
+
+  const isAppsPage = pathname?.startsWith("/settings/admin/apps");
+  return (
+    <SettingsLayout {...rest}>
+      <div className="divide-subtle bg-default mx-auto flex max-w-4xl flex-row divide-y">
+        <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </div>
+      </div>
+    </SettingsLayout>
+  );
+}
+
+export const getLayout = (page: React.ReactElement) => <AdminLayout>{page}</AdminLayout>;

calcom/apps/web/components/auth/layouts/AdminLayoutAppDir.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+import React, { useEffect } from "react";
+
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import type Shell from "@calcom/features/shell/Shell";
+import { UserPermissionRole } from "@calcom/prisma/enums";
+import { ErrorBoundary } from "@calcom/ui";
+
+export default function AdminLayout({
+  children,
+  ...rest
+}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const pathname = usePathname();
+  const session = useSession();
+  const router = useRouter();
+
+  // Force redirect on component level
+  useEffect(() => {
+    if (session.data && session.data.user.role !== UserPermissionRole.ADMIN) {
+      router.replace("/settings/my-account/profile");
+    }
+  }, [session, router]);
+
+  const isAppsPage = pathname?.startsWith("/settings/admin/apps");
+  return (
+    <SettingsLayout {...rest}>
+      <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
+        <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </div>
+      </div>
+    </SettingsLayout>
+  );
+}
+
+export const getLayout = (page: React.ReactElement) => <AdminLayout>{page}</AdminLayout>;