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

* Added validation to make sure theme entries are colours

* Added serverside validation for theme

model/user.go

@@ -186,6 +186,21 @@ func (u *User) PreUpdate() {
 		}
 		u.NotifyProps["mention_keys"] = strings.Join(goodKeys, ",")
 	}
+
+	if u.ThemeProps != nil {
+		colorPattern := regexp.MustCompile(`^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$`)
+
+		// blank out any invalid theme values
+		for name, value := range u.ThemeProps {
+			if name == "image" || name == "type" || name == "codeTheme" {
+				continue
+			}
+
+			if !colorPattern.MatchString(value) {
+				u.ThemeProps[name] = "#ffffff"
+			}
+		}
+	}
 }
 
 func (u *User) SetDefaultNotifications() {

model/user_test.go

@@ -39,6 +39,19 @@ func TestUserPreSave(t *testing.T) {
 func TestUserPreUpdate(t *testing.T) {
 	user := User{Password: "test"}
 	user.PreUpdate()
+
+	user.ThemeProps = StringMap{
+		"codeTheme":     "github",
+		"awayIndicator": "#cdbd4e",
+		"buttonColor":   "invalid",
+	}
+	user.PreUpdate()
+
+	if user.ThemeProps["codeTheme"] != "github" || user.ThemeProps["awayIndicator"] != "#cdbd4e" {
+		t.Fatal("shouldn't have changed valid theme props")
+	} else if user.ThemeProps["buttonColor"] != "#ffffff" {
+		t.Fatal("should've changed invalid theme prop")
+	}
 }
 
 func TestUserUpdateMentionKeysFromUsername(t *testing.T) {

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++;
         });

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) => {