feat(react): add loading states, update SignIn and sample app, Add rollup for react.

packages/core/src/auth-client.ts

@@ -18,6 +18,7 @@
 
 import {AsgardeoAuthClient, Store, CryptoUtils, ResponseMode} from '@asgardeo/auth-js';
 import {UIAuthClient, UIAuthConfig} from './models/auth-config';
+import {BrandingPreferenceTypes} from './models/branding-api-response';
 
 /**
  * The `AuthClient` class is a singleton class that provides an instance of the `UIAuthClient`.
@@ -42,9 +43,15 @@ export class AuthClient {
    */
   static getInstance(authClientConfig?: UIAuthConfig, store?: Store, cryptoUtils?: CryptoUtils): UIAuthClient {
     if (!AuthClient.instance) {
+      const DEFAULT_NAME: string = 'carbon.super';
+
       const extendedAuthClientConfig: UIAuthConfig = {
         ...authClientConfig,
+        enableConsoleBranding: authClientConfig?.enableConsoleBranding ?? true,
+        enableConsoleTextBranding: authClientConfig?.enableConsoleTextBranding ?? true,
+        name: authClientConfig?.name ?? DEFAULT_NAME,
         responseMode: ResponseMode.direct,
+        type: authClientConfig?.type ?? BrandingPreferenceTypes.Org,
       };
 
       AuthClient.instance = new AsgardeoAuthClient();

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

@@ -42,7 +42,9 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
     let brandingFromConsole: BrandingPreferenceAPIResponse;
 
     try {
-      if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleBranding ?? true) {
+      const {enableConsoleBranding} = await AuthClient.getInstance().getDataLayer().getConfigData();
+
+      if (enableConsoleBranding) {
         brandingFromConsole = await getBrandingPreference();
       }
     } catch {

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

@@ -22,7 +22,6 @@ import {TextObject} from './screens/model';
 import getBrandingPreferenceText from '../api/get-branding-preference-text';
 import {AuthClient} from '../auth-client';
 import {UIAuthConfig} from '../models/auth-config';
-import {BrandingPreferenceTypes} from '../models/branding-api-response';
 import {BrandingPreferenceTextAPIResponse} from '../models/branding-text-api-response';
 import GetLocalizationProps from '../models/get-localization-props';
 
@@ -41,15 +40,13 @@ 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) {
+    if (configData.enableConsoleTextBranding) {
       textFromConsoleBranding = await getBrandingPreferenceText({
         locale,
-        name: configData.name ?? DEFAULT_NAME,
+        name: configData.name,
         screen,
-        type: configData.type ?? BrandingPreferenceTypes.Org,
+        type: configData.type,
       });
     }
   } catch (error) {

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/emailOtp/en-US.ts

@@ -20,7 +20,10 @@ import {EmailOTP} from './model';
 
 export const emailOtp: EmailOTP = {
   continue: 'Continue',
+  'email.heading': 'Sign In',
   'email.otp.heading': 'OTP Verification',
   'enter.verification.code.got.by.device': 'Enter the code sent to your email ID.',
   'resend.code': 'Resend code',
+  'username.label': 'Username',
+  'username.placeholder': 'Enter your username',
 };

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

@@ -21,7 +21,10 @@
  */
 export interface EmailOTP {
   continue: string;
+  'email.heading': string;
   'email.otp.heading': string;
   'enter.verification.code.got.by.device': string;
   'resend.code': string;
+  'username.label': string;
+  'username.placeholder': 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;
@@ -43,6 +51,7 @@ interface Keys {
   emailOtp: {
     continue: string;
     email: {
+      heading: string;
       otp: {
         heading: string;
       };
@@ -61,6 +70,10 @@ interface Keys {
     resend: {
       code: string;
     };
+    username: {
+      label: string;
+      placeholder: string;
+    };
   };
   login: {
     button: string;
@@ -116,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',
@@ -138,6 +159,7 @@ export const keys: Keys = {
   emailOtp: {
     continue: 'emailOtp.continue',
     email: {
+      heading: 'emailOtp.email.heading',
       otp: {
         heading: 'emailOtp.email.otp.heading',
       },
@@ -156,6 +178,10 @@ export const keys: Keys = {
     resend: {
       code: 'emailOtp.resend.code',
     },
+    username: {
+      label: 'emailOtp.username.label',
+      placeholder: 'emailOtp.username.placeholder',
+    },
   },
   login: {
     button: 'login.login.button',

packages/react/package.json

@@ -33,6 +33,10 @@
     "access": "public"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.12.7",
     "@types/randombytes": "^2.0.3",
     "@types/react": "^18.2.79",
@@ -44,6 +48,9 @@
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.75.0",
     "stylelint": "15.1.0",
     "tslib": "^2.6.2",
@@ -57,7 +64,8 @@
     "clsx": "^2.1.1",
     "fast-sha256": "^1.3.0",
     "jose": "^5.3.0",
-    "randombytes": "^2.1.0"
+    "randombytes": "^2.1.0",
+    "rollup": "^4.17.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/react/rollup.config.cjs

@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+
+const commonjs = require('@rollup/plugin-commonjs');
+const image = require('@rollup/plugin-image');
+const nodeResolve = require('@rollup/plugin-node-resolve');
+const typescript = require('@rollup/plugin-typescript');
+const dts = require('rollup-plugin-dts');
+const nodePolyfills = require('rollup-plugin-polyfill-node');
+const styles = require('rollup-plugin-styles');
+
+const pkg = require('./package.json');
+
+module.exports = [
+  {
+    cache: false,
+    external: ['react', 'react-dom'],
+    input: 'src/index.ts',
+    onwarn(warning, warn) {
+      // Suppress this error message... there are hundreds of them
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return;
+      // Use default for everything else
+      warn(warning);
+    },
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: pkg.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      nodePolyfills(),
+      nodeResolve({
+        browser: true,
+        preferBuiltins: true,
+      }),
+      commonjs(),
+      typescript({tsconfig: './tsconfig.lib.json'}),
+      styles({
+        mode: 'inject',
+      }),
+      image(),
+    ],
+  },
+  {
+    cache: false,
+    external: [/\.(sass|scss|css)$/] /* ignore style files */,
+    input: 'dist/esm/types/index.d.ts',
+    output: [{file: 'dist/index.d.ts', format: 'esm'}],
+    plugins: [dts.default()],
+  },
+];