Add ability to auto-generate a random/unique value for Private access shared passwords
lb- opened this issue · comments
Is your proposal related to a problem?
This is part of a set of improvements to help improve the way that the Private access (shared password method) works. See #10588
We want to make it easier for users to choose more secure values for this shared password, making it harder to guess and also gain access to easily with over the shoulder viewing of editors.
Describe the solution you'd like
Add the ability to generate a randomized string and also copy the value to the clipboard easily. Example screenshot below.
This would involve;
- Enhancing
client/src/controllers/ActionController.ts(ActionController) with the ability to create a random value. - Enhancing
ActionControllerto support it's actions targeting a specific element with a custom selector value. - Adopting the
ClipboardControllerfor this field to support easy copy to clipboard behaviour. You can see how this is used in #11317 & #3683 & the code snippet below.
Important: It may make more sense to add this behaviour to the SlugController and rename that controller to something like CleanController (for cleaning/modifying field input values). Generally the change will be the same, have a read and provide thoughts in the comments.
ActionController - adding a new value
This controller is a bit of a toolkit controller, it let's us perform some kind of simple action on a button or input with Stimulus easily.
We will want to abstract the ability to get the most suitable target element. Read up on Stimulus values and actions if you are not sure what's happening here.
static values = {
target: { type: String, default: '' }, // add this
};
// add this method
getTarget(event) {
const { target = '' } = { ...event.detail, ...event.params };
return (document.querySelector(target) || this.element) as HTMLElement;
}From there, we should really update all other methods to use this. e.g.
click() {
this.element.click();
}
// would be replaced with.
click(event) {
this.getTarget(event).click();
}The other methods will be a bit more complex but not too much more.
ActionController - Add a unique method.
This would be very similar to reset on the ActionController but use a way to generate a set of unique values and output them as a string.
We would want to dispatch a change event also.
unique(event) {
const count = 5
const array = new Uint32Array(5);
// get the count from params/detail if possible.
const newValue = [...window.crypto.getRandomValues(array)].map(val => val.toString(36)).join('-');
// update the this.getTarget().value to the new value
}Describe alternatives you've considered
Multiple discussions have been had on #10588
Additional context
- See #10588
- See a somewhat similar controller implementation https://github.com/SpinaCMS/Spina/blob/main/app/assets/javascripts/spina/controllers/unique_id_controller.js
Working on this
- Anyone can contribute to this if they have experience with Stimulus and TypeScript or are willing to learn.
- PR must come with unit tests for all added Stimulus behaviour and also Python unit tests to check the basic addition of the HTML data attributes.
- View our contributing guidelines, add a comment to the issue once you’re ready to start.
If we're going to include a password generator, we should make sure it works and is secure. window.crypto tends to only work in secure contexts (eg HTTPS and localhost), which might be an issue for some. Also, it would need to interact with Django's password validator framework, which is going to be quite complex.
Alternatively, we could link out to a password generator: https://bitwarden.com/password-generator/, at least in the first instance.
Or, final option, we do "Leave blank to generate a secure password", and defer the generation to the backend instead.
We could make a server side call if needed.
However I suggested the getRandomValues intentionally as it doesn't require secure context.
https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues
As for the interaction with the password validation, I think we would just have to disable the generator if that feature is used.