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

DonOmalVindula · DonOmalVindula · commit bc005ef1a21b · 2024-06-26T16:51:11.000+05:30
diff --git a/packages/core/src/i18n/screens/common/en-US.ts b/packages/core/src/i18n/screens/common/en-US.ts
@@ -24,9 +24,9 @@ export const common: Common = {
   error: 'Something went wrong. Please try again.',
   'multiple.options.prefix': 'Sign in with',
   or: 'OR',
-  'prefix.register': "Don't have an account?",
+  'prefix.register': "Don't have an account? ",
   'privacy.policy': 'Privacy Policy',
   register: 'Register',
   'site.title': 'WSO2 Identity Server',
-  'terms.of.service': 'Terms of Servicet',
+  'terms.of.service': 'Terms of Service',
 };
diff --git a/packages/core/src/i18n/screens/identifierFirst/en-US.ts b/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',
+};
diff --git a/packages/core/src/i18n/screens/identifierFirst/fr-FR.ts b/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",
+};
diff --git a/packages/core/src/i18n/screens/identifierFirst/model.ts b/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;
+}
diff --git a/packages/core/src/i18n/screens/keys.ts b/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: {
diff --git a/packages/core/src/i18n/screens/model.ts b/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;
diff --git a/packages/react/src/assets/building-icon.svg b/packages/react/src/assets/building-icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+
+<!--
+ * Copyright (c) 2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. 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.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" id="building-icon" class="icon" width="14" height="14" viewBox="0 0 12.601 14">
+    <path id="ldap-outline" class="path fill primary"
+          d="M7.1,14H.4a.4.4,0,0,1-.4-.4V.4A.4.4,0,0,1,.4,0H6.7a.4.4,0,0,1,.4.4V3.2h5.1a.4.4,0,0,1,.4.4V14Zm0-.6h4.7a.2.2,0,0,0,.2-.2V11.32H7.1Zm-.6,0V.8A.2.2,0,0,0,6.3.6H.8A.2.2,0,0,0,.6.8V13.2a.2.2,0,0,0,.2.2H2.191V11.12a.4.4,0,0,1,.4-.4h1.95a.4.4,0,0,1,.4.4V13.4Zm-2.16,0V11.32H2.79V13.4ZM12,10.72V4a.2.2,0,0,0-.2-.2H7.1v6.92ZM10.471,9.1V8.5h.6v.6Zm-1.2,0V8.5h.6v.6Zm-1.2,0V8.5h.6v.6Zm-2.989,0V8.5h.6v.6Zm-1.2,0V8.5h.6v.6Zm-1.2,0V8.5h.6v.6Zm-1.2,0V8.5h.6v.6Zm8.99-1.2V7.3h.6v.6Zm-1.2,0V7.3h.6v.6Zm-1.2,0V7.3h.6v.6Zm-2.989,0V7.3h.6v.6Zm-1.2,0V7.3h.6v.6Zm-1.2,0V7.3h.6v.6Zm-1.2,0V7.3h.6v.6Zm8.99-1.2V6.1h.6v.6Zm-1.2,0V6.1h.6v.6Zm-1.2,0V6.1h.6v.6Zm-2.989,0V6.1h.6v.6Zm-1.2,0V6.1h.6v.6Zm-1.2,0V6.1h.6v.6Zm-1.2,0V6.1h.6v.6Zm8.99-1.2V4.9h.6v.6Zm-1.2,0V4.9h.6v.6Zm-1.2,0V4.9h.6v.6Zm-2.989,0V4.9h.6v.6Zm-1.2,0V4.9h.6v.6Zm-1.2,0V4.9h.6v.6Zm-1.2,0V4.9h.6v.6Zm3.6-1.2V3.7h.6v.6Zm-1.2,0V3.7h.6v.6Zm-1.2,0V3.7h.6v.6Zm-1.2,0V3.7h.6v.6Zm3.6-1.2V2.5h.6v.6Zm-1.2,0V2.5h.6v.6Zm-1.2,0V2.5h.6v.6Zm-1.2,0V2.5h.6v.6Zm3.6-1.2V1.3h.6v.6Zm-1.2,0V1.3h.6v.6Zm-1.2,0V1.3h.6v.6Zm-1.2,0V1.3h.6v.6Z"
+          fill="#464646"/>
+</svg>
diff --git a/packages/react/src/components/SignIn/fragments/BasicAuth.tsx b/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
@@ -46,10 +46,9 @@ const BasicAuth = ({
   showSelfSignUp,
   renderLoginOptions,
 }: BasicAuthProps): ReactElement => {
-  const [username, setUsername] = useState<string>('');
   const [password, setPassword] = useState<string>('');
 
-  const {isAuthLoading} = useContext(AsgardeoContext);
+  const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
 
   const {t, isLoading} = useTranslations({
     componentLocaleOverride: brandingProps?.locale,
@@ -114,8 +113,6 @@ const BasicAuth = ({
             password,
             username,
           });
-          setUsername('');
-          setPassword('');
         }}
       >
         {t(keys.login.button)}
diff --git a/packages/react/src/components/SignIn/fragments/IdentifierFirst.tsx b/packages/react/src/components/SignIn/fragments/IdentifierFirst.tsx
@@ -46,9 +46,7 @@ const IdentifierFirst = ({
   showSelfSignUp,
   renderLoginOptions,
 }: BasicAuthProps): ReactElement => {
-  const [username, setUsername] = useState<string>('');
-
-  const {isAuthLoading} = useContext(AsgardeoContext);
+  const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
 
   const {t, isLoading} = useTranslations({
     componentLocaleOverride: brandingProps?.locale,
@@ -101,7 +99,6 @@ const IdentifierFirst = ({
           handleAuthenticate(authenticator.authenticatorId, {
             username,
           });
-          setUsername('');
         }}
       >
         {t(keys.login.button)}
diff --git a/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx b/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
@@ -17,6 +17,7 @@
  */
 
 import {ReactElement} from 'react';
+import buildingIcon from '../../../assets/building-icon.svg';
 import emailSolid from '../../../assets/email-solid.svg';
 import smsIcon from '../../../assets/sms-icon.svg';
 import facebook from '../../../assets/social-logins/facebook.svg';
@@ -55,7 +56,7 @@ const LoginOptionsBox = ({
   <UISignIn.Button
     className={`Button-${socialName.toLowerCase()}`}
     social
-    startIcon={<img className="social-login-img" src={images[socialName]} alt={socialName} />}
+    startIcon={<img className="social-login-img" src={images[socialName] ?? buildingIcon} alt={socialName} />}
     onClick={handleOnClick}
     disabled={isAuthLoading}
   >
diff --git a/packages/react/src/hooks/use-authentication.ts b/packages/react/src/hooks/use-authentication.ts
@@ -32,7 +32,7 @@ import UseAuthentication from '../models/use-authentication';
 const useAuthentication = (): UseAuthentication => {
   const contextValue: AuthContext = useContext(AsgardeoContext);
 
-  const {user, isAuthenticated, accessToken, authResponse} = contextValue;
+  const {accessToken, authResponse, isAuthenticated, setUsername, user, username} = contextValue;
 
   const signOut: () => void = () => {
     signOutApiCall().then(() => {
@@ -47,8 +47,10 @@ const useAuthentication = (): UseAuthentication => {
     accessToken,
     authResponse,
     isAuthenticated,
+    setUsername,
     signOut,
     user,
+    username,
   };
 };
 
diff --git a/packages/react/src/models/auth-context.ts b/packages/react/src/models/auth-context.ts
@@ -35,7 +35,9 @@ interface AuthContext {
   setIsTextLoading: (value: boolean) => void;
   setOnSignIn: (response?: any) => void | Promise<void>;
   setOnSignOut: (response?: any) => void | Promise<void>;
+  setUsername: (username: string) => void;
   user: MeAPIResponse;
+  username: string;
 }
 
 export default AuthContext;
diff --git a/packages/react/src/models/use-authentication.ts b/packages/react/src/models/use-authentication.ts
@@ -22,8 +22,10 @@ interface UseAuthentication {
   accessToken: string;
   authResponse: AuthApiResponse;
   isAuthenticated: Promise<boolean> | boolean;
+  setUsername: (username: string) => void;
   signOut: () => void;
   user: MeAPIResponse;
+  username: string;
 }
 
 export default UseAuthentication;
diff --git a/packages/react/src/providers/AsgardeoProvider.tsx b/packages/react/src/providers/AsgardeoProvider.tsx
@@ -60,6 +60,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
   const [isTextLoading, setIsTextLoading] = useState<boolean>(true);
   const [isAuthLoading, setIsAuthLoading] = useState<boolean>(false);
   const [authResponse, setAuthResponse] = useState<AuthApiResponse>();
+  const [username, setUsername] = useState<string>('');
 
   const onSignInRef: React.MutableRefObject<Function> = useRef<Function>();
   const onSignOutRef: React.MutableRefObject<Function> = useRef<Function>();
@@ -146,7 +147,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       setIsTextLoading,
       setOnSignIn,
       setOnSignOut,
+      setUsername,
       user,
+      username,
     }),
     [
       accessToken,
@@ -160,7 +163,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       setAuthentication,
       setOnSignIn,
       setOnSignOut,
+      setUsername,
       user,
+      username,
     ],
   );
 
