Restructure some popups to use <form>

dev/View/Popup/Account.js

@@ -2,7 +2,6 @@ import { getNotification } from 'Common/Translator';
 
 import Remote from 'Remote/User/Fetch';
 
-import { decorateKoCommands } from 'Knoin/Knoin';
 import { AbstractViewPopup } from 'Knoin/AbstractViews';
 
 export class AccountPopupView extends AbstractViewPopup {
@@ -26,22 +25,15 @@ export class AccountPopupView extends AbstractViewPopup {
 		this.email.subscribe(() => this.emailError(false));
 
 		this.password.subscribe(() => this.passwordError(false));
-
-		decorateKoCommands(this, {
-			addAccountCommand: self => !self.submitRequest()
-		});
-	}
-
-	addAccountCommand() {
-		this.emailError(!this.email().trim());
-		this.passwordError(!this.password().trim());
-
-		if (this.emailError() || this.passwordError()) {
-			return false;
 	}
 
+	submitForm() {
+		if (!this.submitRequest()) {
+			const email = this.email().trim(), pass = this.password();
+			this.emailError(!email);
+			this.passwordError(!pass);
+			if (!this.emailError() && pass) {
 				this.submitRequest(true);
-
 				Remote.request('AccountSetup', (iError, data) => {
 						this.submitRequest(false);
 						if (iError) {
@@ -52,13 +44,13 @@ export class AccountPopupView extends AbstractViewPopup {
 							this.closeCommand();
 						}
 					}, {
-				Email: this.email(),
+						Email: email,
-				Password: this.password(),
+						Password: pass,
 						New: this.isNew() ? 1 : 0
 					}
 				);
-
+			}
-		return true;
+		}
 	}
 
 	onShow(account) {

dev/View/Popup/FolderCreate.js

@@ -11,7 +11,6 @@ import { SettingsUserStore } from 'Stores/User/Settings';
 
 import Remote from 'Remote/User/Fetch';
 
-import { decorateKoCommands } from 'Knoin/Knoin';
 import { AbstractViewPopup } from 'Knoin/AbstractViews';
 
 import { setFolder, getFolderFromCacheList } from 'Common/Cache';
@@ -42,13 +41,10 @@ export class FolderCreatePopupView extends AbstractViewPopup {
 		);
 
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
-
-		decorateKoCommands(this, {
-			createFolderCommand: self => self.simpleFolderNameValidation(self.folderName())
-		});
 	}
 
-	createFolderCommand() {
+	submitForm() {
+		if (/^[^\\/]+$/g.test(this.folderName())) {
 			let parentFolderName = this.selectedParentValue();
 			if (!parentFolderName && 1 < FolderUserStore.namespace.length) {
 				parentFolderName = FolderUserStore.namespace.slice(0, FolderUserStore.namespace.length - 1);
@@ -81,9 +77,6 @@ export class FolderCreatePopupView extends AbstractViewPopup {
 
 			this.closeCommand();
 		}
-
-	simpleFolderNameValidation(sName) {
-		return /^[^\\/]+$/g.test(sName);
 	}
 
 	onShow() {

dev/View/Popup/Identity.js

@@ -2,7 +2,6 @@ import { getNotification } from 'Common/Translator';
 
 import Remote from 'Remote/User/Fetch';
 
-import { decorateKoCommands } from 'Knoin/Knoin';
 import { AbstractViewPopup } from 'Knoin/AbstractViews';
 
 const reEmail = /^[^@\s]+@[^@\s]+$/;
@@ -60,12 +59,10 @@ export class IdentityPopupView extends AbstractViewPopup {
 		this.replyTo.valueHasMutated();
 		this.bcc.valueHasMutated();
 */
-		decorateKoCommands(this, {
-			addOrEditIdentityCommand: self => !self.submitRequest()
-		});
 	}
 
-	addOrEditIdentityCommand() {
+	submitForm() {
+		if (!this.submitRequest()) {
 			if (this.signature && this.signature.__fetchEditorValue) {
 				this.signature.__fetchEditorValue();
 			}
@@ -79,17 +76,17 @@ export class IdentityPopupView extends AbstractViewPopup {
 					this.emailFocused(true);
 				}
 
-			return false;
+				return;
 			}
 
 			if (this.replyToHasError()) {
 				this.replyToFocused(true);
-			return false;
+				return;
 			}
 
 			if (this.bccHasError()) {
 				this.bccFocused(true);
-			return false;
+				return;
 			}
 
 			this.submitRequest(true);
@@ -112,8 +109,7 @@ export class IdentityPopupView extends AbstractViewPopup {
 					SignatureInsertBefore: this.signatureInsertBefore() ? 1 : 0
 				}
 			);
-
+		}
-		return true;
 	}
 
 	clearPopup() {

snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html

@@ -5,33 +5,30 @@
 		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
 	</h3>
 </header>
-<form class="modal-body form-horizontal" autocomplete="off">
+<form id="accountform" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
 	<div class="alert" data-bind="visible: '' !== submitError()">
 		<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
 		<span data-bind="text: submitError"></span>
-		<div data-bind="visible: submitErrorAdditional">
+		<div data-bind="visible: submitErrorAdditional, text: submitErrorAdditional"></div>
-			<br>
-			<span data-bind="text: submitErrorAdditional"></span>
-		</div>
 	</div>
 	<div class="control-group" data-bind="css: {'error': emailError}">
 		<label data-i18n="GLOBAL/EMAIL"></label>
 		<strong style="margin-top: 5px;" data-bind="visible: !isNew(), text: email"></strong>
 		<input type="email" class="input-xlarge"
 			autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false"
-			data-bind="visible: isNew, textInput: email, onEnter: addAccountCommand">
+			data-bind="visible: isNew, textInput: email">
 	</div>
 	<div class="control-group" data-bind="css: {'error': passwordError}">
 		<label data-i18n="GLOBAL/PASSWORD"></label>
 		<input type="password" class="input-xlarge" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-			data-bind="value: password, onEnter: addAccountCommand">
+			required="" data-bind="value: password">
 	</div>
 </form>
 <footer>
-	<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
+	<button form="accountform" class="btn buttonAddAccount">
 		<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
 		<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
-	</a>
+	</button>
 </footer>

snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html

@@ -2,8 +2,7 @@
 	<a href="#" class="close" data-bind="command: closeCommand">×</a>
 	<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
 </header>
-<div class="modal-body">
+<form id="modal-body searchform" class="form-horizontal" action="#/" autocomplete="off" data-bind="submit: submitForm">
-	<form id="searchform" class="form-horizontal" action="#/" autocomplete="off" data-bind="submit: submitForm">
 	<div class="row">
 		<div class="span4">
 			<div class="control-group">
@@ -82,8 +81,7 @@
 			</div>
 		</div>
 	</div>
-	</form>
+</form>
-</div>
 <footer>
-	<button type="submit" form="searchform" class="btn buttonAdvSearch" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
+	<button form="searchform" class="btn buttonAdvSearch" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
 </footer>

snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html

@@ -2,8 +2,7 @@
 	<a href="#" class="close" data-bind="command: closeCommand">×</a>
 	<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>
 </header>
-<div class="modal-body">
+<form id="createfolderform" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
-	<div class="form-horizontal">
 	<div class="control-group">
 		<label data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
 		<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
@@ -13,7 +12,7 @@
 		<label data-i18n="GLOBAL/NAME"></label>
 		<input type="text"
 			autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: folderName, onEnter: createFolderCommand">
+			required="" pattern="^[^\\/]+$" data-bind="textInput: folderName">
 	</div>
 	<div class="control-group" data-bind="component: {
 		name: 'Checkbox',
@@ -22,11 +21,10 @@
 			value: folderSubscribe
 		}
 	}"></div>
-	</div>
+</form>
-</div>
 <footer>
-	<a class="btn buttonCreate" data-bind="command: createFolderCommand">
+	<button form="createfolderform" class="btn buttonCreate">
 		<i class="icon-folder-add"></i>
 		<span data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
-	</a>
+	</button>
 </footer>

snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html

@@ -5,7 +5,7 @@
 		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
 	</h3>
 </header>
-<div class="modal-body">
+<form id="identityform" class="modal-body" autocomplete="off" data-bind="submit: submitForm">
 	<div class="form-horizontal g-ui-user-select-none">
 		<div class="alert" data-bind="visible: '' !== submitError()">
 			<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
@@ -17,26 +17,26 @@
 				<div class="textEmail" data-bind="text: email, visible: owner"></div>
 				<input type="email" class="input-xlarge" autofocus=""
 					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="visible: !owner(), value: email, onEnter: addOrEditIdentityCommand, hasfocus: emailFocused">
+					data-bind="visible: !owner(), value: email, hasfocus: emailFocused">
 			</div>
 		</div>
 		<div class="control-group">
 			<label data-i18n="GLOBAL/NAME"></label>
 			<input type="text" class="input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="value: name, onEnter: addOrEditIdentityCommand">
+				data-bind="value: name">
 		</div>
 		<div class="control-group" data-bind="visible: showReplyTo, css: {'error': replyToHasError}">
 			<label data-i18n="GLOBAL/REPLY_TO"></label>
 			<input type="text" class="inputReplyTo input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="value: replyTo, onEnter: addOrEditIdentityCommand, hasfocus: replyToFocused">
+				data-bind="value: replyTo, hasfocus: replyToFocused">
 		</div>
 		<div class="control-group" data-bind="visible: showBcc, css: {'error': bccHasError}">
 			<label data-i18n="GLOBAL/BCC"></label>
 			<input type="text" class="inputBcc input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="value: bcc, onEnter: addOrEditIdentityCommand, hasfocus: bccFocused">
+				data-bind="value: bcc, hasfocus: bccFocused">
 		</div>
 		<div class="control-group" data-bind="visible: !showReplyTo() || !showBcc()">
 			<div>
@@ -63,12 +63,12 @@
 		}"></div>
 	</div>
 	<div class="e-signature-place" data-bind="editor: signature"></div>
-</div>
+</form>
 <footer>
-	<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
+	<button form="identityform" class="btn buttonAddIdentity">
 		<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
 		<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
-	</a>
+	</button>
 </footer>