From 8520310e6e3e97a554c737952d9649d0be53e2b4 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 28 Feb 2020 11:42:16 -0700
Subject: [PATCH] Proof of concept for custom theme adding

For https://github.com/vector-im/riot-web/issues/12517
---
 .../tabs/user/GeneralUserSettingsTab.js       | 52 +++++++++++++++++++
 src/i18n/strings/en_EN.json                   |  5 ++
 src/settings/Settings.js                      |  6 +++
 3 files changed, 63 insertions(+)

diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 304bb6449f..7af9aae146 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -61,6 +61,8 @@ export default class GeneralUserSettingsTab extends React.Component {
             emails: [],
             msisdns: [],
             ...this._calculateThemeState(),
+            customThemeUrl: "",
+            customThemeError: "",
         };
 
         this.dispatcherRef = dis.register(this._onAction);
@@ -274,6 +276,33 @@ export default class GeneralUserSettingsTab extends React.Component {
         });
     };
 
+    _onAddCustomTheme = async () => {
+        let currentThemes = SettingsStore.getValue("custom_themes");
+        if (!currentThemes) currentThemes = [];
+        currentThemes = currentThemes.map(c => c); // cheap clone
+
+        try {
+            const r = await fetch(this.state.customThemeUrl);
+            const themeInfo = await r.json();
+            if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
+                console.log(themeInfo);
+                this.setState({customThemeError: _t("Invalid theme schema.")});
+                return;
+            }
+            currentThemes.push(themeInfo);
+        } catch (e) {
+            console.error(e);
+            this.setState({customThemeError: _t("Error downloading theme information.")});
+        }
+
+        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
+        this.setState({customThemeUrl: "", customThemeError: ""});
+    };
+
+    _onCustomThemeChange = (e) => {
+        this.setState({customThemeUrl: e.target.value});
+    };
+
     _renderProfileSection() {
         return (
             <div className="mx_SettingsTab_section">
@@ -368,6 +397,28 @@ export default class GeneralUserSettingsTab extends React.Component {
                 />
             </div>;
         }
+
+        let customThemeForm;
+        if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
+            customThemeForm = (
+                <form onSubmit={this._onAddCustomTheme}>
+                    <Field
+                        label={_t("Custom theme URL")}
+                        type='text'
+                        id='mx_GeneralUserSettingsTab_customThemeInput'
+                        autoComplete="off"
+                        onChange={this._onCustomThemeChange}
+                        value={this.state.customThemeUrl}
+                    />
+                    <div className='error'>{this.state.customThemeError}</div>
+                    <AccessibleButton
+                        onClick={this._onAddCustomTheme}
+                        type="submit" kind="primary_sm"
+                    >{_t("Add theme")}</AccessibleButton>
+                </form>
+            );
+        }
+
         return (
             <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
@@ -380,6 +431,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                         return <option key={theme} value={theme}>{text}</option>;
                     })}
                 </Field>
+                {customThemeForm}
                 <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
             </div>
         );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ba48f7cd37..6984e21f06 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -379,6 +379,7 @@
     "Multiple integration managers": "Multiple integration managers",
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
     "Show a presence dot next to DMs in the room list": "Show a presence dot next to DMs in the room list",
+    "Support adding custom themes": "Support adding custom themes",
     "Enable cross-signing to verify per-user instead of per-session (in development)": "Enable cross-signing to verify per-user instead of per-session (in development)",
     "Enable local event indexing and E2EE search (requires restart)": "Enable local event indexing and E2EE search (requires restart)",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
@@ -702,12 +703,16 @@
     "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
     "Success": "Success",
     "Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them": "Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them",
+    "Invalid theme schema.": "Invalid theme schema.",
+    "Error downloading theme information.": "Error downloading theme information.",
     "Profile": "Profile",
     "Email addresses": "Email addresses",
     "Phone numbers": "Phone numbers",
     "Set a new account password...": "Set a new account password...",
     "Account": "Account",
     "Language and region": "Language and region",
+    "Custom theme URL": "Custom theme URL",
+    "Add theme": "Add theme",
     "Theme": "Theme",
     "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.",
     "Account management": "Account management",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index b77fb392e9..ba6df47a04 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -134,6 +134,12 @@ export const SETTINGS = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_custom_themes": {
+        isFeature: true,
+        displayName: _td("Support adding custom themes"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "mjolnirRooms": {
         supportedLevels: ['account'],
         default: [],