Handle fontslider input errors correctly

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js

@@ -101,11 +101,33 @@ export default class StyleUserSettingsTab extends React.Component {
     };
 
     _onFontSizeChanged = (size) => {
-        const parsedSize = isNaN(parseInt(size)) ? SettingsStore.getDefaultValue("font_size") : parseFloat(size);
+        this.setState({fontSize: size});
-        this.setState({fontSize: parsedSize});
+        SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, size);
-        SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsedSize);
     };
 
+    _onValidateFontSize = ({value}) => {
+        console.log({value});
+        this.setState({fontSize: value});
+
+        const parsedSize = parseFloat(value);
+        const min = SettingsStore.getValue("font_size_min");
+        const max = SettingsStore.getValue("font_size_max");
+
+        if (isNaN(parsedSize)) {
+            return {valid: false, feedback: _t("Size must be a number")};
+        }
+
+        console.log({min});
+        console.log({max});
+        console.log({parsedSize});
+        if (!(min <= parsedSize && parsedSize <= max)) {
+            return {valid: false, feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max})};
+        }
+
+        SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value);
+        return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
+    }
+
     _onAddCustomTheme = async () => {
         let currentThemes = SettingsStore.getValue("custom_themes");
         if (!currentThemes) currentThemes = [];
@@ -247,10 +269,11 @@ export default class StyleUserSettingsTab extends React.Component {
                 type="text"
                 label={_t("Font size")}
                 autoComplete="off"
-                placeholder={SettingsStore.getValue("font_size", null).toString()}
+                placeholder={this.state.fontSize}
                 value={this.state.fontSize}
                 id="font_size_field"
-                onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
+                onValidate={this._onValidateFontSize}
+                onChange={({value}) => this.setState({fontSize: value})}
                 disabled={!this.state.useCustomFontSize}
             />
         </div>;

src/i18n/strings/en_EN.json

@@ -747,6 +747,9 @@
     "Use an Integration Manager to manage bots, widgets, and sticker packs.": "Use an Integration Manager to manage bots, widgets, and sticker packs.",
     "Manage integrations": "Manage integrations",
     "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.",
+    "Size must be a number": "Size must be a number",
+    "Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
+    "Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
     "Invalid theme schema.": "Invalid theme schema.",
     "Error downloading theme information.": "Error downloading theme information.",
     "Theme added!": "Theme added!",