feat(react): add SignIn component and create sample app

.vscode/settings.json

@@ -3,7 +3,8 @@
         "workspace",
         "core",
         "react",
-        "auth-components"
+        "auth-components",
+        "sample-app"
     ],
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"

package.json

@@ -8,6 +8,7 @@
     "nx": "18.2.4"
   },
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "recipes/*"
   ]
 }

packages/core/src/api/sign-out.ts

@@ -18,6 +18,7 @@
 
 import {AuthClient, ResponseMode} from '../auth-client';
 import AsgardeoUIException from '../exception';
+import {UIAuthClient} from '../models/auth-config';
 
 /**
  * Sign out the user.
@@ -45,9 +46,11 @@ const signOut = async (): Promise<void> => {
 
   const formBody: URLSearchParams = new URLSearchParams();
 
+  const authClient: UIAuthClient = AuthClient.getInstance();
+
   try {
-    formBody.append('id_token_hint', await AuthClient.getInstance().getIDToken());
-    formBody.append('client_id', (await AuthClient.getInstance().getDataLayer().getConfigData()).clientID);
+    formBody.append('id_token_hint', await authClient.getIDToken());
+    formBody.append('client_id', (await authClient.getDataLayer().getConfigData()).clientID);
     formBody.append('response_mode', ResponseMode.direct);
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
@@ -60,7 +63,8 @@ const signOut = async (): Promise<void> => {
   };
 
   try {
-    signOutUrl = (await AuthClient.getInstance().getOIDCServiceEndpoints()).endSessionEndpoint;
+    const {endSessionEndpoint} = await authClient.getOIDCServiceEndpoints();
+    signOutUrl = endSessionEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-NF', 'Failed to retrieve the sign out endpoint.');
   }

packages/core/src/branding/get-branding.ts

@@ -41,8 +41,14 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
   if (!merged) {
     let brandingFromConsole: BrandingPreferenceAPIResponse;
 
-    if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleBranding ?? true) {
-      brandingFromConsole = await getBrandingPreference();
+    try {
+      if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleBranding ?? true) {
+        brandingFromConsole = await getBrandingPreference();
+      }
+    } catch {
+      /**
+       * If the branding from the console cannot be fetched, proceed with the default branding.
+       */
     }
 
     if (brandingFromConsole?.preference?.configs?.isBrandingEnabled) {

packages/core/src/i18n/get-localization.ts

@@ -21,7 +21,6 @@ import merge from 'lodash.merge';
 import {TextObject} from './screens/model';
 import getBrandingPreferenceText from '../api/get-branding-preference-text';
 import {AuthClient} from '../auth-client';
-import AsgardeoUIException from '../exception';
 import {UIAuthConfig} from '../models/auth-config';
 import {BrandingPreferenceTypes} from '../models/branding-api-response';
 import {BrandingPreferenceTextAPIResponse} from '../models/branding-text-api-response';
@@ -42,21 +41,21 @@ const getLocalization = async (props: GetLocalizationProps): Promise<TextObject>
 
   const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getDataLayer().getConfigData();
 
+  const DEFAULT_NAME: string = 'carbon.super';
+
   try {
     if (configData.enableConsoleTextBranding ?? true) {
       textFromConsoleBranding = await getBrandingPreferenceText({
         locale,
-        name: configData.name ?? 'carbon.super',
+        name: configData.name ?? DEFAULT_NAME,
         screen,
         type: configData.type ?? BrandingPreferenceTypes.Org,
       });
     }
   } catch (error) {
-    throw new AsgardeoUIException(
-      'JS_UI_CORE-LOCALIZATION-IV',
-      'Error occurred while fetching text from console branding.',
-      error.stack,
-    );
+    /**
+     * If the branding from the console cannot be fetched, proceed with the default branding.
+     */
   }
 
   /**

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

@@ -20,7 +20,11 @@ import {Common} from './model';
 
 export const common: Common = {
   copyright: '© {{currentYear}} WSO2 LLC.',
+  error: 'Something went wrong. Please try again.',
+  or: 'OR',
+  'prefix.register': "Don't have an account?",
   'privacy.policy': 'Privacy Policy',
+  register: 'Register',
   'site.title': 'WSO2 Identity Server',
   'terms.of.service': 'Terms of Servicet',
 };

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

@@ -20,7 +20,11 @@ import {Common} from './model';
 
 export const common: Common = {
   copyright: '© {{currentYear}} WSO2 LLC.',
+  error: "Quelque chose s'est mal passé. Veuillez réessayer.",
+  or: 'OU',
+  'prefix.register': "Vous n'avez pas de compte?",
   'privacy.policy': 'Politique de confidentialité',
+  register: "S'inscrire",
   'site.title': 'Identity Server WSO2',
   'terms.of.service': 'Conditions de service',
 };

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

@@ -21,7 +21,11 @@
  */
 export interface Common {
   copyright: string;
+  error: string;
+  or: string;
+  'prefix.register': string;
   'privacy.policy': string;
+  register: string;
   'site.title': string;
   'terms.of.service': string;
 }

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

@@ -0,0 +1,26 @@
+/**
+ * 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 {EmailOTP} from './model';
+
+export const emailOtp: EmailOTP = {
+  continue: 'Continue',
+  'email.otp.heading': 'OTP Verification',
+  'enter.verification.code.got.by.device': 'Enter the code sent to your email ID.',
+  'resend.code': 'Resend code',
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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 TOTP text.
+ */
+export interface EmailOTP {
+  continue: string;
+  'email.otp.heading': string;
+  'enter.verification.code.got.by.device': string;
+  'resend.code': string;
+}

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

@@ -22,9 +22,15 @@
 interface Keys {
   common: {
     copyright: string;
+    error: string;
+    or: string;
+    prefix: {
+      register: string;
+    };
     privacy: {
       policy: string;
     };
+    register: string;
     site: {
       title: string;
     };
@@ -34,6 +40,28 @@ interface Keys {
       };
     };
   };
+  emailOtp: {
+    continue: string;
+    email: {
+      otp: {
+        heading: string;
+      };
+    };
+    enter: {
+      verification: {
+        code: {
+          got: {
+            by: {
+              device: string;
+            };
+          };
+        };
+      };
+    };
+    resend: {
+      code: string;
+    };
+  };
   login: {
     button: string;
     enter: {
@@ -49,8 +77,22 @@ interface Keys {
     remember: {
       me: string;
     };
+    retry: string;
     username: string;
   };
+  smsOtp: {
+    continue: string;
+    resend: {
+      code: string;
+    };
+
+    sms: {
+      otp: {
+        heading: string;
+        subheading: string;
+      };
+    };
+  };
   totp: {
     continue: string;
     enroll: {
@@ -75,9 +117,15 @@ interface Keys {
 export const keys: Keys = {
   common: {
     copyright: 'common.copyright',
+    error: 'common.error',
+    or: 'common.or',
+    prefix: {
+      register: 'common.prefix.register',
+    },
     privacy: {
       policy: 'common.privacy.policy',
     },
+    register: 'common.register',
     site: {
       title: 'common.site.title',
     },
@@ -87,6 +135,28 @@ export const keys: Keys = {
       },
     },
   },
+  emailOtp: {
+    continue: 'emailOtp.continue',
+    email: {
+      otp: {
+        heading: 'emailOtp.email.otp.heading',
+      },
+    },
+    enter: {
+      verification: {
+        code: {
+          got: {
+            by: {
+              device: 'emailOtp.enter.verification.code.got.by.device',
+            },
+          },
+        },
+      },
+    },
+    resend: {
+      code: 'emailOtp.resend.code',
+    },
+  },
   login: {
     button: 'login.login.button',
     enter: {
@@ -102,8 +172,22 @@ export const keys: Keys = {
     remember: {
       me: 'login.remember.me',
     },
+    retry: 'login.retry',
     username: 'login.username',
   },
+  smsOtp: {
+    continue: 'smsOtp.continue',
+    resend: {
+      code: 'smsOtp.resend.code',
+    },
+
+    sms: {
+      otp: {
+        heading: 'smsOtp.sms.otp.heading',
+        subheading: 'smsOtp.sms.otp.subheading',
+      },
+    },
+  },
   totp: {
     continue: 'totp.continue',
     enroll: {

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

@@ -25,5 +25,6 @@ export const login: Login = {
   'login.heading': 'Sign In',
   password: 'Password',
   '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/login/fr-FR.ts

@@ -25,5 +25,6 @@ export const login: Login = {
   'login.heading': 'Se connecter',
   password: 'Mot de passe',
   '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/login/model.ts

@@ -26,5 +26,6 @@ export interface Login {
   'login.heading': string;
   password: string;
   'remember.me': string;
+  retry: string;
   username: string;
 }

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

@@ -0,0 +1,26 @@
+/**
+ * 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 {SmsOTP} from './model';
+
+export const smsOtp: SmsOTP = {
+  continue: 'Continue',
+  'resend.code': 'Resend code',
+  'sms.otp.heading': 'OTP Verification',
+  'sms.otp.subheading': 'Enter the code sent to your mobile device.',
+};