Improve UI/UX of add domain page and edit domain page. #4444
Conversation
WalkthroughThe "add domain" and "edit domain" HTML templates were updated to enhance the visual design and user experience, particularly for the domain logo upload section. The updates introduce interactive image preview, client-side validation for uploads, improved error handling, and consistent styling throughout the forms. JavaScript functions were added for image preview and removal. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Template (JS)
User->>Browser: Selects image file for logo upload
Browser->>Template (JS): Triggers previewUploadedImage()
Template (JS)->>Template (JS): Validate file type and size
alt Validation fails
Template (JS)->>Browser: Display error message
Template (JS)->>Browser: Do not update preview
else Validation succeeds
Template (JS)->>Browser: Display image preview
Template (JS)->>Browser: Show remove button, hide default icon
end
User->>Browser: Clicks remove logo button
Browser->>Template (JS): Triggers removeUploadedImage()
Template (JS)->>Browser: Clear input, hide preview, show default icon, clear errors
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 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: 0
🔭 Outside diff range comments (2)
website/templates/organization/dashboard/edit_domain.html (2)
322-354:previewUploadedImage/removeUploadedImageduplicated across templates – move to a shared JS moduleThe two functions are copy-pasted here and in
add_domain.html. Any future bug-fix (e.g., MIME list, size limit, a11y tweaks) will have to be done twice and risks divergence.Export them once (e.g.,
static/js/file-preview.js) and load that script from both templates. This keeps the templates clean and reduces maintenance overhead.
356-391:displayWebshotPreviewlacks the validation present for logo uploadsLogo uploads enforce MIME type and 5 MB size limits; webshot uploads do not. An oversized or unsupported file can trigger memory spikes when drawn on a canvas. Apply the same validation logic (or reuse the shared helper suggested above).
♻️ Duplicate comments (2)
website/templates/organization/dashboard/add_domain.html (2)
346-484: Same comments as inedit_domain.htmlThe
previewUploadedImage,removeUploadedImage, anddisplayWebshotPreviewblocks duplicate logic, console debugging, and missing validation issues already flagged in the Edit Domain template. Consolidate them into a shared script and apply the validation fix for webshots.
275-276: Name attribute should beuser[]for multiple selectionsSee detailed explanation in the previous file.
🧹 Nitpick comments (3)
website/templates/organization/dashboard/edit_domain.html (3)
393-411: Remove verboseconsole.logdebugging before shippingFive separate
console.logcalls leak implementation details into the browser console and add noise in production. Either gate them behind aDEBUGflag or drop them:- console.log('Preview function called with:', { previewId, defaultIconId, removeButtonId }); ... - console.log('Elements found:', { preview: preview !== null, defaultIcon: defaultIcon !== null, removeButton: removeButton !== null, errorDiv: errorDiv !== null }); + // debug statements removed – keep production console clean
240-258: Typo & copy error in explanatory text“
registerd user” and “someones reports” contain typos that undermine professionalism.- Email should be domain mail and should be registerd user on BLT. + Email must use the domain and belong to a registered BLT user. ... - Get notified when someones reports a bug on this domain. + Get notified when someone reports a bug on this domain.
74-78: Hard-coded brand colour—prefer Tailwind config or CSS variable
#e74c3cis repeated dozens of times. Define it once in the Tailwind
theme (theme.extend.colors) or expose a CSS var so future rebranding
doesn’t require hunting through templates.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (2)
website/templates/organization/dashboard/add_domain.html(9 hunks)website/templates/organization/dashboard/edit_domain.html(7 hunks)
🔇 Additional comments (1)
website/templates/organization/dashboard/edit_domain.html (1)
245-257: Duplicate<select>name without[]may overwrite valuesEach dynamically added manager dropdown is rendered as
<select name="user">. Browsers send all values for duplicate
names, but Django’s defaultrequest.POST['user']will return only the
last one, unless you explicitly callgetlist(). To avoid silent data
loss, append[]to the name or use distinct names:- <select name="user" + <select name="user[]"
fixes #4443
Add Domain
Edit Domain
Summary by CodeRabbit
New Features
Style
Bug Fixes
Accessibility