vis

web/packages/accounts/components/LoginComponents.tsx

@@ -19,22 +19,40 @@ import {
     AccountsPageFooter,
 } from "./layouts/centered-paper";
 
-export const PasswordHeader: React.FC<React.PropsWithChildren> = ({
-    children,
-}) => {
-    return (
-        <Header_>
-            <Typography variant="h3">{t("password")}</Typography>
-            <Typography sx={{ color: "text.faint" }}>{children}</Typography>
-        </Header_>
-    );
-};
+interface HeaderCaptionProps {
+    /**
+     * If specified, then a caption to display below the title (which is
+     * expected to be passed as the `children`).
+     *
+     * The components which use the {@link HeaderCaptionProps} that they'll have
+     * the same height irrespective of whether or not the caption is provided.
+     * This allows us to use this component to get a similar look across various
+     * pages in the login flow (some of which have a caption, some which not).
+     */
+    caption?: string;
+}
 
-const PasskeyHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const PasswordHeader: React.FC<HeaderCaptionProps> = (props) => (
+    <AccountsPageTitleWithCaption {...props}>
+        {t("password")}
+    </AccountsPageTitleWithCaption>
+);
+
+const PasskeyHeader: React.FC<HeaderCaptionProps> = (props) => (
+    <AccountsPageTitleWithCaption {...props}>
+        {t("passkey")}
+    </AccountsPageTitleWithCaption>
+);
+
+export const AccountsPageTitleWithCaption: React.FC<
+    React.PropsWithChildren<HeaderCaptionProps>
+> = ({ caption, children }) => {
     return (
         <Header_>
-            <Typography variant="h3">{t("passkey")}</Typography>
-            <Typography sx={{ color: "text.faint" }}>{children}</Typography>
+            <Typography variant="h3">{children}</Typography>
+            <Typography sx={{ color: "text.faint" }}>
+                {caption ?? ""}
+            </Typography>
         </Header_>
     );
 };
@@ -123,7 +141,7 @@ export const VerifyingPasskey: React.FC<VerifyingPasskeyProps> = ({
 
     return (
         <AccountsPageContents>
-            <PasskeyHeader>{email ?? ""}</PasskeyHeader>
+            <PasskeyHeader caption={email} />
 
             <VerifyingPasskeyMiddle>
                 <VerifyingPasskeyStatus>

web/packages/accounts/components/LoginContents.tsx

@@ -12,6 +12,7 @@ import { t } from "i18next";
 import { useRouter } from "next/router";
 import React, { useCallback } from "react";
 import { z } from "zod/v4";
+import { AccountsPageTitleWithCaption } from "./LoginComponents";
 
 interface LoginContentsProps {
     /** Called when the user clicks the signup option instead.  */
@@ -85,10 +86,9 @@ export const LoginContents: React.FC<LoginContentsProps> = ({
 
     return (
         <>
-            {/* AccountsPageTitle, inlined to tweak mb */}
-            <Typography variant="h3" sx={{ flex: 1, mb: 4 }}>
+            <AccountsPageTitleWithCaption>
                 {t("login")}
-            </Typography>
+            </AccountsPageTitleWithCaption>
             <form onSubmit={formik.handleSubmit}>
                 <TextField
                     name="email"

web/packages/accounts/pages/credentials.tsx

@@ -334,7 +334,7 @@ const Page: React.FC = () => {
     // possibility using types.
     return (
         <AccountsPageContents>
-            <PasswordHeader>{user?.email ?? ""}</PasswordHeader>
+            <PasswordHeader caption={user?.email} />
             <VerifyMasterPasswordForm
                 user={user}
                 keyAttributes={keyAttributes}