Generate passphrase feature for password form field - #116
Open
david-roper wants to merge 6 commits into
Open
Conversation
|
I would like this done with a passphrase generator instead. |
Contributor
Author
|
@gdevenyi sure i can change the wording the method to reflect a passphrase generator instead |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an optional
generatePassphrasehook to thepasswordstring field. When a form supplies it, a button appears inside the input that fills the field with the generated value and reveals it.Changes
StringFieldPasswordgeneratePassphrase?: (this: void) => string. The button renders only when it's provided, so existing password fields are unaffected.setValueand flipsshowtotrue— a generated passphrase the user can't read isn't much use.tabIndex={-1}), since generating is a real action rather than a view toggle. It sits immediately after the input and activates on Enter/Space.Tooltiprather than a nativetitleso it matches the rest of the components and appears without the browser's delay. Thearia-labelremains the accessible name, so the tooltip acts as a description. Both strings are translated en/fr.disabled || readOnly, matching the eye toggle.px-3, so long values slid under the eye button.setValueand the existing effect recalculates.Story —
PasswordWithPassphraseGenerator, with a strength bar so the meter's response to generation is visible. Its demo generator draws four words from a 32-word list usingcrypto.getRandomValues, producing values likewillow-hollow-marble-ivory. A library story tends to get copied as a template, so it's worth the few extra lines not to modelMath.randomfor credential generation. The list is exactly 32 words so that reducing a random byte modulo its length stays uniform.The story needed its own
PasswordStorytype alias, sincegeneratePassphraseisn't present on every member of theStringFieldPropsunion.Tests — new
StringFieldPassword.spec.tsx, the first spec for this field: button absent without the prop, fills the field on click, reveals the value, is tab-reachable and Enter-activated, and is disabled when read-only.Notes for reviewers
generatePassphraseis declared locally onStringFieldPasswordPropswith a comment marking it for removal, because form configs are typed againstStringFormFieldand the property isn't published there yet (checked against 1.3.0, the current release). Needs alibui-form-typesrelease before this is usable end to end — note the upstream property is currently namedgeneratePasswordand will need the same rename. That release would also let us bump to^1.3.0and drop the matching local stopgap forallowCustomValue.StringFieldPasswordonvariant: 'password'; this PR doesn't rename the field itself.pr-10reserves 40px, so a sufficiently long value can run under the sparkle icon.Button(viaTooltip.Trigger, so it carries a ghost hover state), while the eye toggle remains a bare<button>. Giving the eye the same treatment plus its own tooltip would make them consistent, but that changes the look of every existing password field, so it's left out of this PR.Testing
tsc --noEmitandeslint srcclean.related to issue DouglasNeuroInformatics/OpenDataCapture#1311