Merge pull request #19386 from mozilla/3rd-party-auth-rp-separator

feat(settings): add separator and 'Sign in with' copy to RP 3rd-party auth flow

packages/fxa-settings/src/components/ThirdPartyAuth/en.ftl

@@ -1,10 +1,13 @@
 ## ThirdPartyAuth component
 ## This is a component that is used to display a list of third party providers (Apple, Google, etc.)
 
-# This appears when a user has the option to authenticate via third party accounts in addition to their Firefox account. 
-# Firefox account login appears on top, and third party options appear on bottom. 
-# This string appears as a separation between the two, in the following order: "Enter your password" "Or"(this string) "Continue with Google"(continue-with-google-button) / "Continue with Apple"(continue-with-apple-button)
+# This appears when a user has the option to authenticate via third party accounts in addition to their Firefox account.
+# Firefox account login appears on top, and third party options appear on bottom.
+# This string appears as a separation between the two, in the following order: "Enter your password" "Or"(this string) (continue-with-google-button with aria equivalent text) / (continue-with-apple-button with aria equivalent text)
 third-party-auth-options-or = or
 
+# For the sign-in page, when 3rd-party auth is the only option, this string appears with a divider line between the user's avatar on top and 3rd-party authentication buttons (continue-with-google continue-with-apple buttons) on bottom.
+# This could also be translated as "Sign in with the following" or "Sign in with the below".
+
 continue-with-google-button = Continue with { -brand-google }
 continue-with-apple-button = Continue with { -brand-apple }

packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx

@@ -22,6 +22,7 @@ export type ThirdPartyAuthProps = {
   viewName?: string;
   deeplink?: string;
   flowQueryParams?: QueryParams;
+  separatorTextId?: string;
 };
 
 /**
@@ -36,6 +37,7 @@ const ThirdPartyAuth = ({
   viewName = 'unknown',
   deeplink,
   flowQueryParams,
+  separatorTextId
 }: ThirdPartyAuthProps) => {
   const config = useConfig();
 
@@ -53,7 +55,7 @@ const ThirdPartyAuth = ({
           <>
             <div className="text-sm flex items-center justify-center my-6">
               <div className="flex-1 h-px bg-grey-300 divide-x"></div>
-              <FtlMsg id="third-party-auth-options-or">
+              <FtlMsg id={separatorTextId || 'third-party-auth-options-or'}>
                 <div className="mx-4 text-base text-grey-300 font-extralight">
                   or
                 </div>

packages/fxa-settings/src/pages/Signin/index.tsx

@@ -508,7 +508,12 @@ const Signin = ({
 
       {!hideThirdPartyAuth && (
         <ThirdPartyAuth
-          showSeparator={!hasLinkedAccountAndNoPassword}
+          showSeparator={true}
+          separatorTextId={
+            hasLinkedAccountAndNoPassword
+              ? 'third-party-auth-options-sign-in-with'
+              : undefined
+          }
           {...{ viewName, flowQueryParams }}
         />
       )}