Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@Krishiv-Mahajan
Copy link
Contributor

@Krishiv-Mahajan Krishiv-Mahajan commented Nov 11, 2025

This PR fixes the missing styles on the Email Verification page mentioned in issue #4776 that appears after user signup.
The page was rendering without the site’s layout or CSS because it did not extend the main base template.

Verified that all static files load correctly and the layout now matches other authentication pages

🎯 Impact

  • Restores full styling (navbar, fonts, layout) to the verify email page
  • Provides a consistent user experience after signup

###before
Screenshot 2025-11-11 at 4 39 56 PM

after

Screenshot 2025-11-11 at 7 41 21 PM

Closes #4776

Summary by CodeRabbit

  • New Features
    • Added email verification confirmation page displaying verification status with options to sign in or return home
    • Added email confirmation interface supporting multiple verification scenarios including successful verification, pending verification, and invalid confirmation cases
    • Added functionality to resend verification emails

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 11, 2025

Walkthrough

Two new email verification templates are introduced: email_confirm.html handles email confirmation workflows with conditional rendering for verified, pending, and invalid states; verification_sent.html displays a post-signup verification prompt with metadata and localization support.

Changes

Cohort / File(s) Summary
Email verification templates
website/templates/account/email_confirm.html, website/templates/account/verification_sent.html
New templates extending base.html with i18n localization support. email_confirm.html renders three-branch verification flow (success, pending confirmation, error states) with forms and conditional messaging. verification_sent.html provides post-signup verification prompt with centered UI, metadata tags (title, description, og\_ tags), success icon, and navigation links to home and sign-in.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Areas to verify:
    • Proper base.html inheritance and template tag loading (static, custom\_tags, i18n)
    • i18n/blocktrans implementation for translatable strings across both templates
    • CSRF protection within email confirmation form in email_confirm.html
    • URL name references (account\_confirm\_email, account\_login, home, account\_email) are registered in URL configuration
    • Conditional logic correctness for verification state branches in email_confirm.html
    • Metadata tag completeness and correctness in verification_sent.html

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: #4776 add missing base layout to email verification page' accurately summarizes the main change: extending base layout to an email verification template to restore styling.
Linked Issues check ✅ Passed The changes directly address all objectives from issue #4776: two new templates (email_confirm.html and verification_sent.html) extend base.html, restoring CSS, layout, and static asset loading for email verification pages.
Out of Scope Changes check ✅ Passed Both template changes are narrowly scoped to email verification pages and directly fix the missing base layout issue identified in #4776 without introducing unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
website/templates/account/verification_sent.html (1)

21-21: Optional: Verify sidenav inclusion is appropriate for this authentication flow page.

The sidenav is included (Line 21) in the centered card container. Consider whether the sidebar should appear on the post-signup verification prompt page, or if it should be conditionally included only on specific authentication contexts. This is a UX consideration worth validating with your design/UX guidelines.

Also applies to: 22-22

website/templates/account/email_confirm.html (1)

22-100: Optional: Extract shared card component to reduce duplication between templates.

Both verification_sent.html and email_confirm.html share significant markup duplication:

  • Centered card container structure (Lines 22-100 here, Lines 22-70 in verification_sent.html)
  • Button styling patterns
  • Icon and heading layout
  • SVG markup

Consider extracting a reusable account_card.html or similar component template to reduce duplication and improve maintainability.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 0668a4a and ff16c92.

📒 Files selected for processing (2)
  • website/templates/account/email_confirm.html (1 hunks)
  • website/templates/account/verification_sent.html (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Run Tests
  • GitHub Check: docker-test
🔇 Additional comments (4)
website/templates/account/verification_sent.html (2)

1-71: ✅ Successfully restores missing base layout and styling.

The template correctly extends base.html (Line 1), directly addressing the root cause of issue #4776. All required static files, CSS, and site layout will now load and render properly, restoring the visual consistency across authentication pages.

Structure & quality observations:

  • Metadata blocks (title, description, og_* properties) are comprehensive and appropriately set for SEO.
  • i18n implementation via trans and blocktrans tags (Lines 36, 40, 43, 46, 53, 57, 62, 65) is thorough, enabling full localization.
  • HTML structure is semantic and well-organized with proper use of Tailwind classes for responsive layout and accessibility (focus states on buttons at Lines 52, 56).
  • Icon, typography hierarchy, and color scheme (green for success) provide good visual feedback.

6-6: All URL routes and custom tags are properly configured.

Verification confirms:

  • {% env 'PROJECT_NAME' %} custom tag is defined in website/templatetags/custom_tags.py with @register.simple_tag decorator
  • home route exists in blt/urls.py as path("", home, name="home")
  • account_login and account_email routes are provided by django-allauth with default URL names, included via path("accounts/", include("allauth.urls")) in blt/urls.py

All template references are valid and will function correctly.

website/templates/account/email_confirm.html (2)

1-101: ✅ Comprehensive email confirmation workflow with base layout restored.

The template correctly extends base.html (Line 1) and implements all three states of the email verification workflow:

  • Already verified (Lines 38-49): Success messaging with login link.
  • Pending confirmation (Lines 50-69): Email details, confirmation form with CSRF protection, and cancel option.
  • Invalid/expired (Lines 70-97): Clear error messaging with options to request a new verification email or return home.

Color-coded visual feedback (blue for pending, red for error, green for verified) and consistent button styling enhance UX clarity across states.


43-43: Let me verify the URL route and context structure for allauth's email confirmation:

Based on my verification, I have found that the template email_confirm.html is correctly configured to work with django-allauth's standard email confirmation flow. Here's what I confirmed:

The context variables passed to the email confirmation template include user, current_site, activate_url, and key, and allauth's default email_confirm.html template uses confirmation.email_address.user and confirmation.email_address.email, exactly as implemented in the codebase template.

The confirmation object contains the key needed for email verification, and the web search results confirm that the EmailAddress model has a verified field.

The URL route account_confirm_email is provided by the path("accounts/", include("allauth.urls")) configuration at line 388 and 622 in blt/urls.py. All template context variables correctly reference the allauth EmailAddress model structure:

  • confirmation.email_address.verified — matches allauth's BooleanField
  • confirmation.email_address.email — matches allauth's EmailField
  • confirmation.email_address.user — matches allauth's ForeignKey to the user model
  • confirmation.key — the verification token

No custom views, models, or URL configurations are needed; the template is a correct override of allauth's default implementation.

@github-project-automation github-project-automation bot moved this from Backlog to Ready in 📌 OWASP BLT Project Board Nov 11, 2025
@Krishiv-Mahajan
Copy link
Contributor Author

@DonnieBLT
The fix is complete and is reviewed by coderabbitai . Please review it when you have time .

@DonnieBLT DonnieBLT merged commit 519f028 into OWASP-BLT:main Nov 15, 2025
16 checks passed
@DonnieBLT
Copy link
Collaborator

Thank you!

@Krishiv-Mahajan Krishiv-Mahajan deleted the css-error branch December 19, 2025 17:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

🐛 Bug: Missing Styles on Email Verification Page

2 participants