feat: 🌐 add some common strings for i18n

Author: movinsilva

packages/core/src/i18n/screens/common/en-US.ts

@@ -19,8 +19,10 @@
 import {Common} from './model';
 
 export const common: Common = {
+  'common.title': 'Sign In',
   copyright: '© {{currentYear}} WSO2 LLC.',
   error: 'Something went wrong. Please try again.',
+  'multiple.options.prefix': 'Sign in with',
   or: 'OR',
   'prefix.register': "Don't have an account?",
   'privacy.policy': 'Privacy Policy',

packages/core/src/i18n/screens/common/fr-FR.ts

@@ -19,8 +19,10 @@
 import {Common} from './model';
 
 export const common: Common = {
+  'common.title': "S'identifier",
   copyright: '© {{currentYear}} WSO2 LLC.',
   error: "Quelque chose s'est mal passé. Veuillez réessayer.",
+  'multiple.options.prefix': 'Se connecter avec',
   or: 'OU',
   'prefix.register': "Vous n'avez pas de compte?",
   'privacy.policy': 'Politique de confidentialité',

packages/core/src/i18n/screens/common/model.ts

@@ -20,8 +20,10 @@
  * Interface for the common text.
  */
 export interface Common {
+  'common.title': string;
   copyright: string;
   error: string;
+  'multiple.options.prefix': string;
   or: string;
   'prefix.register': string;
   'privacy.policy': string;

packages/core/src/i18n/screens/keys.ts

@@ -21,8 +21,16 @@
  */
 interface Keys {
   common: {
+    common: {
+      title: string;
+    };
     copyright: string;
     error: string;
+    multiple: {
+      options: {
+        prefix: string;
+      };
+    };
     or: string;
     prefix: {
       register: string;
@@ -121,8 +129,16 @@ interface Keys {
 
 export const keys: Keys = {
   common: {
+    common: {
+      title: 'common.common.title',
+    },
     copyright: 'common.copyright',
     error: 'common.error',
+    multiple: {
+      options: {
+        prefix: 'common.multiple.options.prefix',
+      },
+    },
     or: 'common.or',
     prefix: {
       register: 'common.prefix.register',

packages/react/src/components/SignIn/SignIn.tsx

@@ -200,7 +200,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         <LoginOptionsBox
           isAuthLoading={authContext.isAuthLoading}
           socialName={authenticator.authenticator}
-          displayName={displayName}
+          displayName={`${t(keys.common.multiple.options.prefix)} ${displayName}`}
           handleOnClick={(): Promise<void> => handleAuthenticate(authenticator.authenticatorId)}
           key={authenticator.authenticatorId}
         />,
@@ -286,7 +286,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         return (
           <UISignIn.Paper className="asgardeo-multiple-options-paper">
             <UISignIn.Typography title className="multiple-otions-title">
-              Sign In
+              {t(keys.common.common.title)}
             </UISignIn.Typography>
             {!usernamePasswordAuthenticator && alert && (
               <UISignIn.Alert className="asgardeo-sign-in-alert" {...alert?.alertType}>

packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx

@@ -58,7 +58,7 @@ const LoginOptionsBox = ({
     onClick={handleOnClick}
     disabled={isAuthLoading}
   >
-    Sign In with {displayName}
+    {displayName}
   </UISignIn.Button>
 );