Cleanup some html forms

This commit is contained in:
the-djmaze 2022-09-24 01:20:02 +02:00
parent 6752f1cfef
commit fe9ba68f41
6 changed files with 63 additions and 133 deletions

View file

@ -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('');

View file

@ -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),

View file

@ -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();
}
}

View file

@ -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>

View file

@ -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>

View file

@ -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>