web: Improve form input validation and visibility. #12812
Conversation
✅ Deploy Preview for authentik-docs canceled.
|
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| class="pf-c-form-control pf-m-monospace" | ||
| autocomplete="off" | ||
| spellcheck="false" | ||
| inputmode="url" |
There was a problem hiding this comment.
Opted for inputmode over setting the type to "url". This will hint to the browser that a URL-oriented virtual keyboard is preferred without requiring a valid protocol prefixing the domain.
There was a problem hiding this comment.
The heck of it is, we don't expect users to be doing Admin stuff on their phones. (Don't change this! It's fine! It's just such a rare use case, I don't know that any admin will ever appreciate it as much as you do.)
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #12812 +/- ##
==========================================
- Coverage 92.75% 92.70% -0.06%
==========================================
Files 769 769
Lines 38926 38926
==========================================
- Hits 36107 36087 -20
- Misses 2819 2839 +20
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| class="pf-c-form-control pf-m-monospace" | ||
| autocomplete="off" | ||
| spellcheck="false" | ||
| inputmode="url" |
There was a problem hiding this comment.
The heck of it is, we don't expect users to be doing Admin stuff on their phones. (Don't change this! It's fine! It's just such a rare use case, I don't know that any admin will ever appreciate it as much as you do.)
| required | ||
| /> | ||
| <p class="pf-c-form__helper-text"> | ||
| ${msg( | ||
| "Can be in the format of 'unix://' when connecting to a local docker daemon, using 'ssh://' to connect via SSH, or 'https://:2376' when connecting to a remote system.", | ||
| html`Can be in the format of <code>unix://</code> when connecting to a local |
There was a problem hiding this comment.
I'm concerned that the excess whitespace makes life harder for translators.
Details
This PR addresses feedback regarding the visibility of code-like input fields where character differentiation is needed, e.g. tokens, URLs, usernames, protocol arguments.
Additionally, these same input fields no longer trigger browser spell-check or autocomplete, reducing visual noise when completing a form.
Before
After
Before
After
Checklist
ak test authentik/)make lint-fix)If an API change has been made
make gen-build)If changes to the frontend have been made
make web)If applicable
make website)