feat(react): Improvements to Identifier first authenticator in the React SDK

.changeset/calm-deers-hug.md

@@ -0,0 +1,6 @@
+---
+"@asgardeo/react": patch
+"@asgardeo/js": patch
+---
+
+Improvements to Identifier first authenticator in the React SDK

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

@@ -28,5 +28,5 @@ export const common: Common = {
   'privacy.policy': 'Privacy Policy',
   register: 'Register',
   'site.title': 'WSO2 Identity Server',
-  'terms.of.service': 'Terms of Servicet',
+  'terms.of.service': 'Terms of Service',
 };

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {IdentifierFirst} from './model';
+
+export const identifierFirst: IdentifierFirst = {
+  continue: 'Continue',
+  'enter.your.username': 'Enter your username',
+  'login.button': 'Sign In',
+  'login.heading': 'Sign In',
+  'remember.me': 'Remember me on this computer',
+  retry: 'Login failed! Please check your username and password and try again.',
+  username: 'Username',
+};

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {IdentifierFirst} from './model';
+
+export const identifierFirst: IdentifierFirst = {
+  continue: 'Continuer',
+  'enter.your.username': "Entrez votre nom d'utilisateur",
+  'login.button': 'Se connecter',
+  'login.heading': 'Se connecter',
+  'remember.me': 'Se souvenir de moi sur cet ordinateur',
+  retry: "Échec de la connexion! Veuillez vérifier votre nom d'utilisateur et votre mot de passe et réessayer.",
+  username: "Nom d'utilisateur",
+};

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Interface for the IdentifierFirst text.
+ */
+export interface IdentifierFirst {
+  continue: string;
+  'enter.your.username': string;
+  'login.button': string;
+  'login.heading': string;
+  'remember.me': string;
+  retry: string;
+  username: string;
+}

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

@@ -75,6 +75,23 @@ interface Keys {
       placeholder: string;
     };
   };
+  identifierFirst: {
+    button: string;
+    continue: string;
+    enter: {
+      your: {
+        username: string;
+      };
+    };
+    login: {
+      heading: string;
+    };
+    remember: {
+      me: string;
+    };
+    retry: string;
+    username: string;
+  };
   login: {
     button: string;
     enter: {
@@ -183,6 +200,23 @@ export const keys: Keys = {
       placeholder: 'emailOtp.username.placeholder',
     },
   },
+  identifierFirst: {
+    button: 'identifierFirst.button',
+    continue: 'identifierFirst.continue',
+    enter: {
+      your: {
+        username: 'identifierFirst.enter.your.username',
+      },
+    },
+    login: {
+      heading: 'identifierFirst.login.heading',
+    },
+    remember: {
+      me: 'identifierFirst.remember.me',
+    },
+    retry: 'identifierFirst.retry',
+    username: 'identifierFirst.username',
+  },
   login: {
     button: 'login.login.button',
     enter: {

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

@@ -17,6 +17,7 @@
  */
 
 import {Common} from './common/model';
+import {IdentifierFirst} from './identifierFirst/model';
 import {Login} from './login/model';
 import {TOTP} from './totp/model';
 
@@ -25,11 +26,12 @@ import {TOTP} from './totp/model';
  */
 export interface TextPreference {
   common: Common;
+  identifierFirst: IdentifierFirst;
   login: Login;
   totp: TOTP;
 }
 
 /**
  * Interface for the return type of the getLocalization function.
  */
-export type TextObject = Login | TOTP | Common;
+export type TextObject = Login | TOTP | Common | IdentifierFirst;

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

@@ -62,7 +62,17 @@ import IdentifierFirst from './fragments/IdentifierFirst';
  * @returns {ReactElement} - React element.
  */
 const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
-  const {brandingProps, showFooter = true, showLogo = true, showSignUp} = props;
+  const {
+    basicAuthChildren,
+    brandingProps,
+    emailOtpChildren,
+    identifierFirstChildren,
+    showFooter = true,
+    showLogo = true,
+    showSignUp,
+    smsOtpChildren,
+    totpChildren,
+  } = props;
 
   const [isComponentLoading, setIsComponentLoading] = useState<boolean>(true);
   const [alert, setAlert] = useState<AlertType>();
@@ -231,7 +241,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
                 (auth: Authenticator) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId,
               ),
             )}
