Rework form system messages display

engine/actions/actions.go

@@ -24,19 +24,16 @@ func (this *Action) write(data string) {
 	(*this.wrapper.W).Write([]byte(data))
 }
 
-func (this *Action) msg_show(title string, msg string) {
+func (this *Action) msg_success(msg string) {
 	this.write(fmt.Sprintf(
-		`ModalShowMsg('%s', '%s');`,
-		strings.Replace(strings.Replace(title, `'`, `’`, -1), `"`, `”`, -1),
+		`ShowSystemMsgSuccess('Success!', '%s', false);`,
 		strings.Replace(strings.Replace(msg, `'`, `’`, -1), `"`, `”`, -1)))
 }
 
-func (this *Action) msg_success(msg string) {
-	this.msg_show("Success", msg)
-}
-
 func (this *Action) msg_error(msg string) {
-	this.msg_show("Error", msg)
+	this.write(fmt.Sprintf(
+		`ShowSystemMsgError('Error!', '%s', true);`,
+		strings.Replace(strings.Replace(msg, `'`, `’`, -1), `"`, `”`, -1)))
 }
 
 func (this *Action) use_database() error {

engine/wrapper/resources/scripts/assets.cp.scripts.js

@@ -1,13 +1,20 @@
-function ModalSysMsg(title, html) {
-	var dialog = $('#sys-modal-msg');
-	$('#sysModalMsgLabel').text(title);
-	$('#sysModalMsgBody').html(html);
-	return dialog;
+function GetModalAlertTmpl(title, message, error) {
+	return '<div class="alert alert-' + (!error?'success':'danger') + ' alert-dismissible fade show" role="alert"><strong>' + title + '</strong> ' + message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
 }
 
-function ModalShowMsg(title, message) {
-	var dialog = ModalSysMsg(title, message);
-	dialog.modal('show');
+function ShowSystemMsg(title, message, error) {
+	var modal_alert_place = $('.modal.show .sys-messages');
+	if(modal_alert_place.length) {
+		modal_alert_place.html(GetModalAlertTmpl(title, message, error));
+	}
+}
+
+function ShowSystemMsgSuccess(title, message) {
+	ShowSystemMsg(title, message, false);
+}
+
+function ShowSystemMsgError(title, message) {
+	ShowSystemMsg(title, message, true);
 }
 
 function AjaxDone(data) {
@@ -50,14 +57,18 @@ $(document).ready(function() {
 	$('form').each(function() {
 		$(this).submit(function(e) {
 			var form = $(this);
-			if($(form).hasClass('loading')) {
+			if(form.hasClass('loading')) {
 				e.preventDefault();
 				return;
 			}
 
-			$(form).addClass('loading');
+			// Block send button
+			form.addClass('loading');
 			var button = $(this).find('button[type=submit]');
-			$(button).addClass('progress-bar-striped').addClass('progress-bar-animated');
+			button.addClass('progress-bar-striped').addClass('progress-bar-animated');
+
+			// Clear form messages
+			form.find('.sys-messages').html('');
 
 			$.ajax({
 				type: "POST",
@@ -68,8 +79,8 @@ $(document).ready(function() {
 			}).fail(function() {
 				AjaxFail();
 			}).always(function() {
-				$(form).removeClass('loading');
-				$(button).removeClass('progress-bar-striped').removeClass('progress-bar-animated');
+				form.removeClass('loading');
+				button.removeClass('progress-bar-striped').removeClass('progress-bar-animated');
 			});
 
 			e.preventDefault();

engine/wrapper/resources/scripts/assets.cp.scripts.js.go

@@ -1,4 +1,4 @@
 package scripts
 
 // https://jscompress.com/
-var File_assets_cp_scripts_js = []byte(`function ModalSysMsg(a,o){var s=$("#sys-modal-msg");return $("#sysModalMsgLabel").text(a),$("#sysModalMsgBody").html(o),s}function ModalShowMsg(a,o){ModalSysMsg(a,o).modal("show")}function AjaxDone(data){try{eval(data)}catch(a){a instanceof SyntaxError&&(console.log(data),ModalShowMsg("JavaScript Eval Error",a.message))}}function AjaxFail(){console.log("Form send fail, page will be reloaded"),window.location.reload(!1)}function ActionUserSettings(){$("form.form-user-settings")[0].reset()}function ActionSingOut(){$.ajax({type:"POST",url:"/cp/",data:{action:"singout"}}).done(function(a){AjaxDone(a)}).fail(function(){AjaxFail()})}$(document).ready(function(){$("form").each(function(){$(this).submit(function(a){var o=$(this);if($(o).hasClass("loading"))a.preventDefault();else{$(o).addClass("loading");var s=$(this).find("button[type=submit]");$(s).addClass("progress-bar-striped").addClass("progress-bar-animated"),$.ajax({type:"POST",url:o.attr("action"),data:o.serialize()}).done(function(a){AjaxDone(a)}).fail(function(){AjaxFail()}).always(function(){$(o).removeClass("loading"),$(s).removeClass("progress-bar-striped").removeClass("progress-bar-animated")}),a.preventDefault()}})})});`)
+var File_assets_cp_scripts_js = []byte(`function GetModalAlertTmpl(a,s,t){return'<div class="alert alert-'+(t?"danger":"success")+' alert-dismissible fade show" role="alert"><strong>'+a+"</strong> "+s+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>'}function ShowSystemMsg(a,s,t){var e=$(".modal.show .sys-messages");e.length&&e.html(GetModalAlertTmpl(a,s,t))}function ShowSystemMsgSuccess(a,s){ShowSystemMsg(a,s,!1)}function ShowSystemMsgError(a,s){ShowSystemMsg(a,s,!0)}function AjaxDone(data){try{eval(data)}catch(a){a instanceof SyntaxError&&(console.log(data),ModalShowMsg("JavaScript Eval Error",a.message))}}function AjaxFail(){console.log("Form send fail, page will be reloaded"),window.location.reload(!1)}function ActionUserSettings(){$("form.form-user-settings")[0].reset()}function ActionSingOut(){$.ajax({type:"POST",url:"/cp/",data:{action:"singout"}}).done(function(a){AjaxDone(a)}).fail(function(){AjaxFail()})}$(document).ready(function(){$("form").each(function(){$(this).submit(function(a){var s=$(this);if(s.hasClass("loading"))a.preventDefault();else{s.addClass("loading");var t=$(this).find("button[type=submit]");t.addClass("progress-bar-striped").addClass("progress-bar-animated"),s.find(".sys-messages").html(""),$.ajax({type:"POST",url:s.attr("action"),data:s.serialize()}).done(function(a){AjaxDone(a)}).fail(function(){AjaxFail()}).always(function(){s.removeClass("loading"),t.removeClass("progress-bar-striped").removeClass("progress-bar-animated")}),a.preventDefault()}})})});`)

engine/wrapper/resources/templates/cp.base.html

@@ -39,6 +39,7 @@
 								<label for="password">User new password</label>
 								<input type="password" class="form-control" id="password" name="password" value="{{$.Data.UserPassword}}" placeholder="User new password" autocomplete="off">
 							</div>
+							<div class="sys-messages"></div>
 						</div>
 						<div class="modal-footer">
 							<button type="submit" class="btn btn-primary">Save changes</button>