fix(clerk-js): Add localization keys to SignInFactorTwoAlternativeMethods

Author: nikosdouvlis

packages/clerk-js/src/ui/SignIn/AlternativeMethods.tsx

@@ -55,7 +55,10 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
           elementDescriptor={descriptors.main}
           gap={8}
         >
-          <SignInSocialButtons />
+          <SignInSocialButtons
+            enableWeb3Providers
+            enableOAuthProviders
+          />
           <Flex
             elementDescriptor={descriptors.alternativeMethods}
             direction='col'

packages/clerk-js/src/ui/SignIn/SignInFactorTwoAlternativeMethods.tsx

@@ -2,7 +2,7 @@ import { SignInFactor } from '@clerk/types';
 import React from 'react';
 
 import { useCoreSignIn } from '../../ui/contexts/';
-import { descriptors, Flex, Flow } from '../customizables';
+import { Col, descriptors, Flow, localizationKeys } from '../customizables';
 import { ArrowBlockButton, Card, CardAlert, Footer, Header } from '../elements';
 import { useCardState } from '../elements/contexts';
 import { formatSafeIdentifier } from '../utils';
@@ -41,18 +41,14 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
         <CardAlert>{card.error}</CardAlert>
         <Header.Root>
           {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
-          <Header.Title>Use another method</Header.Title>
+          <Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
         </Header.Root>
         {/*TODO: extract main in its own component */}
-        <Flex
-          direction='col'
+        <Col
           elementDescriptor={descriptors.main}
           gap={8}
         >
-          <Flex
-            direction='col'
-            gap={2}
-          >
+          <Col gap={2}>
             {supportedSecondFactors.map((factor, i) => (
               <ArrowBlockButton
                 key={i}
@@ -62,11 +58,14 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
                 {getButtonLabel(factor)}
               </ArrowBlockButton>
             ))}
-          </Flex>
-        </Flex>
+          </Col>
+        </Col>
         <Footer.Root>
           <Footer.Action>
-            <Footer.ActionLink onClick={onHavingTroubleClick}>Get help</Footer.ActionLink>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
           </Footer.Action>
           <Footer.Links />
         </Footer.Root>

packages/clerk-js/src/ui/SignUp/SignUpStart.tsx

@@ -270,9 +270,7 @@ function _SignUpStart(): JSX.Element {
             <Footer.ActionLink
               localizationKey={localizationKeys('signUp.start.actionLink')}
               to={signInUrl}
-            >
-              Sign in
-            </Footer.ActionLink>
+            />
           </Footer.Action>
           <Footer.Links />
         </Footer.Root>

packages/clerk-js/src/ui/elements/Footer.tsx

@@ -28,7 +28,6 @@ const FooterAction = (props: React.PropsWithChildren<any>): JSX.Element => {
 const FooterActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
   return (
     <Text
-      localizationKey={descriptors.footerActionText.objectKey}
       elementDescriptor={descriptors.footerActionText}
       {...props}
       as='span'
@@ -41,7 +40,6 @@ const FooterActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
 const FooterActionLink = (props: PropsOfComponent<typeof RouterLink>): JSX.Element => {
   return (
     <RouterLink
-      localizationKey={descriptors.footerActionLink.objectKey}
       elementDescriptor={descriptors.footerActionLink}
       {...props}
       colorScheme='primary'