Added validation to make sure theme entries are colours (#3107)

* Added validation to make sure theme entries are colours

* Added serverside validation for theme

2 files changed, 10 insertions, 13 deletions

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index e77ea1d30..958f30c7b 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -3,6 +3,7 @@
 
 import $ from 'jquery';
 import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
 import 'bootstrap-colorpicker';
 
 import {Popover, OverlayTrigger} from 'react-bootstrap';
@@ -143,13 +144,17 @@ class CustomThemeChooser extends React.Component {
             return;
         }
 
+        // theme vectors are currently represented as a number of hex color codes followed by the code theme
+
         const colors = text.split(',');
 
         const theme = {type: 'custom'};
         let index = 0;
         Constants.THEME_ELEMENTS.forEach((element) => {
             if (index < colors.length - 1) {
-                theme[element.id] = colors[index];
+                if (Utils.isHexColor(colors[index])) {
+                    theme[element.id] = colors[index];
+                }
             }
             index++;
         });
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 9b0e370bf..7d904387d 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -556,6 +556,10 @@ export function toTitleCase(str) {
     return str.replace(/\w\S*/g, doTitleCase);
 }
 
+export function isHexColor(value) {
+    return value && (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i).test(value);
+}
+
 export function applyTheme(theme) {
     if (theme.sidebarBg) {
         changeCss('.app__body .sidebar--left, .app__body .sidebar--left .sidebar__divider .sidebar__divider__text, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1);
@@ -782,18 +786,6 @@ export function changeCss(className, classValue, classRepeat) {
     classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
 }
 
-export function rgb2hex(rgbIn) {
-    if (/^#[0-9A-F]{6}$/i.test(rgbIn)) {
-        return rgbIn;
-    }
-
-    var rgb = rgbIn.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    function hex(x) {
-        return ('0' + parseInt(x, 10).toString(16)).slice(-2);
-    }
-    return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-}
-
 export function updateCodeTheme(userTheme) {
     let cssPath = '';
     Constants.THEME_ELEMENTS.forEach((element) => {