# GitHub Issue: Align OIDC UI Look & Feel with eSignet 1.8.0

[rachik-hue]

Description

Update the OIDC UI after the Golang integration to match the look and feel of the existing eSignet 1.8.0 UI. The objective is to provide a consistent user experience across all authentication and consent flows.

The following user journeys are in scope:

Authentication Factor Selection

• Choose Authentication Factor

OTP Authentication Flow

• Enter UIN/VID
• Enter OTP
• Verify OTP
• Handle Invalid OTP
• Resend OTP
• Display resend timer (30 seconds)
• Enforce maximum OTP attempts (3)

Password Authentication Flow

• Enter UIN/VID
• Enter Password
• Handle invalid password
• Handle blank/empty password validation

Biometric Authentication Flow

• Enter UIN/VID
• Search for biometric device
• Display available device(s)
• Scan biometric data
• Verify biometric authentication

KBI Flow:

• Enter form details
• Dynamic form rendering as per spec
• Verify details

Consent Flow

• Consent screen
• Consent acceptance/rejection interactions
• Overall UI/UX alignment with eSignet 1.8.0

Note: UI/UX mockups/screens are attached to this ticket. Refer to them for the expected behavior and visual design.

Implementation Required

1. Authentication Flow UI Alignment

Update all authentication screens to match the eSignet 1.8.0 design, including layouts, styling, spacing, typography, colors, buttons, input fields, validation messages, and navigation.

Acceptance Criteria:

• All authentication screens match the eSignet 1.8.0 UI/UX.
• OTP, Password, and Biometric flows are visually consistent with the existing eSignet experience.
• Validation and error states follow the provided designs.
• OTP resend timer and maximum attempt messaging are displayed as per the UI designs.

2. Consent Screen UI Alignment

Update the consent screen to match the eSignet 1.8.0 consent experience.

Acceptance Criteria:

• Consent screen matches the provided UI/UX designs.
• Consent details, actions, and navigation are consistent with eSignet 1.8.0.
• UI is responsive and renders correctly across supported screen sizes.

3. UI/UX Review and Consistency

Perform an end-to-end review to ensure a consistent experience across all screens included in scope.

Acceptance Criteria:

• All attached UI/UX screens are implemented.
• Navigation between screens is seamless.
• Styling is consistent across the complete authentication and consent journey.
• QA can validate the implementation against the attached UI/UX reference screens.

Reference:

• UI/UX screens - https://www.figma.com/design/1jCbgxcIezo5oCzenxCQXm/eSignet--UXD?node-id=1547-1680&t=zzNCJ5meJUfA3tUH-1