General frontend structure for 2FA - done

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -0,0 +1,31 @@
+import { Checkbox } from '@app/components/v2';
+
+type Props = {
+  isTwoFAEnabled?: boolean;
+  onIsTwoFAEnabledChange: (state: boolean) => void;
+};
+
+export const SecuritySection = ({
+  isTwoFAEnabled,
+  onIsTwoFAEnabledChange
+}: Props) => {
+  return (
+    <form>
+      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
+        <p className="mb-4 mt-2 text-xl font-semibold">
+          Two-factor Authentication
+        </p>
+        <Checkbox
+          className="data-[state=checked]:bg-primary"
+          id="isTwoFAEnabled"
+          isChecked={isTwoFAEnabled}
+          onCheckedChange={(state) => {
+            onIsTwoFAEnabledChange(state as boolean);
+          }}
+        >
+          Enable 2-factor authentication via your personal email.
+        </Checkbox>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx

@@ -0,0 +1 @@
+export { SecuritySection } from './SecuritySection';

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -314,10 +314,6 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name}
         onProjectNameChange={onRenameWorkspace}
       />
-      <AutoCapitalizationSection
-        workspaceAutoCapitalization={currentWorkspace?.autoCapitalization}
-        onAutoCapitalizationChange={onAutoCapitalizationToggle}
-      />
       <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
       <EnvironmentSection
         environments={currentWorkspace?.environments || []}
@@ -339,6 +335,10 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name || ''}
         onCreateTag={onCreateWsTag}
       />
+      <AutoCapitalizationSection
+        workspaceAutoCapitalization={currentWorkspace?.autoCapitalization}
+        onAutoCapitalizationChange={onAutoCapitalizationToggle}
+      />
       <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
         <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
         <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -14,7 +14,7 @@ export const AutoCapitalizationSection = ({
   const { t } = useTranslation();
   return (
     <form>
-      <div className="mb-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
+      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
         <p className="mb-4 mt-2 text-xl font-semibold">
           {t('settings-project:auto-capitalization')}
         </p>