From 385d463f8d090a1dd673690c8cd8b1e4d091f27b Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Wed, 5 Feb 2025 14:48:19 +0530 Subject: [PATCH 1/6] Introduce branding support for push authentication screen --- .../preview/branding-preference-preview.tsx | 1 + .../fragments/push-auth-fragment.tsx | 83 +++++++++++++++++++ .../preview/sign-in-box/sign-in-box.tsx | 3 + .../custom-text-preference-constants.ts | 8 ++ .../models/custom-text-preference.ts | 1 + .../models/branding-preferences.ts | 1 + .../endpoint/i18n/Resources.properties | 2 + .../src/main/webapp/pushAuth.jsp | 2 +- .../i18n/src/models/namespaces/branding-ns.ts | 1 + .../translations/en-US/portals/branding.ts | 1 + 10 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx diff --git a/features/admin.branding.v1/components/preview/branding-preference-preview.tsx b/features/admin.branding.v1/components/preview/branding-preference-preview.tsx index ba272ce279c..81d5af8f744 100644 --- a/features/admin.branding.v1/components/preview/branding-preference-preview.tsx +++ b/features/admin.branding.v1/components/preview/branding-preference-preview.tsx @@ -272,6 +272,7 @@ export const BrandingPreferencePreview: FunctionComponent = ( + props: PushAuthFragmentInterface +): ReactElement => { + const { ["data-componentid"]: componentId } = props; + + const { i18n } = useBrandingPreference(); + + return ( +
+

+ { i18n(CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.PUSH_AUTH.HEADING, "Verify Your Identity") } +

+ +
+
+

+ { + i18n(CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.PUSH_AUTH.BODY, + // eslint-disable-next-line max-len + "A push notification has been sent to your device. Please respond to the request to continue." + ) + } +

+ +
+
+
+ +
+
+
+
+
+ ); +}; + +/** + * Default props for the component. + */ +PushAuthFragment.defaultProps = { + "data-componentid": "branding-preview-totp-fragment" +}; + +export default PushAuthFragment; diff --git a/features/admin.branding.v1/components/preview/sign-in-box/sign-in-box.tsx b/features/admin.branding.v1/components/preview/sign-in-box/sign-in-box.tsx index 790132cc4b6..92eba23da44 100644 --- a/features/admin.branding.v1/components/preview/sign-in-box/sign-in-box.tsx +++ b/features/admin.branding.v1/components/preview/sign-in-box/sign-in-box.tsx @@ -35,6 +35,7 @@ import PasswordRecoveryMultiOptionFragment from "./fragments/password-recovery/p import PasswordRecoverySMSFragment from "./fragments/password-recovery/password-recovery-sms-otp-fragment"; import PasswordResetFragment from "./fragments/password-reset-fragment"; import PasswordResetSuccessFragment from "./fragments/password-reset-success-fragment"; +import PushAuthFragment from "./fragments/push-auth-fragment"; import SignUpFragment from "./fragments/sign-up-fragment"; import SMSOTPFragment from "./fragments/sms-otp-fragment"; import TOTPFragment from "./fragments/totp-fragment"; @@ -83,6 +84,8 @@ const SignInBox: FunctionComponent = ( return ; } else if (selectedScreen === PreviewScreenType.EMAIL_OTP) { return ; + } else if (selectedScreen === PreviewScreenType.PUSH_AUTH) { + return ; } else if (selectedScreen === PreviewScreenType.SMS_OTP) { return ; } else if (selectedScreen === PreviewScreenType.TOTP) { diff --git a/features/admin.branding.v1/constants/custom-text-preference-constants.ts b/features/admin.branding.v1/constants/custom-text-preference-constants.ts index 5c5da78472e..8d8aeb56af9 100644 --- a/features/admin.branding.v1/constants/custom-text-preference-constants.ts +++ b/features/admin.branding.v1/constants/custom-text-preference-constants.ts @@ -181,6 +181,10 @@ export class CustomTextPreferenceConstants { BODY: string; }, PRIVACY_POLICY: string; + PUSH_AUTH: { + HEADING: string; + BODY: string; + }, REGISTER_TEXT: { MESSAGE: string; REGISTER: string; @@ -242,6 +246,10 @@ export class CustomTextPreferenceConstants { HEADING: "password.reset.success.heading" }, PRIVACY_POLICY: "privacy.policy", + PUSH_AUTH: { + HEADING: "push.auth.heading", + BODY: "push.notification.sent.msg" + }, REGISTER_TEXT: { MESSAGE: "dont.have.an.account", REGISTER: "register" diff --git a/features/admin.branding.v1/models/custom-text-preference.ts b/features/admin.branding.v1/models/custom-text-preference.ts index dd38d816af3..9df5a776dc2 100644 --- a/features/admin.branding.v1/models/custom-text-preference.ts +++ b/features/admin.branding.v1/models/custom-text-preference.ts @@ -123,6 +123,7 @@ export const BASE_DISPLAY_VARIATION :Record # EDITABLE=true,SCREEN="push-auth",MULTI_LINE=false push.auth.heading=Verify Your Request +# EDITABLE=true,SCREEN="push-auth",MULTI_LINE=false +push.notification.sent.msg=A push notification has been sent to your device. Please respond to the request to continue. # welcome=Welcome diff --git a/identity-apps-core/apps/authentication-portal/src/main/webapp/pushAuth.jsp b/identity-apps-core/apps/authentication-portal/src/main/webapp/pushAuth.jsp index a7e91b3c796..21e7195f0f8 100644 --- a/identity-apps-core/apps/authentication-portal/src/main/webapp/pushAuth.jsp +++ b/identity-apps-core/apps/authentication-portal/src/main/webapp/pushAuth.jsp @@ -189,7 +189,7 @@ <% } else { %>

- <%=AuthenticationEndpointUtil.i18n(resourceBundle, "push.notification.sent.msg")%> + <%=i18n(resourceBundle, customText, "push.notification.sent.msg")%>

<% } %> diff --git a/modules/i18n/src/models/namespaces/branding-ns.ts b/modules/i18n/src/models/namespaces/branding-ns.ts index a51fd497527..19ff346518f 100644 --- a/modules/i18n/src/models/namespaces/branding-ns.ts +++ b/modules/i18n/src/models/namespaces/branding-ns.ts @@ -175,6 +175,7 @@ export interface BrandingNS { "password-recovery": string; "password-reset": string; "password-reset-success": string; + "push-auth": string; "username-recovery-claim": string; "username-recovery-channel-selection": string; "username-recovery-success": string; diff --git a/modules/i18n/src/translations/en-US/portals/branding.ts b/modules/i18n/src/translations/en-US/portals/branding.ts index f62d422000f..1bfce3ba798 100644 --- a/modules/i18n/src/translations/en-US/portals/branding.ts +++ b/modules/i18n/src/translations/en-US/portals/branding.ts @@ -172,6 +172,7 @@ export const branding: BrandingNS = { "password-recovery": "Password Recovery", "password-reset": "Password Reset", "password-reset-success": "Password Reset Link Sent", + "push-auth": "Push Authentication", "sign-up": "Sign Up", "sms-otp": "SMS OTP", "totp": "TOTP", From 36688f8894c54be04e79e8d2f2c97ddba30f688d Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Wed, 5 Feb 2025 14:49:44 +0530 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=A6=8B=20Add=20changeset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/slow-moons-sing.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/slow-moons-sing.md diff --git a/.changeset/slow-moons-sing.md b/.changeset/slow-moons-sing.md new file mode 100644 index 00000000000..9c300e05f66 --- /dev/null +++ b/.changeset/slow-moons-sing.md @@ -0,0 +1,8 @@ +--- +"@wso2is/common.branding.v1": minor +"@wso2is/admin.branding.v1": minor +"@wso2is/identity-apps-core": patch +"@wso2is/i18n": patch +--- + +Introduce branding support for push authentication screen From bd7374c93654a68e64d833cdb1cba5c4ef7d0136 Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Wed, 5 Feb 2025 15:43:44 +0530 Subject: [PATCH 3/6] Address eslint warnings --- .../custom-text-preference-constants.ts | 260 +++++++++--------- 1 file changed, 130 insertions(+), 130 deletions(-) diff --git a/features/admin.branding.v1/constants/custom-text-preference-constants.ts b/features/admin.branding.v1/constants/custom-text-preference-constants.ts index 8d8aeb56af9..da7a24b0d37 100644 --- a/features/admin.branding.v1/constants/custom-text-preference-constants.ts +++ b/features/admin.branding.v1/constants/custom-text-preference-constants.ts @@ -48,43 +48,43 @@ export class CustomTextPreferenceConstants { CUSTOM_TEXT_PREFERENCE_UPDATE_ERROR: IdentityAppsError; CUSTOM_TEXT_PREFERENCE_UPDATE_INVALID_STATUS_CODE_ERROR: IdentityAppsError; } = { - CUSTOM_TEXT_PREFERENCE_DELETE_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_DELETE_ERROR_CODE, - "An error occurred while deleting the Text Customizations for the requested resource.", - "Error while deleting Text Customizations", - null - ), - CUSTOM_TEXT_PREFERENCE_DELETE_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_DELETE_INVALID_STATUS_CODE_ERROR_CODE, - "Received an invalid status code while deleting the Text Customizations for the requested resource.", - "Invalid Error Code while deleting Text Customizations", - null - ), - CUSTOM_TEXT_PREFERENCE_FETCH_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_FETCH_ERROR_CODE, - "An error occurred while fetching the Text Customizations for the requested resource.", - "Error while fetching Text Customizations", - null - ), - CUSTOM_TEXT_PREFERENCE_FETCH_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_FETCH_INVALID_STATUS_CODE_ERROR_CODE, - "Received an invalid status code while fetching the Text Customizations for the requested resource.", - "Invalid Error Code while fetching Text Customizations", - null - ), - CUSTOM_TEXT_PREFERENCE_UPDATE_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_UPDATE_ERROR_CODE, - "An error occurred while updating the Text Customizations for the requested resource.", - "Error while updating Text Customizations", - null - ), - CUSTOM_TEXT_PREFERENCE_UPDATE_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( - CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_UPDATE_INVALID_STATUS_CODE_ERROR_CODE, - "Received an invalid status code while updating the Text Customizations for the requested resource.", - "Invalid Error Code while updating Text Customizations", - null - ) -}; + CUSTOM_TEXT_PREFERENCE_DELETE_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_DELETE_ERROR_CODE, + "An error occurred while deleting the Text Customizations for the requested resource.", + "Error while deleting Text Customizations", + null + ), + CUSTOM_TEXT_PREFERENCE_DELETE_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_DELETE_INVALID_STATUS_CODE_ERROR_CODE, + "Received an invalid status code while deleting the Text Customizations for the requested resource.", + "Invalid Error Code while deleting Text Customizations", + null + ), + CUSTOM_TEXT_PREFERENCE_FETCH_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_FETCH_ERROR_CODE, + "An error occurred while fetching the Text Customizations for the requested resource.", + "Error while fetching Text Customizations", + null + ), + CUSTOM_TEXT_PREFERENCE_FETCH_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_FETCH_INVALID_STATUS_CODE_ERROR_CODE, + "Received an invalid status code while fetching the Text Customizations for the requested resource.", + "Invalid Error Code while fetching Text Customizations", + null + ), + CUSTOM_TEXT_PREFERENCE_UPDATE_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_UPDATE_ERROR_CODE, + "An error occurred while updating the Text Customizations for the requested resource.", + "Error while updating Text Customizations", + null + ), + CUSTOM_TEXT_PREFERENCE_UPDATE_INVALID_STATUS_CODE_ERROR: new IdentityAppsError( + CustomTextPreferenceConstants.CUSTOM_TEXT_PREFERENCE_UPDATE_INVALID_STATUS_CODE_ERROR_CODE, + "Received an invalid status code while updating the Text Customizations for the requested resource.", + "Invalid Error Code while updating Text Customizations", + null + ) + }; /** * Text customization form element constraints. @@ -201,105 +201,105 @@ export class CustomTextPreferenceConstants { HEADING: string; } } = { - COPYRIGHT: "copyright", - EMAIL_LINK_EXPIRY: { - MESSAGE: "email.link.expiry.message" - }, - EMAIL_OTP: { - HEADING: "email.otp.heading" - }, - LOGIN: { - BUTTON: "login.button", - HEADING: "login.heading", - IDENTIFIER: { - INPUT: { - LABEL: "login.identifier.input.label" + COPYRIGHT: "copyright", + EMAIL_LINK_EXPIRY: { + MESSAGE: "email.link.expiry.message" + }, + EMAIL_OTP: { + HEADING: "email.otp.heading" + }, + LOGIN: { + BUTTON: "login.button", + HEADING: "login.heading", + IDENTIFIER: { + INPUT: { + LABEL: "login.identifier.input.label" + } } - } - }, - PASSWORD_RECOVERY: { - BODY: "password.recovery.body", - BUTTON: { - EMAIL_LINK: "password.recovery.button.email.link", - MULTI: "password.recovery.button.multi", - SMS_OTP: "password.recovery.button.smsotp" }, - HEADING: "password.recovery.heading", - IDENTIFIER: { - INPUT: { - LABEL: "Username", - PLACEHOLDER: "password.recovery.identifier.input.placeholder" + PASSWORD_RECOVERY: { + BODY: "password.recovery.body", + BUTTON: { + EMAIL_LINK: "password.recovery.button.email.link", + MULTI: "password.recovery.button.multi", + SMS_OTP: "password.recovery.button.smsotp" + }, + HEADING: "password.recovery.heading", + IDENTIFIER: { + INPUT: { + LABEL: "Username", + PLACEHOLDER: "password.recovery.identifier.input.placeholder" + } + }, + RADIO_BUTTON: { + EMAIL_LINK: "send.email.link", + SMS_OTP: "send.code.via.sms" } }, - RADIO_BUTTON: { - EMAIL_LINK: "send.email.link", - SMS_OTP: "send.code.via.sms" - } - }, - PASSWORD_RESET: { - BUTTON: "password.reset.button", - HEADING: "password.reset.heading" - }, - PASSWORD_RESET_SUCCESS: { - ACTION: "password.reset.success.action", - BODY: "password.reset.success.body", - HEADING: "password.reset.success.heading" - }, - PRIVACY_POLICY: "privacy.policy", - PUSH_AUTH: { - HEADING: "push.auth.heading", - BODY: "push.notification.sent.msg" - }, - REGISTER_TEXT: { - MESSAGE: "dont.have.an.account", - REGISTER: "register" - }, - SIGN_UP: { - BUTTON: "sign.up.button", - HEADING: "sign.up.heading" - }, - SMS_OTP: { - HEADING: "sms.otp.heading" - }, - TERMS_OF_SERVICE: "terms.of.service", - TOTP: { - HEADING: "totp.heading" - }, - USERNAME_RECOVERY_CHANNEL_SELECTION: { - BODY: "username.recovery.channel.selection.body", - BUTTON: { - CANCEL: "username.recovery.channel.selection.cancel.button", - NEXT: "username.recovery.channel.selection.next.button" + PASSWORD_RESET: { + BUTTON: "password.reset.button", + HEADING: "password.reset.heading" }, - HEADING: "username.recovery.channel.selection.heading", - RADIO_BUTTON: { - EMAIL: "send.username.via.email", - SMS: "send.username.via.sms" - } - }, - USERNAME_RECOVERY_CLAIM: { - BODY: "username.recovery.body", - BUTTON: { - CANCEL: "username.recovery.cancel.button", - NEXT: "username.recovery.next.button" + PASSWORD_RESET_SUCCESS: { + ACTION: "password.reset.success.action", + BODY: "password.reset.success.body", + HEADING: "password.reset.success.heading" }, - HEADING: "username.recovery.heading", - IDENTIFIER: { - INPUT: { - LABEL: "contact", - PLACEHOLDER: "contact" + PRIVACY_POLICY: "privacy.policy", + PUSH_AUTH: { + BODY: "push.notification.sent.msg", + HEADING: "push.auth.heading" + }, + REGISTER_TEXT: { + MESSAGE: "dont.have.an.account", + REGISTER: "register" + }, + SIGN_UP: { + BUTTON: "sign.up.button", + HEADING: "sign.up.heading" + }, + SMS_OTP: { + HEADING: "sms.otp.heading" + }, + TERMS_OF_SERVICE: "terms.of.service", + TOTP: { + HEADING: "totp.heading" + }, + USERNAME_RECOVERY_CHANNEL_SELECTION: { + BODY: "username.recovery.channel.selection.body", + BUTTON: { + CANCEL: "username.recovery.channel.selection.cancel.button", + NEXT: "username.recovery.channel.selection.next.button" + }, + HEADING: "username.recovery.channel.selection.heading", + RADIO_BUTTON: { + EMAIL: "send.username.via.email", + SMS: "send.username.via.sms" + } + }, + USERNAME_RECOVERY_CLAIM: { + BODY: "username.recovery.body", + BUTTON: { + CANCEL: "username.recovery.cancel.button", + NEXT: "username.recovery.next.button" + }, + HEADING: "username.recovery.heading", + IDENTIFIER: { + INPUT: { + LABEL: "contact", + PLACEHOLDER: "contact" + } } + }, + USERNAME_RECOVERY_SUCCESS_EMAIL: { + BODY: "username.recovery.email.success.body", + BUTTON: "username.recovery.success.action", + HEADING: "username.recovery.email.success.heading" + }, + USERNAME_RECOVERY_SUCCESS_SMS: { + BODY: "username.recovery.sms.success.body", + BUTTON: "username.recovery.success.action", + HEADING: "username.recovery.sms.success.heading" } - }, - USERNAME_RECOVERY_SUCCESS_EMAIL: { - BODY: "username.recovery.email.success.body", - BUTTON: "username.recovery.success.action", - HEADING: "username.recovery.email.success.heading" - }, - USERNAME_RECOVERY_SUCCESS_SMS: { - BODY: "username.recovery.sms.success.body", - BUTTON: "username.recovery.success.action", - HEADING: "username.recovery.sms.success.heading" - } - }; + }; } From a5d88cb815cc84b9de0337385e8445bb0dcf61a7 Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Wed, 5 Feb 2025 20:28:53 +0530 Subject: [PATCH 4/6] Update features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx --- .../preview/sign-in-box/fragments/push-auth-fragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx index 0712754e173..603cdfa5ccf 100644 --- a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx +++ b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). + * Copyright (c) 2025, 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 From 14ec43d47ff98894a8785e1e2f750ef76235fe96 Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Wed, 5 Feb 2025 20:29:38 +0530 Subject: [PATCH 5/6] Apply suggestions from code review --- .../sign-in-box/fragments/push-auth-fragment.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx index 603cdfa5ccf..2e1638b2271 100644 --- a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx +++ b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx @@ -22,7 +22,7 @@ import { CustomTextPreferenceConstants } from "../../../../constants/custom-text import useBrandingPreference from "../../../../hooks/use-branding-preference"; /** - * Proptypes for the totp fragment of login screen skeleton. + * Proptypes for the push authentication fragment of login screen skeleton. */ export type PushAuthFragmentInterface = IdentifiableComponentInterface; @@ -35,7 +35,7 @@ export type PushAuthFragmentInterface = IdentifiableComponentInterface; const PushAuthFragment: FunctionComponent = ( props: PushAuthFragmentInterface ): ReactElement => { - const { ["data-componentid"]: componentId } = props; + const { ["data-componentid"]: componentId = "branding-preview-push-auth-fragment" } = props; const { i18n } = useBrandingPreference(); @@ -46,12 +46,12 @@ const PushAuthFragment: FunctionComponent = (
-
+

{ i18n(CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.PUSH_AUTH.BODY, - // eslint-disable-next-line max-len - "A push notification has been sent to your device. Please respond to the request to continue." + "A push notification has been sent to your device. " + + "Please respond to the request to continue." ) }

@@ -73,11 +73,5 @@ const PushAuthFragment: FunctionComponent = ( ); }; -/** - * Default props for the component. - */ -PushAuthFragment.defaultProps = { - "data-componentid": "branding-preview-totp-fragment" -}; export default PushAuthFragment; From a0c8ecf3215959f47416518b5513c95be07c351e Mon Sep 17 00:00:00 2001 From: Pavindu Lakshan Date: Thu, 6 Feb 2025 13:44:35 +0530 Subject: [PATCH 6/6] Move prop destructing to default params --- .../preview/sign-in-box/fragments/push-auth-fragment.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx index 2e1638b2271..43be16b8829 100644 --- a/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx +++ b/features/admin.branding.v1/components/preview/sign-in-box/fragments/push-auth-fragment.tsx @@ -32,11 +32,9 @@ export type PushAuthFragmentInterface = IdentifiableComponentInterface; * @param props - Props injected to the component. * @returns PushAuthFragment fragment component. */ -const PushAuthFragment: FunctionComponent = ( - props: PushAuthFragmentInterface -): ReactElement => { - const { ["data-componentid"]: componentId = "branding-preview-push-auth-fragment" } = props; - +const PushAuthFragment: FunctionComponent = ({ + ["data-componentid"]: componentId = "branding-preview-push-auth-fragment" +} : PushAuthFragmentInterface): ReactElement => { const { i18n } = useBrandingPreference(); return (