Merge pull request #561 from meetfranz/developv5.0.0-beta.15

Franz Beta 15

5 files changed, 216 insertions, 39 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 75dbdef49..89fa07800 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -28,6 +28,10 @@ const messages = defineMessages({
     id: 'settings.account.headlineInvoices',
     defaultMessage: '!!Invoices',
   },
+  headlineDangerZone: {
+    id: 'settings.account.headlineDangerZone',
+    defaultMessage: '!!Danger Zone',
+  },
   manageSubscriptionButtonLabel: {
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
@@ -72,6 +76,18 @@ const messages = defineMessages({
     id: 'settings.account.mining.cancel',
     defaultMessage: '!!!Cancel mining',
   },
+  deleteAccount: {
+    id: 'settings.account.deleteAccount',
+    defaultMessage: '!!!Delete account',
+  },
+  deleteInfo: {
+    id: 'settings.account.deleteInfo',
+    defaultMessage: '!!!If you don\'t need your Franz account any longer, you can delete your account and all related data here.',
+  },
+  deleteEmailSent: {
+    id: 'settings.account.deleteEmailSent',
+    defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
+  },
 });
 
 @observer
@@ -90,6 +106,9 @@ export default class AccountDashboard extends Component {
     openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
     stopMiner: PropTypes.func.isRequired,
+    deleteAccount: PropTypes.func.isRequired,
+    isLoadingDeleteAccount: PropTypes.bool.isRequired,
+    isDeleteAccountSuccessful: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -111,6 +130,9 @@ export default class AccountDashboard extends Component {
       retryUserInfoRequest,
       onCloseSubscriptionWindow,
       stopMiner,
+      deleteAccount,
+      isLoadingDeleteAccount,
+      isDeleteAccountSuccessful,
     } = this.props;
     const { intl } = this.context;
 
@@ -201,7 +223,7 @@ export default class AccountDashboard extends Component {
                             />
                           </div>
                         </div>
-                        <div className="account__box account__box--last">
+                        <div className="account__box">
                           <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
                           <table className="invoices">
                             <tbody>
@@ -230,7 +252,7 @@ export default class AccountDashboard extends Component {
 
               {user.isMiner && (
                 <div className="account franz-form">
-                  <div className="account__box">
+                  <div className="account__box account__box--last">
                     <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
                     <div className="account__subscription">
                       <div>
@@ -267,7 +289,7 @@ export default class AccountDashboard extends Component {
                   <Loader />
                 ) : (
                   <div className="account franz-form">
-                    <div className="account__box account__box--last">
+                    <div className="account__box">
                       <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
                       <SubscriptionForm
                         onCloseWindow={onCloseSubscriptionWindow}
@@ -276,8 +298,29 @@ export default class AccountDashboard extends Component {
                   </div>
                 )
               )}
+
+              <div className="account franz-form">
+                <div className="account__box">
+                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  {!isDeleteAccountSuccessful && (
+                    <div className="account__subscription">
+                      <p>{intl.formatMessage(messages.deleteInfo)}</p>
+                      <Button
+                        label={intl.formatMessage(messages.deleteAccount)}
+                        buttonType="danger"
+                        onClick={() => deleteAccount()}
+                        loaded={!isLoadingDeleteAccount}
+                      />
+                    </div>
+                  )}
+                  {isDeleteAccountSuccessful && (
+                    <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                  )}
+                </div>
+              </div>
             </div>
           )}
+
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index b6ade5da4..4610c69a5 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.recipes.headline',
     defaultMessage: '!!!Available Services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   mostPopularRecipes: {
     id: 'settings.recipes.mostPopular',
     defaultMessage: '!!!Most popular',
@@ -81,13 +85,7 @@ export default class RecipesDashboard extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={e => searchRecipes(e)}
-            onReset={() => resetSearch()}
-            throttle
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
@@ -101,7 +99,13 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {/* {!searchNeedle && ( */}
+          <SearchInput
+            placeholder={intl.formatMessage(messages.searchService)}
+            onChange={e => searchRecipes(e)}
+            onReset={() => resetSearch()}
+            autoFocus
+            throttle
+          />
           <div className="recipes__navigation">
             <Link
               to="/settings/recipes"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 36cefe87c..f6f2df2f3 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
+import ImageUpload from '../../ui/ImageUpload';
 
 const messages = defineMessages({
   saveService: {
@@ -47,6 +48,10 @@ const messages = defineMessages({
     id: 'settings.service.form.tabOnPremise',
     defaultMessage: '!!!Self hosted ⭐️',
   },
+  useHostedService: {
+    id: 'settings.service.form.useHostedService',
+    defaultMessage: '!!!Use the hosted {name} service.',
+  },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
     defaultMessage: '!!!Could not validate custom {name} server.',
@@ -67,6 +72,26 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message badges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
+  iconDelete: {
+    id: 'settings.service.form.iconDelete',
+    defaultMessage: '!!!Delete',
+  },
+  iconUpload: {
+    id: 'settings.service.form.iconUpload',
+    defaultMessage: '!!!Drop your image, or click here',
+  },
 });
 
 @observer
@@ -108,9 +133,13 @@ export default class EditServiceForm extends Component {
     this.props.form.submit({
       onSuccess: async (form) => {
         const values = form.values();
-
         let isValid = true;
 
+        const files = form.$('customIcon').files;
+        if (files) {
+          values.iconFile = files[0];
+        }
+
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
@@ -166,6 +195,13 @@ export default class EditServiceForm extends Component {
       />
     );
 
+    let activeTabIndex = 0;
+    if (recipe.hasHostedOption && service.team) {
+      activeTabIndex = 1;
+    } else if (recipe.hasHostedOption && service.customUrl) {
+      activeTabIndex = 2;
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -195,14 +231,25 @@ export default class EditServiceForm extends Component {
         </div>
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
-            <Input field={form.$('name')} focus />
+            <div className="service-name">
+              <Input field={form.$('name')} focus />
+            </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
-                active={service.customUrl ? 1 : 0}
+                active={activeTabIndex}
               >
+                {recipe.hasHostedOption && (
+                  <TabItem title={recipe.name}>
+                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                  </TabItem>
+                )}
                 {recipe.hasTeamId && (
                   <TabItem title={intl.formatMessage(messages.tabHosted)}>
-                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                    <Input
+                      field={form.$('team')}
+                      prefix={recipe.urlInputPrefix}
+                      suffix={recipe.urlInputSuffix}
+                    />
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
@@ -230,21 +277,42 @@ export default class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
-            <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+            <div className="service-flex-grid">
+              <div className="settings__options">
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                  <Toggle field={form.$('isNotificationEnabled')} />
+                  <Toggle field={form.$('isMuted')} />
                   <p className="settings__help">
-                    {intl.formatMessage(messages.indirectMessageInfo)}
+                    {intl.formatMessage(messages.isMutedInfo)}
                   </p>
                 </div>
-              )}
-              <Toggle field={form.$('isMuted')} />
-              <p className="settings__help">
-                {intl.formatMessage(messages.isMutedInfo)}
-              </p>
-              <Toggle field={form.$('isEnabled')} />
+
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                  <Toggle field={form.$('isBadgeEnabled')} />
+                  {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                    <div>
+                      <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                      <p className="settings__help">
+                        {intl.formatMessage(messages.indirectMessageInfo)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                  <Toggle field={form.$('isEnabled')} />
+                </div>
+              </div>
+              <div className="service-icon">
+                <ImageUpload
+                  field={form.$('customIcon')}
+                  textDelete={intl.formatMessage(messages.iconDelete)}
+                  textUpload={intl.formatMessage(messages.iconUpload)}
+                />
+              </div>
             </div>
             {recipe.message && (
               <p className="settings__message">
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 5f146b5f3..20e451f01 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -15,10 +15,18 @@ const messages = defineMessages({
     id: 'settings.services.headline',
     defaultMessage: '!!!Your services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
     defaultMessage: '!!!You haven\'t added any services yet.',
   },
+  noServiceFound: {
+    id: 'settings.recipes.nothingFound',
+    defaultMessage: '!!!Sorry, but no service matched your search term.',
+  },
   discoverServices: {
     id: 'settings.services.discoverServices',
     defaultMessage: '!!!Discover services',
@@ -53,7 +61,13 @@ export default class ServicesDashboard extends Component {
     servicesRequestFailed: PropTypes.bool.isRequired,
     retryServicesRequest: PropTypes.func.isRequired,
     status: MobxPropTypes.arrayOrObservableArray.isRequired,
+    searchNeedle: PropTypes.string,
   };
+
+  static defaultProps = {
+    searchNeedle: '',
+  }
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -69,20 +83,24 @@ export default class ServicesDashboard extends Component {
       servicesRequestFailed,
       retryServicesRequest,
       status,
+      searchNeedle,
     } = this.props;
     const { intl } = this.context;
 
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={needle => filterServices({ needle })}
-            onReset={() => resetFilter()}
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
+          {!isLoading && (
+            <SearchInput
+              placeholder={intl.formatMessage(messages.searchService)}
+              onChange={needle => filterServices({ needle })}
+              onReset={() => resetFilter()}
+              autoFocus
+            />
+          )}
           {!isLoading && servicesRequestFailed && (
             <div>
               <Infobox
@@ -121,7 +139,7 @@ export default class ServicesDashboard extends Component {
             </Appear>
           )}
 
-          {!isLoading && services.length === 0 && (
+          {!isLoading && services.length === 0 && !searchNeedle && (
             <div className="align-middle settings__empty-state">
               <p className="settings__empty-text">
                 <span className="emoji">
@@ -132,6 +150,16 @@ export default class ServicesDashboard extends Component {
               <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
             </div>
           )}
+          {!isLoading && services.length === 0 && searchNeedle && (
+            <div className="align-middle settings__empty-state">
+              <p className="settings__empty-text">
+                <span className="emoji">
+                  <img src="./assets/images/emoji/dontknow.png" alt="" />
+                </span>
+                {intl.formatMessage(messages.noServiceFound)}
+              </p>
+            </div>
+          )}
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ce9b7ab2..72aa5a8af 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,6 +40,18 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Franz into your language.',
   },
+  subheadlineCache: {
+    id: 'settings.app.subheadlineCache',
+    defaultMessage: '!!!Cache',
+  },
+  cacheInfo: {
+    id: 'settings.app.cacheInfo',
+    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+  },
+  buttonClearAllCache: {
+    id: 'settings.app.buttonClearAllCache',
+    defaultMessage: '!!!Clear cache',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -64,10 +76,6 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
-  restartRequired: {
-    id: 'settings.app.restartRequired',
-    defaultMessage: '!!!Changes require restart',
-  },
 });
 
 @observer
@@ -81,6 +89,9 @@ export default class EditSettingsForm extends Component {
     isUpdateAvailable: PropTypes.bool.isRequired,
     noUpdateAvailable: PropTypes.bool.isRequired,
     updateIsReadyToInstall: PropTypes.bool.isRequired,
+    isClearingAllCache: PropTypes.bool.isRequired,
+    onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -107,6 +118,9 @@ export default class EditSettingsForm extends Component {
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
+      isClearingAllCache,
+      onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -142,6 +156,7 @@ export default class EditSettingsForm extends Component {
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
+            <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
@@ -157,8 +172,26 @@ export default class EditSettingsForm extends Component {
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
-            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+            <div className="settings__settings-group">
+              <h3>
+                {intl.formatMessage(messages.subheadlineCache)}
+              </h3>
+              <p>
+                {intl.formatMessage(messages.cacheInfo, {
+                  size: cacheSize,
+                })}
+              </p>
+              <p>
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.buttonClearAllCache)}
+                  onClick={onClearAllCache}
+                  disabled={isClearingAllCache}
+                  loaded={!isClearingAllCache}
+                />
+              </p>
+            </div>
 
             {/* Updates */}
             <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
@@ -169,6 +202,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}