chore: improve SignIn & SignUp styling

[brionmario]

Purpose

This pull request refactors the Sign In UI components to improve flexibility, error handling, and consistency between component-driven and non-component-driven implementations. The most significant changes include the addition of new props to control the display of the logo, title, and subtitle, a migration to a unified error message handling system, and a general cleanup of redundant code and props.

Component flexibility and UI consistency:

• Added showLogo, showTitle, and showSubtitle props to both component-driven and non-component-driven BaseSignIn components, allowing consumers to control the visibility of these elements for greater UI customization. [1] [2] [3] [4] [5]
• Updated the rendering logic in BaseSignInContent to conditionally display the logo, title, and subtitle based on these new props.

Error handling improvements:

• Migrated error handling to use the extractErrorMessage transformer and the flow message system, removing the local error state and related props from BaseSignIn and its render props. This ensures errors are displayed consistently and are easier to manage. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Styling and layout adjustments:

• Updated styles in BaseSignIn.styles.ts to improve layout, including changes to margins and alignment for logo, header, subtitle, and flow messages containers. [1] [2] [3]
• Removed the redundant non-component-driven/BaseSignIn.styles.ts file and updated imports to use the shared styles for consistency. [1] [2]

Code cleanup and minor improvements:

• Simplified async return statements in SignIn.tsx for clarity. [1] [2]
• Updated the sign in subtitle translation for a more welcoming message.

These changes collectively enhance the modularity, maintainability, and user experience of the Sign In components.

Related Issues

• feat: provide initial provision for asgardeo/thunder runtime #212
• chore: stabilize @asgardeo/react & @asgardeo/nextjs #81

Related PRs

• N/A

Checklist

• Followed the CONTRIBUTING guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)

Security checks

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

[asgardeo-github-bot]

🦋 Changeset detected

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.