From 7487decffde740c90c798e151e843bea6c82acf7 Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 11 Nov 2025 17:02:55 +0530 Subject: [PATCH 1/3] fix(react): update input variant logic to handle password fields correctly --- .../SignIn/component-driven/transformer.ts | 27 +++++++++---------- .../presentation/SignUp/transformer.ts | 18 ++++++------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts b/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts index 56e949a43..9d26348dd 100644 --- a/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts +++ b/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts @@ -31,16 +31,6 @@ const generateId = (prefix: string): string => { * Convert simple input type to component variant */ const getInputVariant = (type: string, name: string): 'TEXT' | 'EMAIL' | 'PASSWORD' => { - // Check name first (e.g., "password" field name) - const lowerName = name.toLowerCase(); - if (lowerName.includes('password')) { - return 'PASSWORD'; - } - if (lowerName.includes('email')) { - return 'EMAIL'; - } - - // Then check type switch (type.toLowerCase()) { case 'email': return 'EMAIL'; @@ -91,16 +81,25 @@ const convertSimpleInputToComponent = ( }, t: UseTranslation['t'], ): EmbeddedFlowComponent => { - const variant = getInputVariant(input.type, input.name); - const label = getInputLabel(input.name, input.type, t); - const placeholder = getInputPlaceholder(input.name, input.type, t); + let fieldType: string = input.type; + + // If the field name contains 'password' but type is 'string', change it to 'password' + // TODO: Need to remove this one the following improvement is done. + // Tracker: https://github.com/asgardeo/thunder/issues/725 + if (input.name.toLowerCase().includes('password') && input.type.toLowerCase() === 'string') { + fieldType = 'password'; + } + + const variant: 'TEXT' | 'EMAIL' | 'PASSWORD' = getInputVariant(fieldType, input.name); + const label: string = getInputLabel(input.name, fieldType, t); + const placeholder: string = getInputPlaceholder(input.name, fieldType, t); return { id: generateId('input'), type: EmbeddedFlowComponentType.Input, variant, config: { - type: input.type, + type: fieldType, label, placeholder, required: input.required as boolean, diff --git a/packages/react/src/components/presentation/SignUp/transformer.ts b/packages/react/src/components/presentation/SignUp/transformer.ts index 84cd86670..4e77b2133 100644 --- a/packages/react/src/components/presentation/SignUp/transformer.ts +++ b/packages/react/src/components/presentation/SignUp/transformer.ts @@ -37,15 +37,6 @@ const generateId = (prefix: string): string => { * Convert simple input type to component variant */ const getInputVariant = (type: string, name: string): 'TEXT' | 'EMAIL' | 'PASSWORD' => { - // Check name first (e.g., "password" field name) - const lowerName = name.toLowerCase(); - if (lowerName.includes('password')) { - return 'PASSWORD'; - } - if (lowerName.includes('email')) { - return 'EMAIL'; - } - // Then check type switch (type.toLowerCase()) { case 'email': @@ -102,6 +93,15 @@ const convertSimpleInputToComponent = ( }, t: UseTranslation['t'], ): EmbeddedFlowComponent => { + let fieldType: string = input.type; + + // If the field name contains 'password' but type is 'string', change it to 'password' + // TODO: Need to remove this one the following improvement is done. + // Tracker: https://github.com/asgardeo/thunder/issues/725 + if (input.name.toLowerCase().includes('password') && input.type.toLowerCase() === 'string') { + fieldType = 'password'; + } + const variant: 'TEXT' | 'EMAIL' | 'PASSWORD' = getInputVariant(input.type, input.name); const label: string = getInputLabel(input.name, input.type, t); const placeholder: string = getInputPlaceholder(input.name, input.type, t); From 93ef5c50f999b24cb0786937e4a8226a27784804 Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 11 Nov 2025 17:41:19 +0530 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20add=20changeset=20=F0=9F=A6=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/ten-guests-grin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ten-guests-grin.md diff --git a/.changeset/ten-guests-grin.md b/.changeset/ten-guests-grin.md new file mode 100644 index 000000000..0817f1c0a --- /dev/null +++ b/.changeset/ten-guests-grin.md @@ -0,0 +1,5 @@ +--- +'@asgardeo/react': patch +--- + +Update input variant logic to handle password fields correctly From d9daf5f72b3f01799f8426623cb6cdea63e94b8c Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 11 Nov 2025 17:46:57 +0530 Subject: [PATCH 3/3] fix: normalize action ID for translation lookup in SignIn and SignUp components --- .../SignIn/component-driven/transformer.ts | 10 ++++++++-- .../src/components/presentation/SignUp/transformer.ts | 7 ++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts b/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts index 9d26348dd..0c783ac40 100644 --- a/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts +++ b/packages/react/src/components/presentation/SignIn/component-driven/transformer.ts @@ -117,13 +117,19 @@ const convertActionToComponent = ( action: {type: string; id: string}, t: UseTranslation['t'], ): EmbeddedFlowComponent => { + // Normalize action ID for translation lookup (e.g., "google_auth" -> "google") + const normalizedId: string = action.id.replace(/_auth$/, ''); + // Use i18n key for button text, fallback to capitalized id - const i18nKey = `elements.buttons.${action.id}`; - let text = t(i18nKey); + const i18nKey: string = `elements.buttons.${normalizedId}`; + let text: string = t(i18nKey); + if (!text || text === i18nKey) { + // Fallback: format the original action ID text = action.id.replace(/_/g, ' '); text = text.charAt(0).toUpperCase() + text.slice(1); } + return { id: generateId('action'), type: EmbeddedFlowComponentType.Button, diff --git a/packages/react/src/components/presentation/SignUp/transformer.ts b/packages/react/src/components/presentation/SignUp/transformer.ts index 4e77b2133..45a7c7077 100644 --- a/packages/react/src/components/presentation/SignUp/transformer.ts +++ b/packages/react/src/components/presentation/SignUp/transformer.ts @@ -129,10 +129,15 @@ const convertActionToComponent = ( action: {type: string; id: string}, t: UseTranslation['t'], ): EmbeddedFlowComponent => { - const i18nKey: string = `elements.buttons.${action.id}`; + // Normalize action ID for translation lookup (e.g., "google_auth" -> "google") + const normalizedId: string = action.id.replace(/_auth$/, ''); + + // Use i18n key for button text, fallback to capitalized id + const i18nKey: string = `elements.buttons.${normalizedId}`; let text: string = t(i18nKey); if (!text || text === i18nKey) { + // Fallback: format the original action ID text = action.id.replace(/_/g, ' '); text = text.charAt(0).toUpperCase() + text.slice(1); }