add button to set up field

This commit is contained in:
Bruno Windels 2020-10-20 12:11:39 +02:00
parent 16e0f515dc
commit 98d7ffe87c

View file

@ -37,7 +37,7 @@ function renderEnableFromKey(t, vm) {
t.p(vm.i18n`Enter your security key below to set up session backup, which will enable you to decrypt messages received before you logged into this session. The security key is a code of 12 groups of 4 characters separated by a space that Element created for you when setting up security.`), t.p(vm.i18n`Enter your security key below to set up session backup, which will enable you to decrypt messages received before you logged into this session. The security key is a code of 12 groups of 4 characters separated by a space that Element created for you when setting up security.`),
t.p([vm.i18n`Alternatively, you can `, t.button({className: "link", onClick: () => vm.showPhraseSetup()}, vm.i18n`use a security phrase`), vm.i18n` if you have one.`]), t.p([vm.i18n`Alternatively, you can `, t.button({className: "link", onClick: () => vm.showPhraseSetup()}, vm.i18n`use a security phrase`), vm.i18n` if you have one.`]),
renderError(t), renderError(t),
renderEnableFieldRow(t, vm.i18n`Security key`, key => vm.enterSecurityKey(key)) renderEnableFieldRow(t, vm, vm.i18n`Security key`, key => vm.enterSecurityKey(key))
]); ]);
} }
@ -46,14 +46,19 @@ function renderEnableFromPhrase(t, vm) {
t.p(vm.i18n`Enter your security phrase below to set up session backup, which will enable you to decrypt messages received before you logged into this session. The security phrase is a freeform secret phrase you optionally chose when setting up security in Element. It is different from your password to login, unless you chose to set them to the same value.`), t.p(vm.i18n`Enter your security phrase below to set up session backup, which will enable you to decrypt messages received before you logged into this session. The security phrase is a freeform secret phrase you optionally chose when setting up security in Element. It is different from your password to login, unless you chose to set them to the same value.`),
t.p([vm.i18n`You can also `, t.button({className: "link", onClick: () => vm.showKeySetup()}, vm.i18n`use your security key`), vm.i18n`.`]), t.p([vm.i18n`You can also `, t.button({className: "link", onClick: () => vm.showKeySetup()}, vm.i18n`use your security key`), vm.i18n`.`]),
renderError(t), renderError(t),
renderEnableFieldRow(t, vm.i18n`Security phrase`, phrase => vm.enterSecurityPhrase(phrase)) renderEnableFieldRow(t, vm, vm.i18n`Security phrase`, phrase => vm.enterSecurityPhrase(phrase))
]); ]);
} }
function renderEnableFieldRow(t, label, callback) { function renderEnableFieldRow(t, vm, label, callback) {
const eventHandler = () => callback(input.value);
const input = t.input({type: "password", disabled: vm => vm.isBusy, placeholder: label, onChange: eventHandler});
return t.div({className: `row`}, [ return t.div({className: `row`}, [
t.div({className: "label"}, label), t.div({className: "label"}, label),
t.div({className: "content"}, t.input({type: "password", disabled: vm => vm.isBusy, placeholder: label, onChange: evt => callback(evt.target.value)})), t.div({className: "content"}, [
input,
t.button({disabled: vm => vm.isBusy, onClick: eventHandler}, vm.i18n`Set up`),
]),
]); ]);
} }