From fe9ba68f4138053b0b59282b3eb4fcc1dc588c67 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Sat, 24 Sep 2022 01:20:02 +0200
Subject: [PATCH] Cleanup some html forms

---
 dev/View/Popup/Account.js                     | 47 +++-------
 dev/View/Popup/FolderCreate.js                | 15 ++-
 dev/View/Popup/Identity.js                    | 92 +++++--------------
 .../templates/Views/User/PopupsAccount.html   | 16 ++--
 .../Views/User/PopupsFolderCreate.html        |  4 +-
 .../templates/Views/User/PopupsIdentity.html  | 22 ++---
 6 files changed, 63 insertions(+), 133 deletions(-)

diff --git a/dev/View/Popup/Account.js b/dev/View/Popup/Account.js
index 6117803fa..b797dbef1 100644
--- a/dev/View/Popup/Account.js
+++ b/dev/View/Popup/Account.js
@@ -14,42 +14,28 @@ 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() {
-		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) {
-							this.submitError(getNotification(iError));
-							this.submitErrorAdditional(data?.ErrorMessageAdditional);
-						} else {
-							rl.app.accountsAndIdentities();
-							this.close();
-						}
-					}, {
-						Email: email,
-						Password: pass,
-						New: this.isNew() ? 1 : 0
+	submitForm(form) {
+		if (!this.submitRequest() && form.reportValidity()) {
+			const data = new FormData(form);
+			data.set('New', this.isNew() ? 1 : 0);
+			this.submitRequest(true);
+			Remote.request('AccountSetup', (iError, data) => {
+					this.submitRequest(false);
+					if (iError) {
+						this.submitError(getNotification(iError));
+						this.submitErrorAdditional(data?.ErrorMessageAdditional);
+					} else {
+						rl.app.accountsAndIdentities();
+						this.close();
 					}
-				);
-			}
+				}, data
+			);
 		}
 	}
 
@@ -63,9 +49,6 @@ export class AccountPopupView extends AbstractViewPopup {
 		}
 		this.password('');
 
-		this.emailError(false);
-		this.passwordError(false);
-
 		this.submitRequest(false);
 		this.submitError('');
 		this.submitErrorAdditional('');
diff --git a/dev/View/Popup/FolderCreate.js b/dev/View/Popup/FolderCreate.js
index a7da49fbd..8b80c1e54 100644
--- a/dev/View/Popup/FolderCreate.js
+++ b/dev/View/Popup/FolderCreate.js
@@ -43,18 +43,17 @@ export class FolderCreatePopupView extends AbstractViewPopup {
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 	}
 
-	submitForm() {
-		if (/^[^\\/]+$/g.test(this.folderName())) {
+	submitForm(form) {
+		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, {
-					Folder: this.folderName(),
-					Parent: parentFolderName,
-					Subscribe: this.folderSubscribe() ? 1 : 0
-				})
+			Remote.abort('Folders').post('FolderCreate', FolderUserStore.foldersCreating, data)
 				.then(
 					data => {
 						const folder = getFolderFromCacheList(parentFolderName),
diff --git a/dev/View/Popup/Identity.js b/dev/View/Popup/Identity.js
index 2972f7ad8..a7a7c2da4 100644
--- a/dev/View/Popup/Identity.js
+++ b/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() {
-		if (!this.submitRequest()) {
+	submitForm(form) {
+		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();
 					}
-				}, {
-					Id: this.id,
-					Email: this.email(),
-					Name: this.name(),
-					ReplyTo: this.replyTo(),
-					Bcc: this.bcc(),
-					Signature: this.signature(),
-					SignatureInsertBefore: this.signatureInsertBefore() ? 1 : 0
-				}
+				}, data
 			);
 		}
 	}
 
-	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();
-	}
 }
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html
index 8b9265a3b..9483b2709 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html
+++ b/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>
-		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></span>
-		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
-	</h3>
+	<h3 data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></h3>
+	<h3 data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></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>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html
index 86121ad9d..1044964b2 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html
+++ b/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>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html
index 63d9ace1e..39f0d5034 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html
+++ b/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>
-		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></span>
-		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
-	</h3>
+	<h3 data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></h3>
+	<h3 data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></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>