#418 #477 Refactor Todo settings, add predefined Todo apps list

* add condition if on todo options

* add drop down for  todo server

* fix error TODOS_FRONTEND

* add todo list apps'

* update name of dropdown menu to Todo Service

* add other service to dropdown menu and subsetting field for user to input url

* add Other Service to drop down

* fixed typos

* reverted wording

* fix custom field

* fix linting

* fix linting

* Delete tsconfig.tsbuildinfo

* Delete tsconfig.tsbuildinfo

* Delete tsconfig.tsbuildinfo

* Add regex to validate custom todo url

* Add note with source of regex function

* Move regex function declaration to function body root

* Apply code style

* Add migration for todo settings

* Apply code style

Co-authored-by: romain <romain@jumboprivacy.com>
Co-authored-by: Roman <46404814+yourcontact@users.noreply.github.com>
Co-authored-by: romain <rpsa@pm.me>

10 files changed, 155 insertions, 45 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 5478ce8bf..f76378a3e 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -156,6 +156,7 @@ export default @observer class EditSettingsForm extends Component {
     cacheSize: PropTypes.string.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
+    isTodosActivated: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
     noUpdates: PropTypes.bool.isRequired,
     hibernationEnabled: PropTypes.bool.isRequired,
@@ -201,6 +202,7 @@ export default @observer class EditSettingsForm extends Component {
       isDarkmodeEnabled,
       isTrayEnabled,
       openProcessManager,
+      isTodosActivated,
     } = this.props;
     const { intl } = this.context;
 
@@ -275,22 +277,32 @@ export default @observer class EditSettingsForm extends Component {
             {isTodosEnabled && (
               <>
                 <Toggle field={form.$('enableTodos')} />
-                <Input
-                  placeholder="Todo Server"
-                  onChange={e => this.submit(e)}
-                  field={form.$('todoServer')}
-                />
-                <p
-                  className="settings__message"
-                  style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-                  }}
-                >
-                  { intl.formatMessage(messages.todoServerInfo) }
-                </p>
+                {isTodosActivated && (
+                  <div>
+                    <Select field={form.$('predefinedTodoServer')} />
+                    {form.$('predefinedTodoServer').value === 'isUsingCustomTodoService' && (
+                      <div>
+                        <Input
+                          placeholder="Todo Server"
+                          onChange={e => this.submit(e)}
+                          field={form.$('customTodoServer')}
+                        />
+                        <p
+                          className="settings__message"
+                          style={{
+                            borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                          }}
+                        >
+                          { intl.formatMessage(messages.todoServerInfo) }
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
               </>
             )}
 
+
             <Hr />
 
             <Toggle field={form.$('lockingFeatureEnabled')} />
diff --git a/src/config.js b/src/config.js
index af304232e..f617555df 100644
--- a/src/config.js
+++ b/src/config.js
@@ -51,6 +51,18 @@ export const NAVIGATION_BAR_BEHAVIOURS = {
   never: 'Never show navigation bar',
 };
 
+export const TODO_APPS = {
+  'https://todoist.com/app': 'Todoist',
+  'https://app.franztodos.com': 'Franz Todo',
+  'https://ticktick.com/signin': 'TickTick',
+  'https://todo.microsoft.com/?app#': 'Microsoft To Do',
+  'https://habitica.com/login': 'Habitica',
+  'https://app.nozbe.com/#login': 'Nozbe',
+  'https://www.rememberthemilk.com/login/': 'Remember The Milk',
+  'https://desktop.any.do/': 'Any.do',
+  isUsingCustomTodoService: 'Other service',
+};
+
 export const SIDEBAR_WIDTH = {
   35: 'Extemely slim sidebar',
   45: 'Very slim sidebar',
@@ -95,7 +107,7 @@ export const DEFAULT_APP_SETTINGS = {
 
   // Ferdi specific options
   server: LIVE_API,
-  todoServer: PRODUCTION_TODOS_FRONTEND_URL,
+  predefinedTodoServer: 'https://app.franztodos.com',
   autohideMenuBar: false,
   lockingFeatureEnabled: false,
   locked: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index be251aa8b..64303e54f 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -11,7 +11,7 @@ import TodosStore from '../../features/todos/store';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
 import {
-  DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES, SIDEBAR_WIDTH, ICON_SIZES, NAVIGATION_BAR_BEHAVIOURS,
+  DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES, SIDEBAR_WIDTH, ICON_SIZES, NAVIGATION_BAR_BEHAVIOURS, TODO_APPS,
 } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
@@ -20,8 +20,6 @@ import { getSelectOptions } from '../../helpers/i18n-helpers';
 import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
-import { TODOS_FRONTEND } from '../../environment';
-
 import globalMessages from '../../i18n/globalMessages';
 import { DEFAULT_IS_FEATURE_ENABLED_BY_USER } from '../../features/todos';
 import WorkspacesStore from '../../features/workspaces/store';
@@ -76,10 +74,14 @@ const messages = defineMessages({
     id: 'settings.app.form.hibernationStrategy',
     defaultMessage: '!!!Hibernation strategy',
   },
-  todoServer: {
-    id: 'settings.app.form.todoServer',
+  predefinedTodoServer: {
+    id: 'settings.app.form.predefinedTodoServer',
     defaultMessage: '!!!Todo Server',
   },
+  customTodoServer: {
+    id: 'settings.app.form.customTodoServer',
+    defaultMessage: '!!!Custom TodoServer',
+  },
   enableLock: {
     id: 'settings.app.form.enableLock',
     defaultMessage: '!!!Enable Password Lock',
@@ -203,7 +205,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         sentry: settingsData.sentry,
         hibernate: settingsData.hibernate,
         hibernationStrategy: settingsData.hibernationStrategy,
-        todoServer: settingsData.todoServer,
+        predefinedTodoServer: settingsData.predefinedTodoServer,
+        customTodoServer: settingsData.customTodoServer,
         lockingFeatureEnabled: settingsData.lockingFeatureEnabled,
         lockedPassword: settingsData.lockedPassword,
         useTouchIdToUnlock: settingsData.useTouchIdToUnlock,
@@ -275,6 +278,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
       sort: false,
     });
 
+    const todoApp = getSelectOptions({
+      locales: TODO_APPS,
+      sort: false,
+    });
+
     const sidebarWidth = getSelectOptions({
       locales: SIDEBAR_WIDTH,
       sort: false,
@@ -354,10 +362,16 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           options: hibernationStrategies,
           default: DEFAULT_APP_SETTINGS.hibernationStrategy,
         },
-        todoServer: {
-          label: intl.formatMessage(messages.todoServer),
-          value: settings.all.app.todoServer,
-          default: TODOS_FRONTEND,
+        predefinedTodoServer: {
+          label: intl.formatMessage(messages.predefinedTodoServer),
+          value: settings.all.app.predefinedTodoServer,
+          default: DEFAULT_APP_SETTINGS.predefinedTodoServer,
+          options: todoApp,
+        },
+        customTodoServer: {
+          label: intl.formatMessage(messages.customTodoServer),
+          value: settings.all.app.customTodoServer,
+          default: DEFAULT_APP_SETTINGS.customTodoServer,
         },
         lockingFeatureEnabled: {
           label: intl.formatMessage(messages.enableLock),
@@ -537,6 +551,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           isDarkmodeEnabled={this.props.stores.settings.app.darkMode}
           isTrayEnabled={this.props.stores.settings.app.enableSystemTray}
           isAdaptableDarkModeEnabled={this.props.stores.settings.app.adaptableDarkMode}
+          isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser}
+          isUsingCustomTodoService={this.props.stores.todos.isUsingCustomTodoService}
           openProcessManager={() => this.openProcessManager()}
         />
       </ErrorBoundary>
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index e9b1963f7..2626186e9 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -9,10 +9,20 @@ import { defineMessages, intlShape } from 'react-intl';
 import { mdiCheckAll } from '@mdi/js';
 import SettingsStore from '../../../stores/SettingsStore';
 
-import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
 import UpgradeButton from '../../../components/ui/UpgradeButton';
 
+// NOTE: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+function validURL(str) {
+  const pattern = new RegExp('^(https?:\\/\\/)?' // protocol
+      + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
+      + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
+      + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
+      + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+      + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+  return !!pattern.test(str);
+}
+
 const messages = defineMessages({
   premiumInfo: {
     id: 'feature.todos.premium.info',
@@ -194,6 +204,16 @@ class TodosWebview extends Component {
 
     const { intl } = this.context;
 
+    const isUsingPredefinedTodoServer = stores.settings.all.app.predefinedTodoServer !== 'isUsingCustomTodoService';
+    const todoUrl = isUsingPredefinedTodoServer
+      ? stores.settings.all.app.predefinedTodoServer
+      : stores.settings.all.app.customTodoServer;
+    let isTodoUrlValid = true;
+    if (isUsingPredefinedTodoServer === false) {
+      isTodoUrlValid = validURL(todoUrl);
+    }
+
+
     return (
       <div
         className={classes.root}
@@ -213,6 +233,8 @@ class TodosWebview extends Component {
           />
         )}
         {isTodosIncludedInCurrentPlan ? (
+          isTodoUrlValid
+          && (
           <Webview
             className={classes.webview}
             onDidAttach={() => {
@@ -223,8 +245,9 @@ class TodosWebview extends Component {
             partition="persist:todos"
             preload="./features/todos/preload.js"
             ref={(webview) => { this.webview = webview ? webview.view : null; }}
-            src={stores.settings.all.app.todoServer || environment.TODOS_FRONTEND}
+            src={todoUrl}
           />
+          )
         ) : (
           <Appear>
             <div className={classes.premiumContainer}>
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index a5c83d7ab..906172221 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -4342,7 +4342,20 @@
           "line": 82
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
-        "id": "settings.app.form.todoServer",
+        "id": "settings.app.form.predefinedTodoServer",
+        "start": {
+          "column": 14,
+          "line": 79
+        }
+      },
+      {
+        "defaultMessage": "!!!Custom Todo Server",
+        "end": {
+          "column": 3,
+          "line": 82
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.customTodoServer",
         "start": {
           "column": 14,
           "line": 79
@@ -5449,39 +5462,39 @@
         "defaultMessage": "!!!Franz Todos are available to premium users now!",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 30
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.info",
         "start": {
           "column": 15,
-          "line": 17
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 34
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.upgrade",
         "start": {
           "column": 14,
-          "line": 21
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Everyone else will have to wait a little longer.",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 38
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.rollout",
         "start": {
           "column": 15,
-          "line": 25
+          "line": 35
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 0762e855f..3306febe1 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -277,6 +277,7 @@
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start",
   "settings.app.form.beta": "Include beta versions",
+  "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable dark mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
   "settings.app.form.enableLock": "Enable Password Lock",
@@ -293,6 +294,7 @@
   "settings.app.form.minimizeToSystemTray": "Minimize Ferdi to system tray",
   "settings.app.form.navigationBarBehaviour": "Navigation bar behaviour",
   "settings.app.form.noUpdates": "Disable updates",
+  "settings.app.form.predefinedTodoServer": "Todo Server",
   "settings.app.form.privateNotifications": "Don't show message content in notifications",
   "settings.app.form.reloadAfterResume": "Reload Ferdi after system resume",
   "settings.app.form.runInBackground": "Keep Ferdi in background when closing the window",
@@ -304,7 +306,6 @@
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
   "settings.app.form.startMinimized": "Start minimized in tray",
-  "settings.app.form.todoServer": "Todo Server",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
   "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
   "settings.app.headline": "Settings",
@@ -324,7 +325,7 @@
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
   "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data! Changing this option requires you to restart Ferdi.",
   "settings.app.subheadlineCache": "Cache",
-  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature. (default: https://app.franztodos.com)",
+  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
   "settings.app.translationHelp": "Help us to translate Ferdi into your language.",
   "settings.app.universalDarkModeInfo": "Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.",
   "settings.app.updateStatusAvailable": "Update available, downloading...",
@@ -510,4 +511,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/locales/whitelist_en-US.json b/src/i18n/locales/whitelist_en-US.json
index fe51488c7..32960f8ce 100644
--- a/src/i18n/locales/whitelist_en-US.json
+++ b/src/i18n/locales/whitelist_en-US.json
@@ -1 +1,2 @@
-[]
+[
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 6777a0d83..4293c93b4 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -156,7 +156,7 @@
     }
   },
   {
-    "id": "settings.app.form.todoServer",
+    "id": "settings.app.form.predefinedTodoServer",
     "defaultMessage": "!!!Todo Server",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
@@ -169,6 +169,19 @@
     }
   },
   {
+    "id": "settings.app.form.customTodoServer",
+    "defaultMessage": "!!!Custom Todo Server",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 79,
+      "column": 14
+    },
+    "end": {
+      "line": 82,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.form.enableLock",
     "defaultMessage": "!!!Enable Password Lock",
     "file": "src/containers/settings/EditSettingsScreen.js",
@@ -454,4 +467,4 @@
       "column": 3
     }
   }
-]
\ No newline at end of file
+]
diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
index 19ea81171..173389570 100644
--- a/src/i18n/messages/src/features/todos/components/TodosWebview.json
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz Todos are available to premium users now!",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 17,
+      "line": 27,
       "column": 15
     },
     "end": {
-      "line": 20,
+      "line": 30,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Upgrade Account",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 21,
+      "line": 31,
       "column": 14
     },
     "end": {
-      "line": 24,
+      "line": 34,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Everyone else will have to wait a little longer.",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 25,
+      "line": 35,
       "column": 15
     },
     "end": {
-      "line": 28,
+      "line": 38,
       "column": 3
     }
   }
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 71d4e1702..f83bc21ad 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -263,5 +263,24 @@ export default class SettingsStore extends Store {
         },
       });
     }
+
+    if (!this.all.migration['5.4.4-beta.4-settings']) {
+      this.actions.settings.update({
+        type: 'app',
+        data: {
+          todoServer: 'isUsingCustomTodoService',
+          customTodoServer: legacySettings.todoServer,
+        },
+      });
+
+      this.actions.settings.update({
+        type: 'migration',
+        data: {
+          '5.4.4-beta.4-settings': true,
+        },
+      });
+
+      debug('Migrated old todo setting to new custom todo setting');
+    }
   }
 }