diff --git a/assets/js/sections/themes.js b/assets/js/sections/themes.js
index 4a90f1688..ed2366993 100644
--- a/assets/js/sections/themes.js
+++ b/assets/js/sections/themes.js
@@ -1,105 +1,226 @@
function deleteTheme(id, name) {
- BootstrapDialog.confirm({
- title: 'DANGER',
- message: 'Warning! Are you sure you want to delete the following theme: ' + name + '?' ,
- type: BootstrapDialog.TYPE_DANGER,
- closable: true,
- draggable: true,
- btnOKClass: 'btn-danger',
- callback: function(result) {
- if(result) {
- $.ajax({
- url: base_url + 'index.php/themes/delete',
- type: 'post',
- data: {'id': id
- },
- success: function(data) {
- $(".theme_" + id).parent("tr:first").remove(); // removes mode from table
- }
- });
- }
- }
- });
+ BootstrapDialog.confirm({
+ title: "DANGER",
+ message:
+ "Warning! Are you sure you want to delete the following theme: " + name + "?",
+ type: BootstrapDialog.TYPE_DANGER,
+ closable: true,
+ draggable: true,
+ btnOKClass: "btn-danger",
+ callback: function (result) {
+ if (result) {
+ $.ajax({
+ url: base_url + "index.php/themes/delete",
+ type: "post",
+ data: { id: id },
+ success: function (data) {
+ $(".theme_" + id)
+ .parent("tr:first")
+ .remove(); // removes mode from table
+ },
+ });
+ }
+ },
+ });
}
function addThemeDialog() {
- $.ajax({
- url: base_url + 'index.php/themes/add',
- type: 'post',
- success: function(html) {
- BootstrapDialog.show({
- title: 'Create Theme',
- size: BootstrapDialog.SIZE_NORMAL,
- cssClass: 'create-theme-dialog',
- nl2br: false,
- message: html,
- buttons: [{
- label: lang_admin_close,
- action: function (dialogItself) {
- dialogItself.close();
- }
- }]
- });
- }
- });
+ $.ajax({
+ url: base_url + "index.php/themes/add",
+ type: "post",
+ success: function (html) {
+ BootstrapDialog.show({
+ title: "Create Theme",
+ size: BootstrapDialog.SIZE_NORMAL,
+ cssClass: "create-theme-dialog",
+ nl2br: false,
+ message: html,
+ buttons: [
+ {
+ label: lang_admin_close,
+ action: function (dialogItself) {
+ dialogItself.close();
+ },
+ },
+ ],
+ });
+ },
+ });
}
function addTheme(form) {
- if (form.name.value != '') {
- $.ajax({
- url: base_url + 'index.php/themes/add',
- type: 'post',
- data: {
- 'name': form.name.value,
- 'foldername': form.foldername.value,
- 'theme_mode': form.theme_mode.value,
- 'header_logo': form.header_logo.value,
- 'main_logo': form.main_logo.value,
- },
- success: function(html) {
- location.reload();
- }
- });
+ if (formValidation()) {
+ if (form.name.value != "") {
+ $.ajax({
+ url: base_url + "index.php/themes/add",
+ type: "post",
+ data: {
+ name: form.name.value,
+ foldername: form.foldername.value,
+ theme_mode: form.theme_mode.value,
+ header_logo: form.header_logo.value,
+ main_logo: form.main_logo.value,
+ },
+ success: function (html) {
+ location.reload();
+ },
+ });
+ }
}
}
function editThemeDialog(theme_id) {
- $.ajax({
- url: base_url + 'index.php/themes/edit/' + theme_id,
- type: 'post',
- success: function(html) {
- BootstrapDialog.show({
- title: 'Edit Theme',
- size: BootstrapDialog.SIZE_NORMAL,
- cssClass: 'edit-theme-dialog',
- nl2br: false,
- message: html,
- buttons: [{
- label: lang_admin_close,
- action: function (dialogItself) {
- dialogItself.close();
- }
- }]
- });
- }
- });
+ $.ajax({
+ url: base_url + "index.php/themes/edit/" + theme_id,
+ type: "post",
+ success: function (html) {
+ BootstrapDialog.show({
+ title: "Edit Theme",
+ size: BootstrapDialog.SIZE_NORMAL,
+ cssClass: "edit-theme-dialog",
+ nl2br: false,
+ message: html,
+ buttons: [
+ {
+ label: lang_admin_close,
+ action: function (dialogItself) {
+ dialogItself.close();
+ },
+ },
+ ],
+ });
+ },
+ });
}
function editTheme(form, theme_id) {
- if (form.name.value != '') {
- $.ajax({
- url: base_url + 'index.php/themes/edit/' + theme_id,
- type: 'post',
- data: {
- 'name': form.name.value,
- 'foldername': form.foldername.value,
- 'theme_mode': form.theme_mode.value,
- 'header_logo': form.header_logo.value,
- 'main_logo': form.main_logo.value,
- },
- success: function(html) {
- location.reload();
- }
- });
+ if (formValidation()) {
+ if (form.name.value != "") {
+ $.ajax({
+ url: base_url + "index.php/themes/edit/" + theme_id,
+ type: "post",
+ data: {
+ name: form.name.value,
+ foldername: form.foldername.value,
+ theme_mode: form.theme_mode.value,
+ header_logo: form.header_logo.value,
+ main_logo: form.main_logo.value,
+ },
+ success: function (html) {
+ location.reload();
+ },
+ });
+ }
}
-}
\ No newline at end of file
+}
+
+function printWarning(input, warning) {
+ $('#warningMessageTheme').show();
+ $(input).css('border', '2px solid rgb(217, 83, 79)');
+ $('#warningMessageTheme').text(warning);
+}
+
+function removeWarning(input) {
+ $(input).css('border', '');
+ $('#warningMessageTheme').hide();
+}
+
+function formValidation() {
+ let name = $("#nameInput");
+ let foldername = $("#foldernameInput");
+ let theme_mode = $("#themeModeInput");
+ let header_logo = $("#headerLogoInput");
+ let main_logo = $("#mainLogoInput");
+
+ var unwantedCharacters = ['@', '.', '/', '\\', '$'];
+
+ // name
+ if (name.val() == "") {
+ printWarning(name, "Please enter a name for the theme.");
+ name.focus();
+ $(name).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(name);
+
+ if (unwantedCharacters.some(char => name.val().includes(char))) {
+ printWarning(name, "The name contains unwanted characters. Only '()_-' are allowed.");
+ name.focus();
+ $(name).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(name);
+
+
+ // foldername
+ if (foldername.val() == "") {
+ printWarning(foldername, "Please enter the name of the folder for that theme placed under assets/css.");
+ foldername.focus();
+ $(foldername).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(foldername);
+
+ if (unwantedCharacters.some(char => foldername.val().includes(char))) {
+ printWarning(foldername, "The foldername contains unwanted characters. Only '_' and '-' are allowed.");
+ foldername.focus();
+ $(foldername).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(foldername);
+
+
+ // theme_mode
+ if (theme_mode.val() == "") {
+ printWarning(theme_mode, "Please select the theme_mode.");
+ theme_mode.focus();
+ $(theme_mode).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(theme_mode);
+
+
+ // header_logo
+ if (header_logo.val() == "") {
+ printWarning(header_logo, "Please enter the filename of the header_logo for that theme placed under assets/logo without the file extension '.png'");
+ header_logo.focus();
+ $(header_logo).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(header_logo);
+
+ if (unwantedCharacters.some(char => header_logo.val().includes(char))) {
+ printWarning(header_logo, "The header_logo contains unwanted characters. Only '_' and '-' are allowed. Only PNG files are allowed. Remove the file extension '.png'");
+ header_logo.focus();
+ $(header_logo).css('border-color', 'red');
+ return false;
+ }
+ removeWarning(header_logo);
+
+
+ // main_logo
+ if (main_logo.val() == "") {
+ printWarning(main_logo, "Please enter the filename of the main_logo for that theme placed under assets/logo without the file extension '.png'");
+ main_logo.focus();
+ $(main_logo).css('border-color', 'red');
+ return false;
+ } else {
+ removeWarning(main_logo);
+ }
+ if (unwantedCharacters.some(char => main_logo.val().includes(char))) {
+ printWarning(main_logo, "The main_logo contains unwanted characters. Only '_' and '-' are allowed. Only PNG files are allowed. Remove the file extension '.png'");
+ main_logo.focus();
+ $(main_logo).css('border-color', 'red');
+ return false;
+ } else {
+ removeWarning(main_logo);
+ }
+
+ return true;
+}
+
+$(document).ready(function() {
+ $("#submitButton").click(function() { // Validate the form when the submit button is clicked
+ formValidation();
+ });
+});