Cleanup some html forms

dev/View/Popup/Account.js

@@ -14,25 +14,16 @@ export class AccountPopupView extends AbstractViewPopup {
 			email: '',
 			password: '',
 
-			emailError: false,
-			passwordError: false,
-
 			submitRequest: false,
 			submitError: '',
 			submitErrorAdditional: ''
 		});
-
-		this.email.subscribe(() => this.emailError(false));
-
-		this.password.subscribe(() => this.passwordError(false));
 	}
 
-	submitForm() {
+	submitForm(form) {
-		if (!this.submitRequest()) {
+		if (!this.submitRequest() && form.reportValidity()) {
-			const email = this.email().trim(), pass = this.password();
+			const data = new FormData(form);
-			this.emailError(!email);
+			data.set('New', this.isNew() ? 1 : 0);
-			this.passwordError(!pass);
-			if (!this.emailError() && pass) {
 			this.submitRequest(true);
 			Remote.request('AccountSetup', (iError, data) => {
 					this.submitRequest(false);
@@ -43,15 +34,10 @@ export class AccountPopupView extends AbstractViewPopup {
 						rl.app.accountsAndIdentities();
 						this.close();
 					}
-					}, {
+				}, data
-						Email: email,
-						Password: pass,
-						New: this.isNew() ? 1 : 0
-					}
 			);
 		}
 	}
-	}
 
 	onShow(account) {
 		if (account?.isAdditional()) {
@@ -63,9 +49,6 @@ export class AccountPopupView extends AbstractViewPopup {
 		}
 		this.password('');
 
-		this.emailError(false);
-		this.passwordError(false);
-
 		this.submitRequest(false);
 		this.submitError('');
 		this.submitErrorAdditional('');

dev/View/Popup/FolderCreate.js

@@ -43,18 +43,17 @@ export class FolderCreatePopupView extends AbstractViewPopup {
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 	}
 
-	submitForm() {
+	submitForm(form) {
-		if (/^[^\\/]+$/g.test(this.folderName())) {
+		if (form.reportValidity()) {
+			const data = new FormData(form);
+			data.set('Subscribe', this.folderSubscribe() ? 1 : 0);
+
 			let parentFolderName = this.selectedParentValue();
 			if (!parentFolderName && 1 < FolderUserStore.namespace.length) {
-				parentFolderName = FolderUserStore.namespace.slice(0, FolderUserStore.namespace.length - 1);
+				data.set('Parent', FolderUserStore.namespace.slice(0, FolderUserStore.namespace.length - 1));
 			}
 
-			Remote.abort('Folders').post('FolderCreate', FolderUserStore.foldersCreating, {
+			Remote.abort('Folders').post('FolderCreate', FolderUserStore.foldersCreating, data)
-					Folder: this.folderName(),
-					Parent: parentFolderName,
-					Subscribe: this.folderSubscribe() ? 1 : 0
-				})
 				.then(
 					data => {
 						const folder = getFolderFromCacheList(parentFolderName),

dev/View/Popup/Identity.js

@@ -4,8 +4,6 @@ import Remote from 'Remote/User/Fetch';
 
 import { AbstractViewPopup } from 'Knoin/AbstractViews';
 
-const reEmail = /^[^@\s]+@[^@\s]+$/;
-
 export class IdentityPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Identity');
@@ -17,13 +15,11 @@ export class IdentityPopupView extends AbstractViewPopup {
 
 			email: '',
 			emailFocused: false,
-			emailHasError: false,
 
 			name: '',
 
 			replyTo: '',
 			replyToFocused: false,
-			replyToHasError: false,
 
 			bcc: '',
 			bccFocused: false,
@@ -40,15 +36,12 @@ export class IdentityPopupView extends AbstractViewPopup {
 		});
 
 		this.addSubscribables({
-			email: value => this.emailHasError(value && !reEmail.test(value)),
 			replyTo: value => {
-				this.replyToHasError(value && !reEmail.test(value));
 				if (false === this.showReplyTo() && value.length) {
 					this.showReplyTo(true);
 				}
 			},
 			bcc: value => {
-				this.bccHasError(value && !reEmail.test(value));
 				if (false === this.showBcc() && value.length) {
 					this.showBcc(true);
 				}
@@ -61,34 +54,14 @@ export class IdentityPopupView extends AbstractViewPopup {
 */
 	}
 
-	submitForm() {
+	submitForm(form) {
-		if (!this.submitRequest()) {
+		if (!this.submitRequest() && form.reportValidity()) {
 			this.signature?.__fetchEditorValue?.();
-
-			if (!this.emailHasError()) {
-				this.emailHasError(!this.email().trim());
-			}
-
-			if (this.emailHasError()) {
-				if (!this.owner()) {
-					this.emailFocused(true);
-				}
-
-				return;
-			}
-
-			if (this.replyToHasError()) {
-				this.replyToFocused(true);
-				return;
-			}
-
-			if (this.bccHasError()) {
-				this.bccFocused(true);
-				return;
-			}
-
 			this.submitRequest(true);
-
+			const data = new FormData(form);
+			data.set('Id', this.id);
+			data.set('Signature', this.signature());
+			data.set('SignatureInsertBefore', this.signatureInsertBefore() ? 1 : 0);
 			Remote.request('IdentityUpdate', iError => {
 					this.submitRequest(false);
 					if (iError) {
@@ -97,47 +70,20 @@ export class IdentityPopupView extends AbstractViewPopup {
 						rl.app.accountsAndIdentities();
 						this.close();
 					}
-				}, {
+				}, data
-					Id: this.id,
-					Email: this.email(),
-					Name: this.name(),
-					ReplyTo: this.replyTo(),
-					Bcc: this.bcc(),
-					Signature: this.signature(),
-					SignatureInsertBefore: this.signatureInsertBefore() ? 1 : 0
-				}
 			);
 		}
 	}
 
-	clearPopup() {
-		this.id = '';
-		this.edit(false);
-		this.owner(false);
-
-		this.name('');
-		this.email('');
-		this.replyTo('');
-		this.bcc('');
-		this.signature('');
-		this.signatureInsertBefore(false);
-
-		this.emailHasError(false);
-		this.replyToHasError(false);
-		this.bccHasError(false);
-
-		this.showBcc(false);
-		this.showReplyTo(false);
-
-		this.submitRequest(false);
-		this.submitError('');
-	}
-
 	/**
 	 * @param {?IdentityModel} oIdentity
 	 */
 	onShow(identity) {
-		this.clearPopup();
+		this.showBcc(false);
+		this.showReplyTo(false);
+
+		this.submitRequest(false);
+		this.submitError('');
 
 		if (identity) {
 			this.edit(true);
@@ -152,15 +98,21 @@ export class IdentityPopupView extends AbstractViewPopup {
 
 			this.owner(!this.id);
 		} else {
+			this.edit(false);
+
 			this.id = Jua.randomId();
+			this.name('');
+			this.email('');
+			this.replyTo('');
+			this.bcc('');
+			this.signature('');
+			this.signatureInsertBefore(false);
+
+			this.owner(false);
 		}
 	}
 
 	afterShow() {
 		this.owner() || this.emailFocused(true);
 	}
-
-	afterHide() {
-		this.clearPopup();
-	}
 }

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

@@ -1,9 +1,7 @@
 <header>
 	<a href="#" class="close" data-bind="click: close">×</a>
-	<h3>
+	<h3 data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></h3>
-		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></span>
+	<h3 data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></h3>
-		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
-	</h3>
 </header>
 <form id="accountform" class="modal-body form-horizontal" autocomplete="off" spellcheck="false" data-bind="submit: submitForm">
 	<div class="alert" data-bind="visible: '' !== submitError()">
@@ -11,16 +9,16 @@
 		<span data-bind="text: submitError"></span>
 		<div data-bind="visible: submitErrorAdditional, text: submitErrorAdditional"></div>
 	</div>
-	<div class="control-group" data-bind="css: {'error': emailError}">
+	<div class="control-group">
 		<label data-i18n="GLOBAL/EMAIL"></label>
 		<strong style="margin-top: 5px;" data-bind="visible: !isNew(), text: email"></strong>
-		<input type="text" class="input-xlarge"
+		<input name="Email" type="text" class="input-xlarge"
 			autofocus="" autocorrect="off" autocapitalize="off"
-			data-bind="visible: isNew, textInput: email">
+			data-bind="visible: isNew, textInput: email, attr: {required: isNew}">
 	</div>
-	<div class="control-group" data-bind="css: {'error': passwordError}">
+	<div class="control-group">
 		<label data-i18n="GLOBAL/PASSWORD"></label>
-		<input type="password" class="input-xlarge" autocomplete="new-password" autocorrect="off" autocapitalize="off"
+		<input name="Password" type="password" class="input-xlarge" autocomplete="new-password" autocorrect="off" autocapitalize="off"
 			required="" data-bind="value: password">
 	</div>
 </form>

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

@@ -5,12 +5,12 @@
 <form id="createfolderform" class="modal-body form-horizontal" autocomplete="off" spellcheck="false" data-bind="submit: submitForm">
 	<div class="control-group">
 		<label data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
-		<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
+		<select name="Parent" data-bind="options: parentFolderSelectList, value: selectedParentValue,
 			optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
 	</div>
 	<div class="control-group">
 		<label data-i18n="GLOBAL/NAME"></label>
-		<input type="text"
+		<input name="Folder" type="text"
 			autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off"
 			required="" pattern="^[^\\/]+$" data-bind="textInput: folderName">
 	</div>

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

@@ -1,9 +1,7 @@
 <header class="g-ui-user-select-none">
 	<a href="#" class="close" data-bind="click: close">×</a>
-	<h3>
+	<h3 data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></h3>
-		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></span>
+	<h3 data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></h3>
-		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
-	</h3>
 </header>
 <form id="identityform" class="modal-body" autocomplete="off" spellcheck="false" data-bind="submit: submitForm">
 	<div class="form-horizontal g-ui-user-select-none">
@@ -11,30 +9,30 @@
 			<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
 			<span data-bind="text: submitError"></span>
 		</div>
-		<div class="control-group" data-bind="css: {'error': emailHasError}">
+		<div class="control-group">
 			<label data-i18n="GLOBAL/EMAIL"></label>
 			<div>
 				<div class="textEmail" data-bind="text: email, visible: owner"></div>
-				<input type="email" class="input-xlarge" autofocus=""
+				<input name="Email" type="email" class="input-xlarge" autofocus=""
 					autocomplete="off" autocorrect="off" autocapitalize="off"
-					data-bind="visible: !owner(), value: email, hasfocus: emailFocused">
+					data-bind="visible: !owner(), value: email, hasfocus: emailFocused, attr: {required: !owner()}">
 			</div>
 		</div>
 		<div class="control-group">
 			<label data-i18n="GLOBAL/NAME"></label>
-			<input type="text" class="input-xlarge"
+			<input name="Name" type="text" class="input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off"
 				data-bind="value: name">
 		</div>
-		<div class="control-group" data-bind="visible: showReplyTo, css: {'error': replyToHasError}">
+		<div class="control-group" data-bind="visible: showReplyTo">
 			<label data-i18n="GLOBAL/REPLY_TO"></label>
-			<input type="text" class="inputReplyTo input-xlarge"
+			<input name="ReplyTo" type="email" class="inputReplyTo input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off"
 				data-bind="value: replyTo, hasfocus: replyToFocused">
 		</div>
-		<div class="control-group" data-bind="visible: showBcc, css: {'error': bccHasError}">
+		<div class="control-group" data-bind="visible: showBcc">
 			<label data-i18n="GLOBAL/BCC"></label>
-			<input type="text" class="inputBcc input-xlarge"
+			<input name="Bcc" type="email" class="inputBcc input-xlarge"
 				autocomplete="off" autocorrect="off" autocapitalize="off"
 				data-bind="value: bcc, hasfocus: bccFocused">
 		</div>