Username recovery sms support

.changeset/fifty-lamps-fail.md

@@ -0,0 +1,8 @@
+---
+"@wso2is/common.branding.v1": minor
+"@wso2is/admin.branding.v1": minor
+"@wso2is/identity-apps-core": minor
+"@wso2is/i18n": minor
+---
+
+Add the username recovery multiple channel support with branding.

features/admin.branding.v1/components/preview/branding-preference-preview.tsx

@@ -270,7 +270,10 @@ export const BrandingPreferencePreview: FunctionComponent<BrandingPreferencePrev
         PreviewScreenType.TOTP,
         PreviewScreenType.PASSWORD_RECOVERY,
         PreviewScreenType.PASSWORD_RESET,
-        PreviewScreenType.PASSWORD_RESET_SUCCESS
+        PreviewScreenType.PASSWORD_RESET_SUCCESS,
+        PreviewScreenType.USERNAME_RECOVERY_CLAIM,
+        PreviewScreenType.USERNAME_RECOVERY_CHANNEL_SELECTION,
+        PreviewScreenType.USERNAME_RECOVERY_SUCCESS
     ];
 
     const resolvePreviewScreen = (): ReactElement => {

features/admin.branding.v1/components/preview/sign-in-box/fragments/username-recovery-channel-selection-fragment.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FunctionComponent, ReactElement } from "react";
+import { CustomTextPreferenceConstants } from "../../../../constants/custom-text-preference-constants";
+import useBrandingPreference from "../../../../hooks/use-branding-preference";
+
+/**
+ * Proptypes for the username-recovery-channel-selection fragment of login screen skeleton.
+ */
+export type UsernameRecoveryChannelSelectionFragmentInterface = IdentifiableComponentInterface;
+
+/**
+ * Usernam
+ * e recovery channel selection fragment component for the branding preview of Username Recovery box.
+ *
+ * @param props - Props injected to the component.
+ * @returns Username recovery fragment component.
+ */
+const UsernameRecoveryChannelSelectionFragment: FunctionComponent<UsernameRecoveryChannelSelectionFragmentInterface> = (
+    props: UsernameRecoveryChannelSelectionFragmentInterface
+): ReactElement => {
+    const { ["data-componentid"]: componentId } = props;
+
+    const { i18n } = useBrandingPreference();
+
+    return (
+        <div data-componentid={ componentId }>
+            <h2>{ i18n(CustomTextPreferenceConstants.
+                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.HEADING, "Recovery Username") }
+            </h2>
+            <p>
+                { i18n(
+                    CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.BODY,
+                    "Select a recovery option."
+                ) }
+            </p>
+            <div className="ui divider hidden"></div>
+
+            <div className="segment-form">
+                <form className="ui large form" id="channelSelectionForm">
+                    <div className="field">
+                        <div className="ui radio checkbox">
+                            <input type="radio" value="email" checked={ true } />
+                            <label>{ i18n(CustomTextPreferenceConstants.
+                                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.RADIO_BUTTON.EMAIL,
+                            "Send Username via Email") }
+                            </label>
+                        </div>
+                    </div>
+                    <div className="field">
+                        <div className="ui radio checkbox">
+                            <input type="radio" value="sms" />
+                            <label>{ i18n(CustomTextPreferenceConstants.
+                                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.RADIO_BUTTON.SMS,
+                            "Send Username via SMS") }
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="ui divider hidden"></div>
+
+                    <div className="mt-4">
+                        <button className="ui primary button large fluid" type="submit">
+                            { i18n(CustomTextPreferenceConstants.
+                                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.BUTTON.NEXT, "Next") }
+                        </button>
+                    </div>
+
+                    <div className="mt-1 align-center">
+                        <a className="ui button secondary large fluid">
+                            { i18n(CustomTextPreferenceConstants.
+                                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CHANNEL_SELECTION.BUTTON.CANCEL, "Cancel") }
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Default proptypes for the component.
+ */
+UsernameRecoveryChannelSelectionFragment.defaultProps = {
+    "data-componentid": "username-recovery-channel-selection"
+};
+
+export default UsernameRecoveryChannelSelectionFragment;
+

features/admin.branding.v1/components/preview/sign-in-box/fragments/username-recovery-claims-fragment.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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 { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FunctionComponent, ReactElement } from "react";
+import { CustomTextPreferenceConstants } from "../../../../constants/custom-text-preference-constants";
+import useBrandingPreference from "../../../../hooks/use-branding-preference";
+
+/**
+ * Proptypes for the username-recovery-claims fragment of login screen skeleton.
+ */
+export type UsernameRecoveryClaimsFragmentInterface = IdentifiableComponentInterface;
+
+/**
+ * Username recovery claim fragment component for the branding preview of Username Recovery box.
+ *
+ * @param props - Props injected to the component.
+ * @returns Username recovery fragment component.
+ */
+const UsernameRecoveryClaimsFragment: FunctionComponent<UsernameRecoveryClaimsFragmentInterface> = (
+    props: UsernameRecoveryClaimsFragmentInterface
+): ReactElement => {
+    const { ["data-componentid"]: componentId } = props;
+
+    const { i18n } = useBrandingPreference();
+
+    return (
+        <div data-componentid={ componentId }>
+            <h2>
+                { i18n(CustomTextPreferenceConstants.
+                    TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.HEADING, "Username Recovery") }
+            </h2>
+            <p>
+                { i18n(
+                    CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.BODY,
+                    "Enter below details to recover your username."
+                ) }
+            </p>
+
+            <div className="ui divider hidden"></div>
+            <div className="segment-form">
+                <form className="ui large form" method="post" id="recoverDetailsForm">
+                    <div className="field">
+                        <label>name</label>
+                        <div className="two fields">
+                            <div className="required field">
+                                <input id="first-name" placeholder="First Name*" type="text" />
+                            </div>
+                            <div className="field">
+                                <input id="last-name" placeholder="Last Name" type="text" />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="required field">
+                        <label>
+                            { i18n(
+                                CustomTextPreferenceConstants.
+                                    TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.IDENTIFIER.INPUT.LABEL,
+                                "Email or mobile"
+                            ) }
+                        </label>
+                        <input
+                            id="contact"
+                            type="text"
+                            placeholder={ i18n(
+                                CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.IDENTIFIER.INPUT
+                                    .PLACEHOLDER,
+                                "Email or mobile"
+                            ) }
+                        />
+                    </div>
+                    <div className="ui divider hidden"></div>
+                    <div className="mt-0">
+                        <button className="ui fluid large primary button" type="submit">
+                            { i18n(
+                                CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.BUTTON.NEXT,
+                                "Next"
+                            ) }
+                        </button>
+                    </div>
+                    <div className="mt-1 align-center">
+                        <a className="ui button secondary large fluid">
+                            { i18n(
+                                CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_CLAIM.BUTTON.CANCEL,
+                                "Cancel"
+                            ) }
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Default proptypes for the component.
+ */
+UsernameRecoveryClaimsFragment.defaultProps = {
+    "data-componentid": "username-recovery-claims-fragment"
+};
+
+export default UsernameRecoveryClaimsFragment;

features/admin.branding.v1/components/preview/sign-in-box/fragments/username-recovery-success/username-recovery-success-email-fragment.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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 { AppState } from "@wso2is/admin.core.v1/store";
+import { BrandingPreferenceInterface } from "@wso2is/common.branding.v1/models";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FunctionComponent, ReactElement } from "react";
+import { useSelector } from "react-redux";
+import { CustomTextPreferenceConstants } from "../../../../../constants/custom-text-preference-constants";
+import useBrandingPreference from "../../../../../hooks/use-branding-preference";
+
+/**
+ * Proptypes for the username-recovery-success-email fragment of login screen skeleton.
+ */
+interface UsernameRecoverySuccessEmailFragmentInterface extends IdentifiableComponentInterface {
+    brandingPreference: BrandingPreferenceInterface;
+}
+
+/**
+ * Username recovery success email fragment component for the branding preview of Username Recovery box.
+ *
+ * @param props - Props injected to the component.
+ * @returns Username recovery fragment component.
+ */
+const UsernameRecoverySuccessEmailFragment: FunctionComponent<UsernameRecoverySuccessEmailFragmentInterface> = (
+    props: UsernameRecoverySuccessEmailFragmentInterface
+): ReactElement => {
+    const { brandingPreference,
+        ["data-componentid"]: componentId
+    } = props;
+
+    const { i18n } = useBrandingPreference();
+    const supportEmail: string = useSelector((state: AppState) => {
+        return state.config.deployment.extensions?.supportEmail as string;
+    });
+
+    return (
+        <div data-componentid={ componentId } className="ui green mt-3 attached">
+            <h3 className="ui header text-center slogan-message mt-4 mb-6" >{ i18n(CustomTextPreferenceConstants.
+                TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_SUCCESS_EMAIL.HEADING, "Check Your Email") }
+            </h3>
+            <p className="portal-tagline-description">
+                { i18n(
+                    CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_SUCCESS_EMAIL.BODY,
+                    "Username recovery details have been sent to the email provided. If the email is not " +
+                    "received,try again using different information."
+                ) }
+                <br/>
+                <br/>
+                <br/>
+                <i className="caret left icon primary"/>
+                <a>
+                    { i18n(
+                        CustomTextPreferenceConstants.TEXT_BUNDLE_KEYS.USERNAME_RECOVERY_SUCCESS_EMAIL.BUTTON,
+                        "Back to application"
+                    ) }
+                </a>
+                <p className="ui portal-tagline-description">
+                    For further assistance, write to
+                    <br/>
+                    <a>
+                        <span className="orange-text-color button">
+                            { brandingPreference.organizationDetails.supportEmail || supportEmail }
+                        </span>
+                    </a>
+                </p>
+            </p>
+        </div>
+    );
+};
+
+/**
+ * Default proptypes for the component.
+ * See type definitions in interfaces.
+ */
+UsernameRecoverySuccessEmailFragment.defaultProps = {
+    "data-componentid": "username-recovery-success-email"
+};
+
+export default UsernameRecoverySuccessEmailFragment;