Improve UI to incorporate authentication flow with the external authentication service

[Shenali-SJ]

Purpose

This PR onboard the UI related components associated with custom authentication feature.

Currently custom authentication creation is supported through Create a New Connection page.
There are three custom authentication types which will be represented as three cards.

• External (Federated) Custom Authentication
• Internal User Authentication
• 2FA Authentication

We have also introduced new icons with this feature.

Sub Tasks

As of now, we have completed UI components related to the create wizard and the following sub tasks are still in progress.

• Integrate APIs with the create wizard
• Move the UI texts to i18n
• Introduce a new icon for Authentication Type step in the wizard.

Related Issues

• Improve UI to incorporate authentication flow with the external authentication service product-is#20893

Related PRs (Needs to be merged before)

• Introduce New Templates for Custom Authenticators carbon-identity-framework#6226
• [UI] Introduce new icons and logos related to custom authentication feature #7322

Design Discussions

• Email: [Architecture] Facilitate user authentication via a external service (custom authentication extension)
• Doc: https://docs.google.com/document/d/177t5iduj9rVXT7Icq5Nqkqu1UEbkZBWXzrAMpf5IvCQ/edit?usp=sharing

Checklist

• e2e cypress tests locally verified. (for internal contributers)
• Manual test round performed and verified.
• UX/UI review done on the final implementation.
• Documentation provided. (Add links if there are any)
• Relevant backend changes deployed and verified
• Unit tests provided. (Add links if there are any)
• Integration tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines
• Ran FindSecurityBugs plugin and verified report
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 36.04%. Comparing base (aeeeed4) to head (0086afa).
Report is 631 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7207      +/-   ##
==========================================
+ Coverage   32.02%   36.04%   +4.01%     
==========================================
  Files          41       42       +1     
  Lines         893      899       +6     
  Branches      204      222      +18     
==========================================
+ Hits          286      324      +38     
+ Misses        607      555      -52     
- Partials        0       20      +20     

Flag	Coverage Δ
@wso2is/core	36.04% <ø> (+4.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 10 files with indirect coverage changes

[wso2-jenkins-bot]

⚠️ No Changeset found

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go.

If these changes should result in a version bump, you need to add a changeset.

Refer Release Documentation to learn how to add a changeset.

[brionmario]

I hope this class is not meant to be re-used.
If not, Better to scope with a specific class.

.custom-authentication-wizard {
    .wizard-wrapper {
        // rest
}

[brionmario]

Isn't this id coming from a Constant?

[brionmario]

Are all the attributes optional?

[Shenali-SJ]

update the license

[Shenali-SJ]

Implemented design

• Custom Authentication group card (In Create a New Connection Page)

• Create Wizard - Step 01

• Create Wizard - Step 02

• Create Wizard - Step 03

[pavinduLakshan]

Let's add the license header to new SVG files