8 files changed, 119 insertions, 17 deletions

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index e423e408b..1106113f0 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -318,7 +318,7 @@ class Sidebar extends Component<IProps, IState> {
             <Icon icon={mdiCheckAll} size={1.5} />
           </button>
         ) : null}
-        {stores!.settings.all.app.lockingFeatureEnabled ? (
+        {stores!.settings.all.app.isLockingFeatureEnabled ? (
           <button
             type="button"
             className="sidebar__button"
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index ffa684458..eab019084 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -7,7 +7,11 @@ import { H1, H2 } from '../../ui/headline';
 import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/infobox/index';
-import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
+import {
+  DEFAULT_LOADER_COLOR,
+  LOCAL_SERVER,
+  LIVE_FRANZ_API,
+} from '../../../config';
 import User from '../../../models/User';
 
 const messages = defineMessages({
@@ -123,7 +127,7 @@ class AccountDashboard extends Component<IProp> {
           )}
           {!isUsingWithoutAccount && (
             <>
-              {isLoading && <Loader color="#FFFFFF" />}
+              {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />}
 
               {!isLoading && userInfoRequestFailed && (
                 <Infobox
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 1672a1411..81cfe8b12 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -15,6 +15,7 @@ import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
 import {
   ferdiumVersion,
+  userDataCertsPath,
   userDataPath,
   userDataRecipesPath,
 } from '../../../environment-remote';
@@ -238,6 +239,10 @@ const messages = defineMessages({
     id: 'settings.app.updateStatusUpToDate',
     defaultMessage: 'You are using the latest version of Ferdium',
   },
+  servicesUpdateStatusUpToDate: {
+    id: 'settings.app.servicesUpdateStatusUpToDate',
+    defaultMessage: 'Your services are up-to-date',
+  },
   currentVersion: {
     id: 'settings.app.currentVersion',
     defaultMessage: 'Current version:',
@@ -258,6 +263,20 @@ const messages = defineMessages({
     id: 'settings.app.form.splitColumns',
     defaultMessage: 'Number of columns',
   },
+  warningSelfSignedCertificates: {
+    id: 'settings.app.warningSelfSignedCertificates',
+    defaultMessage:
+      'WARNING: Only enable this feature if you know what you are doing. Enabling this is a security risk and should only be used for testing purposes.',
+  },
+  infoOpenCertificatesFolder: {
+    id: 'settings.app.infoOpenCertificatesFolder',
+    defaultMessage:
+      'To install a certificate, click the button below to open the certificates folder and copy it into the folder. After that you can refresh the service (CTRL/CMD + R). To remove/uninstall, simply delete the certificate file and restart Ferdium.',
+  },
+  buttonOpenFerdiumCertsFolder: {
+    id: 'settings.app.buttonOpenFerdiumCertsFolder',
+    defaultMessage: 'Open certificates folder',
+  },
 });
 
 const Hr = (): ReactElement => (
@@ -284,10 +303,12 @@ interface IProps extends WrappedComponentProps {
   isClearingAllCache: boolean;
   isTodosActivated: boolean;
   automaticUpdates: boolean;
+  isTwoFactorAutoCatcherEnabled: boolean;
+  twoFactorAutoCatcherMatcher: string;
   isDarkmodeEnabled: boolean;
   isAdaptableDarkModeEnabled: boolean;
   isUseGrayscaleServicesEnabled: boolean;
-  lockingFeatureEnabled: boolean;
+  isLockingFeatureEnabled: boolean;
   isSplitModeEnabled: boolean;
   isOnline: boolean;
   showServicesUpdatedInfoBar: boolean;
@@ -335,7 +356,8 @@ class EditSettingsForm extends Component<IProps, IState> {
     this.props.form.submit({
       onSuccess: (form: Form) => {
         const values = form.values();
-        const { accentColor } = values;
+        const { accentColor, isTwoFactorAutoCatcherEnabled } = values;
+
         if (accentColor.trim().length === 0) {
           values.accentColor = DEFAULT_ACCENT_COLOR;
         }
@@ -343,6 +365,15 @@ class EditSettingsForm extends Component<IProps, IState> {
         if (progressbarAccentColor.trim().length === 0) {
           values.progressbarAccentColor = DEFAULT_ACCENT_COLOR;
         }
+
+        // set twoFactorAutoCatcherMatcher to the default value, if its get enabled the input is prefilled
+        if (
+          !isTwoFactorAutoCatcherEnabled &&
+          values.twoFactorAutoCatcherMatcher.length === 0
+        ) {
+          values.twoFactorAutoCatcherMatcher =
+            DEFAULT_APP_SETTINGS.twoFactorAutoCatcherMatcher;
+        }
         this.props.onSubmit(values);
       },
       onError: noop,
@@ -367,6 +398,7 @@ class EditSettingsForm extends Component<IProps, IState> {
       onClearAllCache,
       getCacheSize,
       automaticUpdates,
+      isTwoFactorAutoCatcherEnabled,
       isDarkmodeEnabled,
       isSplitModeEnabled,
       openProcessManager,
@@ -383,8 +415,12 @@ class EditSettingsForm extends Component<IProps, IState> {
       updateButtonLabelMessage = messages.updateStatusAvailable;
     }
 
-    const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } =
-      window['ferdium'].stores.settings.all.app;
+    const {
+      isLockingFeatureEnabled,
+      scheduledDNDEnabled,
+      reloadAfterResume,
+      useSelfSignedCertificates,
+    } = window['ferdium'].stores.settings.all.app;
 
     let cacheSize;
     let notCleared;
@@ -407,6 +443,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
     const profileFolder = userDataPath();
     const recipeFolder = userDataRecipesPath();
+    const certsFolder = userDataCertsPath();
 
     return (
       <div className="settings__main">
@@ -813,6 +850,15 @@ class EditSettingsForm extends Component<IProps, IState> {
                   <Toggle {...form.$('notifyTaskBarOnMessage').bind()} />
                 )}
 
+                <Toggle {...form.$('isTwoFactorAutoCatcherEnabled').bind()} />
+
+                {isTwoFactorAutoCatcherEnabled && (
+                  <Input
+                    onChange={e => this.submit(e)}
+                    {...form.$('twoFactorAutoCatcherMatcher').bind()}
+                  />
+                )}
+
                 <Hr />
 
                 <Select field={form.$('webRTCIPHandlingPolicy')} />
@@ -836,8 +882,8 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle {...form.$('lockingFeatureEnabled').bind()} />
-                {lockingFeatureEnabled && (
+                <Toggle {...form.$('isLockingFeatureEnabled').bind()} />
+                {isLockingFeatureEnabled && (
                   <>
                     {isMac && systemPreferences.canPromptTouchID() && (
                       <Toggle {...form.$('useTouchIdToUnlock').bind()} />
@@ -943,6 +989,43 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
 
+                <Toggle {...form.$('useSelfSignedCertificates').bind()} />
+
+                {useSelfSignedCertificates && (
+                  <div className="settings__settings-group">
+                    <p
+                      style={{
+                        padding: '0rem 0rem 1rem 0rem',
+                        textAlign: 'justify',
+                        fontSize: '1.1rem',
+                      }}
+                    >
+                      {intl.formatMessage(messages.infoOpenCertificatesFolder)}
+                    </p>
+                    <div className="settings__open-settings-cache-container">
+                      <Button
+                        buttonType="secondary"
+                        label={intl.formatMessage(
+                          messages.buttonOpenFerdiumCertsFolder,
+                        )}
+                        className="settings__open-settings-file-button"
+                        onClick={() => openPath(certsFolder)}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <p
+                  className="settings__help"
+                  style={{
+                    padding: useSelfSignedCertificates
+                      ? '1rem 0rem 0rem 0rem'
+                      : undefined,
+                  }}
+                >
+                  {intl.formatMessage(messages.warningSelfSignedCertificates)}
+                </p>
+
                 <Hr />
 
                 <Input
@@ -1117,7 +1200,10 @@ class EditSettingsForm extends Component<IProps, IState> {
                     ) : (
                       <p>
                         <Icon icon={mdiPowerPlug} />
-                        &nbsp;Your services are up-to-date.
+                        &nbsp;
+                        {intl.formatMessage(
+                          messages.servicesUpdateStatusUpToDate,
+                        )}
                       </p>
                     )}
                   </>
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 406656160..96613373e 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -10,7 +10,7 @@ import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { H1 } from '../../ui/headline';
-import { LIVE_FRANZ_API } from '../../../config';
+import { DEFAULT_LOADER_COLOR, LIVE_FRANZ_API } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -128,7 +128,7 @@ class TeamDashboard extends Component<IProps> {
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && <Loader color="#FFFFFF" />}
+          {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />}
 
           {!isLoading && userInfoRequestFailed && (
             <Infobox
diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx
index ae37546df..f3f1adbe7 100644
--- a/src/components/ui/InfoBar.tsx
+++ b/src/components/ui/InfoBar.tsx
@@ -8,6 +8,7 @@ import { noop } from 'lodash';
 import Loader from './loader/index';
 import Appear from './effects/Appear';
 import Icon from './icon';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 
 const messages = defineMessages({
   hide: {
@@ -71,7 +72,11 @@ class InfoBar extends Component<IProps> {
                 className="contentWrapper"
                 style={{ display: 'flex', gap: '8px' }}
               >
-                <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" />
+                <Loader
+                  size={18}
+                  loaded={!ctaLoading}
+                  color={DEFAULT_LOADER_COLOR}
+                />
                 {ctaLabel}
               </div>
             </button>
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 742717ed7..14e1a581c 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -6,6 +6,7 @@ import { noop } from 'lodash';
 import { observer } from 'mobx-react';
 import Loader from './loader/index';
 import Icon from './icon';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 
 const icons = {
   'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline,
@@ -84,7 +85,11 @@ class Infobox extends Component<IProps, IState> {
               className="contentWrapper"
               style={{ display: 'flex', gap: '8px' }}
             >
-              <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" />
+              <Loader
+                size={18}
+                loaded={!ctaLoading}
+                color={DEFAULT_LOADER_COLOR}
+              />
               {ctaLabel}
             </div>
           </button>
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index a2194e34d..3247072a9 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -8,6 +8,7 @@ import withStyles, { WithStylesProps } from 'react-jss';
 import Loader from '../loader/index';
 import { Theme } from '../../../themes';
 import { IFormField } from '../typings/generic';
+import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 type ButtonType =
   | 'primary'
@@ -194,7 +195,7 @@ class ButtonComponent extends Component<IProps, IState> {
       <>
         {showLoader && (
           <div className={classes.loaderContainer}>
-            <Loader size={18} color="#FFFFFF" />
+            <Loader size={18} color={DEFAULT_LOADER_COLOR} />
           </div>
         )}
         <div className={classes.label}>
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 2cee00d96..c0ae15028 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -4,6 +4,7 @@ import injectStyle, { WithStylesProps } from 'react-jss';
 import { Oval } from 'react-loader-spinner';
 import { inject } from 'mobx-react';
 import { FerdiumStores } from '../../../@types/stores.types';
+import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 const styles = () => ({
   container: {
@@ -29,11 +30,11 @@ class LoaderComponent extends Component<IProps> {
     const {
       classes,
       className,
-      size = 36,
+      size = 100,
       color = this.props.stores?.settings.app.accentColor,
       loaded = false,
     } = this.props;
-    const loaderColor = color || '#FFFFFF';
+    const loaderColor = color ?? DEFAULT_LOADER_COLOR;
 
     return (
       <div