#89 use HTML5 form validity on PGP Generator popup

This commit is contained in:
the-djmaze 2022-01-28 00:22:54 +01:00
parent 0da681f074
commit 61ec49fd22
2 changed files with 8 additions and 15 deletions

View file

@ -3,7 +3,6 @@
import { PgpUserStore } from 'Stores/User/Pgp'; import { PgpUserStore } from 'Stores/User/Pgp';
import { IdentityUserStore } from 'Stores/User/Identity'; import { IdentityUserStore } from 'Stores/User/Identity';
import { decorateKoCommands } from 'Knoin/Knoin';
import { AbstractViewPopup } from 'Knoin/AbstractViews'; import { AbstractViewPopup } from 'Knoin/AbstractViews';
import { Capa } from 'Common/Enums'; import { Capa } from 'Common/Enums';
@ -33,13 +32,9 @@ export class OpenPgpGeneratePopupView extends AbstractViewPopup {
this.canGnuPG = Settings.capa(Capa.GnuPG); this.canGnuPG = Settings.capa(Capa.GnuPG);
this.email.subscribe(() => this.emailError(false)); this.email.subscribe(() => this.emailError(false));
decorateKoCommands(this, {
generateOpenPgpKeyCommand: 1
});
} }
generateOpenPgpKeyCommand() { submitForm() {
const type = this.keyType().toLowerCase(), const type = this.keyType().toLowerCase(),
userId = { userId = {
name: this.name(), name: this.name(),
@ -60,7 +55,7 @@ export class OpenPgpGeneratePopupView extends AbstractViewPopup {
*/ */
this.emailError(!this.email().trim()); this.emailError(!this.email().trim());
if (this.emailError()) { if (this.emailError()) {
return false; return;
} }
this.submitRequest(true); this.submitRequest(true);
@ -81,8 +76,6 @@ export class OpenPgpGeneratePopupView extends AbstractViewPopup {
this.submitRequest(false); this.submitRequest(false);
this.showError(e); this.showError(e);
}); });
return true;
} }
showError(e) { showError(e) {

View file

@ -2,14 +2,14 @@
<a href="#" class="close" data-bind="command: cancelCommand">×</a> <a href="#" class="close" data-bind="command: cancelCommand">×</a>
<h3 data-i18n="OPENPGP/POPUP_GENERATE_TITLE"></h3> <h3 data-i18n="OPENPGP/POPUP_GENERATE_TITLE"></h3>
</header> </header>
<form class="modal-body form-horizontal" autocomplete="off"> <form id="openpgp-generate" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
<div class="alert" data-bind="visible: '' !== submitError()"> <div class="alert" data-bind="visible: '' !== submitError()">
<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a> <a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
<span data-bind="text: submitError"></span> <span data-bind="text: submitError"></span>
</div> </div>
<div class="control-group" data-bind="css: {'error': emailError}"> <div class="control-group" data-bind="css: {'error': emailError}">
<label data-i18n="GLOBAL/EMAIL"></label> <label data-i18n="GLOBAL/EMAIL"></label>
<input type="text" class="input-xlarge" <input type="text" required="" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
list="emailaddresses" data-bind="value: email" /> list="emailaddresses" data-bind="value: email" />
<datalist id="emailaddresses"> <datalist id="emailaddresses">
@ -20,13 +20,13 @@
</div> </div>
<div class="control-group"> <div class="control-group">
<label data-i18n="GLOBAL/NAME"></label> <label data-i18n="GLOBAL/NAME"></label>
<input type="text" class="input-xlarge" <input type="text" required="" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: name" /> data-bind="value: name" />
</div> </div>
<div class="control-group"> <div class="control-group">
<label data-i18n="GLOBAL/PASSWORD"></label> <label data-i18n="GLOBAL/PASSWORD"></label>
<input type="password" class="input-xlarge" <input type="password" required="" class="input-xlarge"
autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: password" /> data-bind="value: password" />
</div> </div>
@ -52,8 +52,8 @@
</div> </div>
</form> </form>
<footer> <footer>
<a class="btn" data-bind="command: generateOpenPgpKeyCommand"> <button class="btn" form="openpgp-generate">
<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i> <i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
<span data-i18n="OPENPGP/POPUP_GENERATE_BUTTON"></span> <span data-i18n="OPENPGP/POPUP_GENERATE_BUTTON"></span>
</a> </button>
</footer> </footer>