Skip to content

Improve the design of the Account Connections page#3905

Merged
Simrayz merged 2 commits intomasterfrom
chore/3873-improve-connections-page-design
Mar 25, 2026
Merged

Improve the design of the Account Connections page#3905
Simrayz merged 2 commits intomasterfrom
chore/3873-improve-connections-page-design

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Mar 23, 2026

Scope and purpose

Fixes #3873.

Improves the connections page styling and disables already-connected providers.

This pull request

  • Overrides allauth's connections template with better-styled connected accounts list
  • Makes provider buttons non-full-width and wraps them in a flex container
  • Disables already-connected providers with a tooltip

Screenshots

Before

image

After

image

Contributor Checklist

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • Wrote the commit message so that the first line continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • Based this pull request on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If it's not obvious from a linked issue, described how to interact with NAV in order for a reviewer to observe the effects of this change first-hand (commands, URLs, UI interactions)
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 23, 2026

Test results

    13 files      13 suites   25m 6s ⏱️
 2 919 tests  2 919 ✅ 0 💤 0 ❌
17 070 runs  17 070 ✅ 0 💤 0 ❌

Results for commit 4a90e30.

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 23, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.92%. Comparing base (0e5ec3c) to head (4a90e30).
⚠️ Report is 39 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3905      +/-   ##
==========================================
+ Coverage   63.89%   63.92%   +0.03%     
==========================================
  Files         625      627       +2     
  Lines       46260    46293      +33     
  Branches       43       43              
==========================================
+ Hits        29557    29594      +37     
+ Misses      16693    16689       -4     
  Partials       10       10              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz force-pushed the chore/3873-improve-connections-page-design branch from a4946f0 to 9a71688 Compare March 23, 2026 21:25
@Simrayz Simrayz requested a review from a team March 24, 2026 08:21
@Simrayz Simrayz self-assigned this Mar 24, 2026
@Simrayz Simrayz force-pushed the chore/3873-improve-connections-page-design branch from 9a71688 to 4a90e30 Compare March 24, 2026 09:15
@Simrayz Simrayz marked this pull request as ready for review March 24, 2026 09:15
@sonarqubecloud
Copy link
Copy Markdown

@hmpf
Copy link
Copy Markdown
Contributor

hmpf commented Mar 24, 2026

Wut, allauth originally uses a radio input? Jeeez!

Copy link
Copy Markdown
Contributor

@hmpf hmpf left a comment

Choose a reason for hiding this comment

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

Code looks good, I'll give it a quick test.

Comment on lines +22 to +26
"""Custom connections view that adds connected provider IDs to the context.

This allows the template to disable providers that the user has already
connected, preventing duplicate connections.
"""
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

One would think this feature is what one would usually want, and having more than one of the same provider per user is a special case.

@hmpf hmpf self-requested a review March 25, 2026 11:13
@Simrayz Simrayz merged commit 29acf9e into master Mar 25, 2026
19 checks passed
@Simrayz Simrayz deleted the chore/3873-improve-connections-page-design branch March 25, 2026 12:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When socialaccounts are available, the design of the connections page could be better

2 participants