diff --git a/src/popup/addEditInterface.js b/src/popup/addEditInterface.js index 1a988929..cafda20d 100644 --- a/src/popup/addEditInterface.js +++ b/src/popup/addEditInterface.js @@ -222,6 +222,17 @@ function AddEditInterface(settingsModel) { return `min-width: 65px; max-width: 442px; width: ${length * 8}px;`; } + /** + * Generate and set a new secret on the provided login object + * + * @param {object} login current secret details + * @returns {void} + */ + function generateSecret(login) { + loginObj.setPassword(loginObj.generateSecret(passwordLength, symbols)); + passwordGenerated = true; + } + return { oncreate: function (vnode) { let elems = ["div.title", "div.location div.store", "div.contents"]; @@ -490,13 +501,13 @@ function AddEditInterface(settingsModel) { ? helpersUI.highlight(loginObj.fields.secret) : "" ), - m("div.btn.generate", { + m("div.btn.generate[tabindex=0]", { title: "Generate password", - onclick: () => { - loginObj.setPassword( - loginObj.generateSecret(passwordLength, symbols) - ); - passwordGenerated = true; + onclick: () => generateSecret(loginObj), + onkeydown: (e) => { + if (e.code == "Space") { + generateSecret(loginObj) + } }, }), ]), diff --git a/src/popup/colors.less b/src/popup/colors.less index c5e41224..9dfeff5f 100644 --- a/src/popup/colors.less +++ b/src/popup/colors.less @@ -47,14 +47,14 @@ .addEdit, .details { .btn { + &.generate { + background-color: @edit-bg-color; + } + &:hover, &:focus { background-color: @hover-bg-color; } - - &.generate { - background-color: @edit-bg-color; - } } .contents {