Better settings layout

Author: samejr

apps/webapp/app/routes/account.security/route.tsx

@@ -1,22 +1,22 @@
 import { type MetaFunction } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import {
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
 import { Header2 } from "~/components/primitives/Headers";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
-import { MfaSetup } from "../resources.account.mfa.setup/route";
-import { SessionDurationSetting } from "../resources.account.session-duration/SessionDurationSetting";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { requireUser } from "~/services/session.server";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { prisma } from "~/db.server";
+import { requireUser } from "~/services/session.server";
 import {
+  DEFAULT_SESSION_DURATION_SECONDS,
   getAllowedSessionOptions,
   getOrganizationSessionCap,
-  DEFAULT_SESSION_DURATION_SECONDS,
 } from "~/services/sessionDuration.server";
+import { MfaSetup } from "../resources.account.mfa.setup/route";
+import { SessionDurationSetting } from "../resources.account.session-duration/SessionDurationSetting";
 
 export const meta: MetaFunction = () => {
   return [
@@ -59,12 +59,14 @@ export default function Page() {
       </NavBar>
 
       <PageBody>
-        <MainHorizontallyCenteredContainer className="grid place-items-center overflow-visible">
-          <div className="mb-3 w-full border-b border-grid-dimmed pb-3">
+        <MainHorizontallyCenteredContainer className="max-w-[600px] overflow-visible">
+          <div className="w-full border-b border-grid-dimmed pb-3">
             <Header2>Security</Header2>
           </div>
-          <MfaSetup isEnabled={!!user.mfaEnabledAt} />
-          <div className="mt-6 w-full border-t border-grid-dimmed pt-6">
+          <div className="w-full border-b border-grid-dimmed py-4">
+            <MfaSetup isEnabled={!!user.mfaEnabledAt} />
+          </div>
+          <div className="w-full border-b border-grid-dimmed py-4">
             <SessionDurationSetting
               currentValue={sessionDuration}
               options={sessionDurationOptions}

apps/webapp/app/routes/resources.account.mfa.setup/MfaToggle.tsx

@@ -12,24 +12,24 @@ interface MfaToggleProps {
 export function MfaToggle({ isEnabled, onToggle }: MfaToggleProps) {
   return (
     <Form method="post" className="w-full">
-      <InputGroup className="mb-4">
-        <Label>Multi-factor authentication</Label>
-        <Paragraph variant="small">
-          Enable an extra layer of security by requiring a one-time code from your authenticator
-          app (TOTP) each time you log in.
-        </Paragraph>
-      </InputGroup>
-      <div className="flex items-center justify-between">
-        <Switch
-          id="mfa"
-          variant="medium"
-          label={isEnabled ? "Enabled" : "Enable"}
-          labelPosition="right"
-          className="-ml-2 w-fit pr-3"
-          checked={isEnabled}
-          onCheckedChange={onToggle}
-        />
+      <div className="flex w-full items-center justify-between gap-4">
+        <InputGroup className="flex-1">
+          <Label>Multi-factor authentication</Label>
+          <Paragraph variant="small">
+            Require a one-time code from your authenticator app (TOTP).
+          </Paragraph>
+        </InputGroup>
+        <div className="flex flex-none items-center">
+          <Switch
+            id="mfa"
+            variant="medium"
+            labelPosition="right"
+            className="w-fit pr-3"
+            checked={isEnabled}
+            onCheckedChange={onToggle}
+          />
+        </div>
       </div>
     </Form>
   );
-}
+}

apps/webapp/app/routes/resources.account.mfa.setup/route.tsx

@@ -1,7 +1,11 @@
-import { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { z } from "zod";
-import { redirectWithSuccessMessage, redirectWithErrorMessage, typedJsonWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectWithSuccessMessage,
+  redirectWithErrorMessage,
+  typedJsonWithSuccessMessage,
+} from "~/models/message.server";
 import { MultiFactorAuthenticationService } from "~/services/mfa/multiFactorAuthentication.server";
 import { requireUserId } from "~/services/session.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
@@ -132,14 +136,15 @@ export async function action({ request }: ActionFunctionArgs) {
     if (error instanceof ServiceValidationError) {
       return redirectWithErrorMessage("/account/security", request, error.message);
     }
-    
+
     // Re-throw unexpected errors
     throw error;
   }
 }
 
 export function MfaSetup({ isEnabled }: { isEnabled: boolean }) {
-  const { state, actions, isQrDialogOpen, isRecoveryDialogOpen, isDisableDialogOpen } = useMfaSetup(isEnabled);
+  const { state, actions, isQrDialogOpen, isRecoveryDialogOpen, isDisableDialogOpen } =
+    useMfaSetup(isEnabled);
 
   const handleToggle = (enabled: boolean) => {
     if (enabled && !state.isEnabled) {
@@ -151,10 +156,7 @@ export function MfaSetup({ isEnabled }: { isEnabled: boolean }) {
 
   return (
     <>
-      <MfaToggle
-        isEnabled={state.isEnabled}
-        onToggle={handleToggle}
-      />
+      <MfaToggle isEnabled={state.isEnabled} onToggle={handleToggle} />
 
       <MfaSetupDialog
         isOpen={isQrDialogOpen}

apps/webapp/test/sessionDuration.test.ts

@@ -1,6 +1,8 @@
 import { containerTest } from "@internal/testcontainers";
 import { createCookieSessionStorage, type Session } from "@remix-run/node";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+
+vi.setConfig({ testTimeout: 60_000 });
 import {
   DEFAULT_SESSION_DURATION_SECONDS,
   ensureSessionIssuedAt,