Redesign Admin Settings #308
Conversation
WalkthroughThis pull request updates the front-end components by restructuring the The internationalization files for both English and German have also been updated. A new translation entry for the Web of Trust section has been added, while specific existing entries related to detailed Web of Trust information have been removed, replaced with a general prompt ("Learn more." / "Erfahre mehr."), consolidating the guidance provided to users. Tip 🌐 Web search-backed reviews and chat
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/components/AdminSettings.vue (2)
233-238: Consider improving error message positioning.The current absolute positioning with transforms might cause layout shifts and potential visibility issues in narrow viewports.
Consider this alternative approach:
- <div v-if="wotMaxDepthError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]"> - <div class="bg-red-50 border border-red-300 text-red-900 px-2 py-1 rounded shadow-sm text-sm whitespace-nowrap"> - {{ t('admin.webOfTrust.wotMaxDepth.error') }} - <div class="absolute bottom-0 left-1/2 transform translate-y-1/2 rotate-45 w-2 h-2 bg-red-50 border-r border-b border-red-300"></div> - </div> - </div> + <div v-if="wotMaxDepthError" class="mt-1 text-sm text-red-900"> + {{ t('admin.webOfTrust.wotMaxDepth.error') }} + </div>Also applies to: 257-262
322-326: Consider consolidating error states.Multiple separate error ref variables could be combined into a single error state object for better maintainability.
Consider this approach:
-const onFetchError = ref<Error | null>(); -const errorOnFetchingUpdates = ref<boolean>(false); -const onSaveError = ref<Error | null>(null); -const wotMaxDepthError = ref<Error | null >(null); -const wotIdVerifyLenError = ref<Error | null >(null); +interface ErrorState { + fetch?: Error; + fetchingUpdates: boolean; + save?: Error; + wotMaxDepth?: Error; + wotIdVerifyLen?: Error; +} +const errors = ref<ErrorState>({ + fetchingUpdates: false +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/AdminSettings.vue(3 hunks)frontend/src/i18n/de-DE.json(1 hunks)frontend/src/i18n/en-US.json(1 hunks)
🔇 Additional comments (4)
frontend/src/components/AdminSettings.vue (2)
20-80: Well-structured server info section with improved layout!The new grid layout with right-aligned labels and clear visual hierarchy improves readability and maintainability.
83-213: Consistent layout application in license info section!The section maintains design consistency with the server info section while effectively handling different license states.
frontend/src/i18n/en-US.json (1)
57-57: Good consolidation of information links!Simplifying multiple "Learn more" strings into a single, reusable translation improves maintainability.
frontend/src/i18n/de-DE.json (1)
57-57: Consistent translation changes!The German translation changes mirror the English changes, maintaining language consistency.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/components/AdminSettings.vue (2)
231-236: Consider improving error message positioning to prevent layout shifts.The absolute positioning of error messages above input fields might cause content jumps when errors appear/disappear. Consider using a fixed-height container or positioning messages below the inputs to maintain layout stability.
- <div v-if="wotMaxDepthError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]"> - <div class="bg-red-50 border border-red-300 text-red-900 px-2 py-1 rounded shadow-sm text-sm whitespace-nowrap"> - {{ t('admin.webOfTrust.wotMaxDepth.error') }} - <div class="absolute bottom-0 left-1/2 transform translate-y-1/2 rotate-45 w-2 h-2 bg-red-50 border-r border-b border-red-300"></div> - </div> - </div> + <div v-if="wotMaxDepthError" class="mt-2"> + <div class="bg-red-50 border border-red-300 text-red-900 px-2 py-1 rounded shadow-sm text-sm"> + {{ t('admin.webOfTrust.wotMaxDepth.error') }} + </div> + </div>
412-420: Enhance form validation logic.The validation logic could be more robust:
- Consider validating
wotIdVerifyLenagainst a maximum value likewotMaxDepth.- Add type validation to ensure inputs are integers.
if (!form.value?.checkValidity()) { - if (wotMaxDepth.value < 0 || wotMaxDepth.value > 9) { + if (!Number.isInteger(wotMaxDepth.value) || wotMaxDepth.value < 0 || wotMaxDepth.value > 9) { wotMaxDepthError.value = new FormValidationFailedError(); } - if (wotIdVerifyLen.value < 0) { + if (!Number.isInteger(wotIdVerifyLen.value) || wotIdVerifyLen.value < 0 || wotIdVerifyLen.value > 9) { wotIdVerifyLenError.value = new FormValidationFailedError(); } return; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/AdminSettings.vue(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Build and Test
🔇 Additional comments (1)
frontend/src/components/AdminSettings.vue (1)
18-27: LGTM! Well-structured layout with semantic HTML.The layout implementation follows best practices with:
- Proper semantic HTML using
formelements- Consistent spacing and grid layout
- Clear section headings and descriptions
- Accessible form controls with proper labeling
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
frontend/src/components/AdminSettings.vue (3)
226-232: Enhance accessibility for error messages.While the error handling is well-implemented, consider adding ARIA attributes to improve accessibility for screen readers.
Add these attributes to the error message containers:
-<div v-if="wotMaxDepthError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]"> +<div v-if="wotMaxDepthError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]" role="alert" aria-live="polite">-<div v-if="wotIdVerifyLenError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]"> +<div v-if="wotIdVerifyLenError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%]" role="alert" aria-live="polite">Also applies to: 249-255
399-431: Consider debouncing form submission.While the form submission handling is well-implemented, it could benefit from debouncing to prevent rapid consecutive submissions.
Consider wrapping the save function with debounce:
-async function saveWebOfTrust() { +const saveWebOfTrust = debounce(async function() { // ... existing implementation ... -} +}, 500);
312-312: Strengthen TypeScript typing for form ref.Consider using a more specific type for the form ref to improve type safety.
-const form = ref<HTMLFormElement>(); +const form = ref<HTMLFormElement & { checkValidity: () => boolean }>();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/AdminSettings.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Build and Test
🔇 Additional comments (1)
frontend/src/components/AdminSettings.vue (1)
19-25: Well-structured layout with semantic HTML!The use of semantic
<section>tags with consistent headers and descriptions improves accessibility and maintainability. The layout changes align perfectly with the PR objectives.Also applies to: 81-87, 157-166, 211-217
and improved responsiveness for `md`
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
frontend/src/components/AdminSettings.vue (3)
207-213: Enhance form validation accessibility.Consider adding ARIA attributes to improve accessibility of error states:
- <input id="wotMaxDepth" v-model="wotMaxDepth" type="number" min="0" max="9" step="1" class="focus:ring-primary focus:border-primary block w-full shadow-xs sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': wotMaxDepthError instanceof FormValidationFailedError }"/> + <input id="wotMaxDepth" v-model="wotMaxDepth" type="number" min="0" max="9" step="1" class="focus:ring-primary focus:border-primary block w-full shadow-xs sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': wotMaxDepthError instanceof FormValidationFailedError }" :aria-invalid="wotMaxDepthError ? 'true' : 'false'" :aria-errormessage="wotMaxDepthError ? 'wotMaxDepth-error' : undefined"/> - <div v-if="wotMaxDepthError" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%] w-5/6"> + <div v-if="wotMaxDepthError" id="wotMaxDepth-error" role="alert" class="absolute left-1/2 -translate-x-1/2 -top-2 transform translate-y-[-100%] w-5/6">Also applies to: 229-235
248-251: Enhance save button UX.Consider adding a loading spinner and debouncing the save operation:
- <button type="submit" :disabled="processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed"> - <span v-if="!wotUpdated">{{ t('admin.webOfTrust.save') }}</span> - <span v-else>{{ t('admin.webOfTrust.saved') }}</span> + <button type="submit" :disabled="processing" class="inline-flex items-center justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed"> + <span v-if="processing" class="inline-flex items-center"> + <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> + <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> + <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> + </svg> + {{ t('common.saving') }} + </span> + <span v-else-if="!wotUpdated">{{ t('admin.webOfTrust.save') }}</span> + <span v-else>{{ t('admin.webOfTrust.saved') }}</span> + </button>
298-302: Improve type safety in error handling.Consider creating a more robust error handling system:
+interface ValidationError { + code: string; + message: string; +} + class FormValidationFailedError extends Error { + readonly code: string; + constructor() { super('The form is invalid.'); + this.code = 'FORM_VALIDATION_FAILED'; } } - onSaveError.value = error instanceof Error ? error : new Error('Unknown reason'); + onSaveError.value = error instanceof Error ? error : new Error('UNKNOWN_ERROR');Also applies to: 404-405
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/AdminSettings.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Build and Test
🔇 Additional comments (1)
frontend/src/components/AdminSettings.vue (1)
19-73: Well-structured layout with improved accessibility!The implementation demonstrates excellent practices:
- Consistent grid-based layout with right-aligned labels
- Proper use of semantic HTML elements
- Clear visual hierarchy with section headers and descriptions
Also applies to: 75-141, 143-191, 193-258
The layout of the Admin Settings page has been updated to improve usability and scalability as new features are added. Previously, labels were placed above the input fields, but they have now been moved to the left and aligned to the right. This adjustment creates more space for additional descriptions above or below the labels and allows error messages to be displayed more clearly without cluttering the UI.
Since the Admin Settings will continue to grow, this redesign ensures a more structured and readable layout, making future adjustments easier. No functionality has been changed, only the UI layout has been updated.