-          />
+          >
+            {basicAuthChildren}
+          </BasicAuth>
         );
       }
 
@@ -252,7 +264,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
                 (auth: Authenticator) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId,
               ),
             )}
-          />
+          >
+            {identifierFirstChildren}
+          </IdentifierFirst>
         );
       }
 
@@ -264,7 +278,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               authenticator={authenticators[0]}
               alert={alert}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {totpChildren}
+            </Totp>
           );
         }
         if (
@@ -279,7 +295,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               brandingProps={brandingProps}
               authenticator={authenticators[0]}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {emailOtpChildren}
+            </EmailOtp>
           );
         }
 
@@ -295,7 +313,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               brandingProps={brandingProps}
               authenticator={authenticators[0]}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {smsOtpChildren}
+            </SmsOtp>
           );
         }
       }

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import BasicAuthProps from '../../../models/basic-auth-props';
@@ -41,15 +41,15 @@ import './basic-auth.scss';
 const BasicAuth = ({
   handleAuthenticate,
   authenticator,
+  children,
   alert,
   brandingProps,
   showSelfSignUp,
   renderLoginOptions,
-}: BasicAuthProps): ReactElement => {
-  const [username, setUsername] = useState<string>('');
+}: PropsWithChildren<BasicAuthProps>): ReactElement => {
   const [password, setPassword] = useState<string>('');
 
-  const {isAuthLoading} = useContext(AsgardeoContext);
+  const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
 
   const {t, isLoading} = useTranslations({
     componentLocaleOverride: brandingProps?.locale,
@@ -103,6 +103,8 @@ const BasicAuth = ({
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setPassword(e.target.value)}
       />
 
+      {children}
+
       <UISignIn.Button
         color="primary"
         variant="contained"
@@ -114,8 +116,6 @@ const BasicAuth = ({
             password,
             username,
           });
-          setUsername('');
-          setPassword('');
         }}
       >
         {t(keys.login.button)}

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import EmailOtpProps from '../../../models/email-otp-props';
@@ -35,7 +35,7 @@ import './email-otp.scss';
  * @param {AlertType} props.alert - Alert type.
  * @return {ReactElement}
  */
-const EmailOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: EmailOtpProps): ReactElement => {
+const EmailOtp = ({alert, brandingProps, authenticator, children, handleAuthenticate}: PropsWithChildren<EmailOtpProps>): ReactElement => {
   const [inputValue, setInputValue] = useState<string>();
   const [isContinueLoading, setIsContinueLoading] = useState<boolean>(false);
   const [isResendLoading, setIsResendLoading] = useState<boolean>(false);
@@ -90,6 +90,8 @@ const EmailOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: Ema
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setInputValue(e.target.value)}
       />
 
+      { children }
+
       <UISignIn.Button
         fullWidth
         variant="contained"

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import BasicAuthProps from '../../../models/basic-auth-props';
@@ -43,12 +43,11 @@ const IdentifierFirst = ({
   authenticator,
   alert,
   brandingProps,
+  children,
   showSelfSignUp,
   renderLoginOptions,
-}: BasicAuthProps): ReactElement => {
-  const [username, setUsername] = useState<string>('');
-
-  const {isAuthLoading} = useContext(AsgardeoContext);
+}: PropsWithChildren<BasicAuthProps>): ReactElement => {
+  const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
 
   const {t, isLoading} = useTranslations({
     componentLocaleOverride: brandingProps?.locale,
@@ -91,6 +90,8 @@ const IdentifierFirst = ({
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setUsername(e.target.value)}
       />
 
+      {children}
+
       <UISignIn.Button
         color="primary"
         variant="contained"
@@ -101,7 +102,6 @@ const IdentifierFirst = ({
           handleAuthenticate(authenticator.authenticatorId, {
             username,
           });
-          setUsername('');
         }}
       >
         {t(keys.login.button)}