Auth UI Updates #2471
Auth UI Updates #2471
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update refactors authentication-related pages and components, streamlining layouts, improving visual consistency, and introducing reusable UI elements. New components for banners, separators, and password requirements are added, with progressive disclosure for sign-up forms. Layouts are simplified, and alternative authentication options are highlighted. No changes affect authentication logic or exported function signatures. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AuthPage (Login/Register/Forgot/Reset)
participant AuthLayout
participant AuthAlternativeBanner
participant AuthMethodsSeparator
participant PasswordRequirements
User->>AuthPage: Visit authentication page
AuthPage->>AuthLayout: Render content within layout
AuthPage->>AuthAlternativeBanner: (If applicable) Render alternative banner
AuthPage->>AuthMethodsSeparator: (If multiple methods) Render separator
AuthPage->>PasswordRequirements: (If sign-up) Show password requirements
AuthLayout-->>User: Display centered content with custom background
AuthAlternativeBanner-->>User: Show alternative login/register option
AuthMethodsSeparator-->>User: Visually separate authentication methods
PasswordRequirements-->>User: Display password criteria feedback
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
apps/web/ui/shared/password-requirements.tsx (2)
24-31: Consider adding form context validation.The component relies on
useWatchfrom react-hook-form, which requires the component to be rendered within a FormProvider context. Consider adding a safety check or documentation to prevent runtime errors.export const PasswordRequirements = memo(function PasswordRequirements({ field = "password", className, }: { field?: string; className?: string; }) { + // Note: This component must be used within a FormProvider context const password = useWatch({ name: field });
35-56: Add accessibility improvements for better user experience.Consider adding ARIA attributes to improve accessibility for screen readers and better communicate the validation state.
return ( - <div className={cn("mt-2 flex flex-wrap items-center gap-3", className)}> + <div + className={cn("mt-2 flex flex-wrap items-center gap-3", className)} + role="list" + aria-label="Password requirements" + > {REQUIREMENTS.map(({ name, check }) => { const checked = password?.length && check(password); return ( <div key={name} + role="listitem" + aria-label={`${name} requirement ${checked ? 'satisfied' : 'not satisfied'}`} className={cn( "flex items-center gap-1 text-xs text-neutral-400 transition-colors", checked && "text-green-600", )} >apps/web/app/app.dub.co/(auth)/layout.tsx (1)
12-47: Complex background implementation - consider performance impact.The new background creates an attractive visual effect with grid patterns and multiple gradient layers. However, the implementation uses several blur effects and blend modes that could impact performance on lower-end devices.
Consider:
- Adding a
will-changeCSS property for animations- Using
transform3dfor hardware acceleration- Testing performance on mobile devices
<div key={idx} className={cn( "absolute left-1/2 top-6 size-[80px] -translate-x-1/2 -translate-y-1/2 scale-x-[1.6]", + "will-change-transform", idx === 0 ? "mix-blend-overlay" : "opacity-10", )} >apps/web/app/(ee)/partners.dub.co/(auth)/(default)/layout.tsx (1)
11-47: Sophisticated background design with potential performance considerations.The background implementation creates an attractive visual effect with:
- Isolated stacking context preventing z-index issues
- Masked Grid component for subtle pattern overlay
- Multiple gradient layers with blend modes for depth
However, consider the performance impact of:
- Complex CSS mask operations
- Multiple blur filters (
blur-[50px])- Nested array mapping for gradient generation
For better performance, consider:
- Adding
will-change: transformto animated elements- Using CSS custom properties for repeated gradient values
- Memoizing the gradient array generation
+const gradientLayers = [...Array(2)]; +const innerGradients = (isFirst: boolean) => [...Array(isFirst ? 2 : 1)]; - {[...Array(2)].map((_, idx) => ( + {gradientLayers.map((_, idx) => (packages/ui/src/dots-pattern.tsx (1)
4-47: LGTM - Well-designed reusable pattern component.The
DotsPatterncomponent demonstrates excellent React practices:
- Uses
useId()to prevent SVG pattern ID collisions- Provides sensible defaults with flexible customization options
- Implements proper accessibility with
pointer-events-none- Uses
currentColorfor theme-aware stylingThe pattern offset calculation (
patternOffset[0] - 1) appears intentional for visual alignment, though a comment explaining this adjustment would improve maintainability.Consider adding a brief comment explaining the offset adjustment:
<pattern id={`dots-${id}`} + // Offset by -1 for proper visual alignment x={patternOffset[0] - 1} y={patternOffset[1] - 1}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/auth/reset-password/[token]/page.tsx(2 hunks)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/forgot-password/page.tsx(1 hunks)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/layout.tsx(2 hunks)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/login/page.tsx(2 hunks)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/partner-banner.tsx(1 hunks)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/register/page-client.tsx(2 hunks)apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx(2 hunks)apps/web/app/app.dub.co/(auth)/forgot-password/page.tsx(1 hunks)apps/web/app/app.dub.co/(auth)/layout.tsx(1 hunks)apps/web/app/app.dub.co/(auth)/login/page.tsx(2 hunks)apps/web/app/app.dub.co/(auth)/register/page-client.tsx(3 hunks)apps/web/app/app.dub.co/(auth)/register/page.tsx(1 hunks)apps/web/ui/auth/auth-alternative-banner.tsx(1 hunks)apps/web/ui/auth/auth-methods-separator.tsx(1 hunks)apps/web/ui/auth/forgot-password-form.tsx(1 hunks)apps/web/ui/auth/login/email-sign-in.tsx(1 hunks)apps/web/ui/auth/login/login-form.tsx(4 hunks)apps/web/ui/auth/register/resend-otp.tsx(2 hunks)apps/web/ui/auth/register/signup-email.tsx(2 hunks)apps/web/ui/auth/register/signup-form.tsx(2 hunks)apps/web/ui/auth/register/verify-email-form.tsx(1 hunks)apps/web/ui/auth/reset-password-form.tsx(3 hunks)apps/web/ui/layout/auth-layout.tsx(1 hunks)apps/web/ui/shared/password-requirements.tsx(1 hunks)packages/ui/src/dots-pattern.tsx(1 hunks)packages/ui/src/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (13)
apps/web/ui/auth/auth-alternative-banner.tsx (1)
packages/ui/src/dots-pattern.tsx (1)
DotsPattern(4-47)
apps/web/ui/auth/register/signup-email.tsx (1)
apps/web/ui/shared/password-requirements.tsx (1)
PasswordRequirements(24-58)
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/auth/reset-password/[token]/page.tsx (1)
apps/web/ui/auth/reset-password-form.tsx (1)
ResetPasswordForm(11-97)
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/forgot-password/page.tsx (1)
apps/web/ui/auth/forgot-password-form.tsx (1)
ForgotPasswordForm(10-59)
apps/web/app/app.dub.co/(auth)/register/page-client.tsx (2)
apps/web/ui/auth/register/signup-form.tsx (1)
SignUpForm(8-22)apps/web/ui/auth/auth-alternative-banner.tsx (1)
AuthAlternativeBanner(17-43)
apps/web/ui/auth/register/signup-form.tsx (2)
apps/web/ui/auth/register/signup-email.tsx (1)
SignUpEmail(16-113)apps/web/ui/auth/auth-methods-separator.tsx (1)
AuthMethodsSeparator(1-11)
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/login/page.tsx (4)
apps/web/app/app.dub.co/(auth)/layout.tsx (1)
AuthLayout(7-60)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/partner-banner.tsx (1)
PartnerBanner(4-41)apps/web/ui/auth/login/login-form.tsx (1)
LoginForm(70-205)apps/web/ui/auth/auth-alternative-banner.tsx (1)
AuthAlternativeBanner(17-43)
apps/web/ui/auth/reset-password-form.tsx (1)
apps/web/ui/shared/password-requirements.tsx (1)
PasswordRequirements(24-58)
apps/web/app/app.dub.co/(auth)/register/page.tsx (1)
apps/web/ui/layout/auth-layout.tsx (1)
AuthLayout(4-43)
apps/web/ui/layout/auth-layout.tsx (1)
apps/web/app/app.dub.co/(auth)/layout.tsx (1)
AuthLayout(7-60)
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/register/page-client.tsx (5)
apps/web/ui/layout/auth-layout.tsx (1)
AuthLayout(4-43)apps/web/app/(ee)/partners.dub.co/(auth)/(default)/partner-banner.tsx (1)
PartnerBanner(4-41)apps/web/ui/auth/register/signup-form.tsx (1)
SignUpForm(8-22)apps/web/ui/auth/auth-alternative-banner.tsx (1)
AuthAlternativeBanner(17-43)apps/web/ui/auth/register/verify-email-form.tsx (1)
VerifyEmailForm(15-119)
apps/web/ui/auth/login/login-form.tsx (1)
apps/web/ui/auth/auth-methods-separator.tsx (1)
AuthMethodsSeparator(1-11)
apps/web/app/app.dub.co/(auth)/layout.tsx (1)
apps/web/ui/layout/auth-layout.tsx (1)
AuthLayout(4-43)
🔇 Additional comments (54)
packages/ui/src/index.tsx (1)
15-15: LGTM! Clean export addition.The new
dots-patternexport is properly placed in alphabetical order and follows the existing pattern. This enables the DotsPattern component to be imported from the main package entry point.apps/web/app/app.dub.co/(auth)/register/page.tsx (1)
12-12: Good addition of terms display for registration.Adding
showTermsto the AuthLayout is appropriate for a registration page, ensuring users see the terms of service and privacy policy links during account creation.apps/web/ui/auth/forgot-password-form.tsx (3)
29-29: Good addition of full width class.Adding
w-fullensures the form container uses the full available width, improving layout consistency.
36-36: Appropriate spacing adjustment.Reducing the gap from 8 to 6 units creates a more compact and visually balanced form layout.
38-40: Enhanced label styling for better consistency.The updated label styling with
text-content-emphasis, explicit margin, and font properties provides better visual hierarchy and consistency with the design system.apps/web/ui/auth/register/resend-otp.tsx (2)
42-42: Good addition of font weight for emphasis.Adding
font-mediumto the container provides better visual hierarchy and emphasis for the resend OTP section.
56-56: Improved button styling with better UX.The updated button styling removes the underline for a cleaner look and uses darker text with smooth hover transitions, providing better visual feedback and consistency with modern UI patterns.
apps/web/ui/auth/auth-methods-separator.tsx (1)
1-11: LGTM! Clean and reusable separator component.The implementation is well-structured with proper flexbox layout and semantic styling. This component will improve consistency across authentication forms by standardizing the "or" separator pattern.
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/partner-banner.tsx (1)
10-10: LGTM! Styling improvements align with layout simplification.The margin, border radius, and padding changes improve visual consistency and align with the broader UI refactoring effort mentioned in the PR objectives.
apps/web/app/app.dub.co/(auth)/forgot-password/page.tsx (1)
12-19: LGTM! Layout simplification improves consistency.The changes standardize the auth page structure using
AuthLayoutand create a more focused layout with the smaller max width and centered heading. The simplified form wrapper reduces unnecessary styling complexity.apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx (1)
29-38: LGTM! Consistent layout pattern with security logic preserved.The layout changes follow the same simplification pattern as other auth pages, using
AuthLayoutfor consistency. Importantly, the token validation logic remains unchanged, preserving the security implementation.apps/web/ui/auth/reset-password-form.tsx (1)
15-21: Good refactoring of form handling.Consolidating the form instance and providing it via
FormProvideris a clean approach that enables thePasswordRequirementscomponent to access form context properly.apps/web/app/(ee)/partners.dub.co/(auth)/(default)/forgot-password/page.tsx (1)
6-16: LGTM! Clean layout standardization.The refactoring simplifies the layout using the shared
AuthLayoutcomponent and updates the heading styling for better visual hierarchy. This aligns well with the broader UI consistency improvements.apps/web/ui/auth/register/signup-form.tsx (1)
14-20: Excellent refactoring for better UX and maintainability.The changes improve the component in multiple ways:
AnimatedSizeContainerprovides smooth height transitions when form content changesAuthMethodsSeparatorreplaces inline JSX, improving code reusability and maintainability- The padding addition enhances visual spacing
apps/web/ui/auth/auth-alternative-banner.tsx (1)
1-43: Well-designed reusable banner component.The implementation demonstrates good practices:
- Clear TypeScript interface with required props
- Accessibility considerations with
role="presentation"for decorative elements- Hover states for better interactivity
- Clean separation between variants and the main component
- Proper use of
DotsPatternfor visual enhancementThe component will provide consistent styling across authentication flows.
apps/web/ui/shared/password-requirements.tsx (1)
6-22: LGTM! Well-defined password requirements with correct regex patterns.The requirements array is well-structured with clear naming and appropriate regex patterns for common password validation rules.
apps/web/app/app.dub.co/(auth)/layout.tsx (1)
50-55: LGTM! Improved Wordmark positioning and sizing.The centered positioning and larger size (h-8 vs h-6) provides better visual hierarchy and brand presence.
apps/web/ui/auth/login/email-sign-in.tsx (3)
118-118: LGTM! Improved spacing for better visual hierarchy.The increased gap from 3 to 6 provides better visual separation between form elements.
147-166: LGTM! Excellent semantic structure and UX improvement.The label wrapper with inline forgot password link provides better accessibility and more intuitive user flow.
170-170: LGTM! More descriptive button text.The change from "Continue with" to "Log in with" is more specific and action-oriented.
apps/web/ui/auth/login/login-form.tsx (4)
3-3: LGTM! Good import addition for consistent UI components.Adding
Buttonimport aligns with the refactoring to use consistent UI components throughout the auth flow.
15-15: LGTM! Consistent separator component usage.The
AuthMethodsSeparatorimport supports the consistent UI refactoring efforts across authentication flows.
175-175: LGTM! Consistent component usage.Replacing the inline separator with the
AuthMethodsSeparatorcomponent improves consistency and maintainability across authentication UI components.
180-185: LGTM! Improved button consistency.Using the
Buttoncomponent withvariant="secondary"instead of inline button styling ensures consistent appearance and behavior across the application.apps/web/app/(ee)/partners.dub.co/(auth)/(default)/auth/reset-password/[token]/page.tsx (3)
2-2: LGTM! Import addition aligns with UI refactoring.The import of
AuthLayoutsupports the consistent layout refactoring across authentication pages.
20-26: Good refactoring to use shared layout component.Wrapping the invalid token state in
AuthLayoutprovides consistent styling and structure with other authentication pages.
31-40: Clean layout simplification with proper semantic structure.The refactoring successfully:
- Uses shared
AuthLayoutfor consistency- Maintains appropriate semantic hierarchy with
h3heading- Applies consistent max-width constraints
- Centers content appropriately
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/login/page.tsx (5)
2-4: LGTM! Import additions support the UI refactoring.The imports for
AuthAlternativeBannerandAuthLayoutare necessary for the new shared layout approach and alternative login options.
20-25: Good use of shared layout with consistent styling.The
AuthLayoutwithshowTermsprop provides:
- Consistent layout structure across auth pages
- Terms of service display when appropriate
- Proper content constraints with
max-w-sm- Semantic heading structure with centered styling
27-31: Well-configured login form with appropriate auth methods.The
LoginFormconfiguration specifies:
- Relevant auth methods (
password,- Proper redirect path based on program slug
- Consistent integration with the new layout
32-40: Improved sign-up prompt with clear messaging.The updated sign-up prompt:
- Uses more specific text ("partner account") for clarity
- Maintains proper link styling and hover states
- Provides appropriate visual hierarchy with centered alignment
42-48: Excellent addition of alternative login option.The
AuthAlternativeBannerprovides:
- Clear messaging for users looking for workspace accounts
- Proper external link to the main app login
- Good visual separation with appropriate margin
- Consistent with the cross-promotion strategy
apps/web/ui/layout/auth-layout.tsx (4)
1-2: LGTM! Proper imports for the simplified layout.The imports correctly include
ClientOnlyfrom the UI package and React types for the new prop structure.
4-7: Well-typed component with optional terms prop.The component signature properly:
- Uses
PropsWithChildrenfor correct TypeScript typing- Provides default value for optional
showTermsboolean- Maintains clear prop interface
9-17: Clever vertical centering approach with proper client-side handling.The layout structure effectively:
- Uses
justify-betweenwith grow spacers for vertical centering- Maintains
ClientOnlywrapper for hydration safety- Includes
Suspensefor proper loading states- Centers content horizontally with responsive padding
19-42: Well-implemented conditional terms section with proper accessibility.The terms section provides:
- Conditional rendering based on
showTermsprop- Responsive padding for different screen sizes
- Proper external links with
target="_blank"- Good typography hierarchy and hover states
- Accessible link styling with appropriate contrast
The legal links point to the correct Dub legal pages.
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/layout.tsx (2)
2-2: LGTM! Import addition supports conditional styling.The
cnutility import is necessary for the complex conditional className logic used in the background effects.
48-58: Well-positioned branding with clear hierarchy.The content layout provides:
- Proper relative positioning for child elements
- Centered Wordmark link with appropriate z-index
- Clear "Partners" label for brand distinction
- Correct external link to partners page
apps/web/app/(ee)/partners.dub.co/(auth)/(default)/register/page-client.tsx (3)
3-3: LGTM - Import additions support the auth UI refactor.The new imports for
AuthAlternativeBannerandAuthLayoutalign with the broader authentication UI standardization effort.Also applies to: 10-10
36-63: LGTM - Clean refactor with improved consistency.The SignUp component refactoring successfully:
- Adopts the standardized
AuthLayoutwith terms display- Implements consistent container sizing and text alignment
- Adds effective cross-promotion via
AuthAlternativeBanner- Maintains clear navigation with updated link styling
The layout structure is clean and follows the established pattern from other auth pages.
71-88: LGTM - Consistent layout adoption with improved typography.The Verify component refactoring successfully adopts the
AuthLayoutpattern and improves the visual hierarchy with centered text alignment and enhanced font styling for better user experience.apps/web/app/app.dub.co/(auth)/login/page.tsx (1)
14-40: LGTM - Effective auth UI standardization with improved UX.The login page refactoring successfully:
- Adopts the consistent
AuthLayoutwith terms display- Simplifies container styling for better focus
- Uses conventional "Log in" terminology
- Enhances link styling for better accessibility
- Provides effective cross-promotion via
AuthAlternativeBannerThe layout is clean and maintains consistency with other auth pages in the refactor.
apps/web/ui/auth/register/verify-email-form.tsx (1)
56-116: LGTM - Improved form structure with better UX.The form restructuring successfully:
- Removes unnecessary animation from the entire form while preserving it for error feedback
- Improves OTP input styling with better proportions (
w-12)- Enhances error message presentation with refined typography
- Maintains all existing form logic and validation
The changes result in a cleaner, more focused user experience during email verification.
apps/web/ui/auth/register/signup-email.tsx (7)
6-10: LGTM! Proper imports for progressive disclosure functionality.The new imports support the enhanced form functionality with progressive disclosure and mobile-responsive behavior.
17-17: Good mobile detection for auto-focus management.Using
useMediaQueryto detect mobile devices helps prevent unwanted keyboard pop-ups on mobile devices during auto-focus.
22-22: Progressive disclosure state properly initialized.The
showPasswordstate controls the two-step form flow effectively.
24-35: Form setup correctly configured with default values.The
useForminitialization with default email value and proper destructuring provides good integration with the existing register context.
52-66: Progressive disclosure logic implemented correctly.The custom
onSubmithandler properly implements the two-step flow:
- Prevents submission and reveals password field when email is provided but password isn't
- Proceeds with normal submission when both fields are completed
The event handling with
preventDefault()andstopPropagation()correctly prevents unwanted form submission during the disclosure step.
81-81: Smart auto-focus logic for better UX.The conditional auto-focus logic properly handles different states:
- Email field focuses when password isn't shown and not on mobile
- Password field focuses when revealed and not on mobile
This prevents mobile keyboard issues while maintaining good desktop UX.
Also applies to: 94-94
99-101: FormProvider wrapper necessary for PasswordRequirements context.Since
PasswordRequirementsusesuseWatchto monitor the password field, wrapping it inFormProvideris required to provide the form context. This is the correct approach given the component's dependency on react-hook-form context.apps/web/app/app.dub.co/(auth)/register/page-client.tsx (4)
3-3: LGTM! Proper import for the alternative banner component.The
AuthAlternativeBannerimport aligns with the UI enhancement goals of the PR.
24-40: UI layout improvements with better structure and accessibility.The refactored SignUp component shows good improvements:
- Proper semantic structure with centered headings
- Improved typography hierarchy with
text-xl font-semibold- Better spacing with
mt-8andmt-6- Accessible link styling with hover states
The "Already have an account?" section maintains good UX flow.
41-47: AuthAlternativeBanner properly promotes partner account signup.The banner implementation correctly:
- Uses descriptive text and clear call-to-action
- Links to the partner registration portal
- Provides good spacing with
mt-12This enhances discoverability of the partner program while maintaining clean separation from the main signup flow.
58-75: Verify component layout improvements maintain functionality.The refactored Verify component shows consistent improvements:
- Better semantic structure with proper heading hierarchy
- Improved spacing and visual alignment with
items-center gap-1- Maintains the existing email truncation and display logic
- Consistent spacing patterns with the SignUp component
Summary by CodeRabbit
New Features
UI/UX Improvements
Bug Fixes
Chores