4 files changed, 598 insertions, 0 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
new file mode 100644
index 000000000..fac0f6b9a
--- /dev/null
+++ b/src/components/settings/services/EditServiceForm.js
@@ -0,0 +1,277 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+import normalizeUrl from 'normalize-url';
+
+import Form from '../../../lib/Form';
+import User from '../../../models/User';
+import Recipe from '../../../models/Recipe';
+import Service from '../../../models/Service';
+import Tabs, { TabItem } from '../../ui/Tabs';
+import Input from '../../ui/Input';
+import Toggle from '../../ui/Toggle';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  saveService: {
+    id: 'settings.service.form.saveButton',
+    defaultMessage: '!!!Save service',
+  },
+  deleteService: {
+    id: 'settings.service.form.deleteButton',
+    defaultMessage: '!!!Delete Service',
+  },
+  availableServices: {
+    id: 'settings.service.form.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  yourServices: {
+    id: 'settings.service.form.yourServices',
+    defaultMessage: '!!!Your services',
+  },
+  addServiceHeadline: {
+    id: 'settings.service.form.addServiceHeadline',
+    defaultMessage: '!!!Add {name}',
+  },
+  editServiceHeadline: {
+    id: 'settings.service.form.editServiceHeadline',
+    defaultMessage: '!!!Edit {name}',
+  },
+  tabHosted: {
+    id: 'settings.service.form.tabHosted',
+    defaultMessage: '!!!Hosted',
+  },
+  tabOnPremise: {
+    id: 'settings.service.form.tabOnPremise',
+    defaultMessage: '!!!Self hosted ⭐️',
+  },
+  customUrlValidationError: {
+    id: 'settings.service.form.customUrlValidationError',
+    defaultMessage: '!!!Could not validate custom {name} server.',
+  },
+  customUrlPremiumInfo: {
+    id: 'settings.service.form.customUrlPremiumInfo',
+    defaultMessage: '!!!To add self hosted services, you need a Franz Premium Supporter Account.',
+  },
+  customUrlUpgradeAccount: {
+    id: 'settings.service.form.customUrlUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account',
+  },
+  indirectMessageInfo: {
+    id: 'settings.service.form.indirectMessageInfo',
+    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static propTypes = {
+    recipe: PropTypes.instanceOf(Recipe).isRequired,
+    // service: PropTypes.oneOfType([
+    //   PropTypes.object,
+    //   PropTypes.instanceOf(Service),
+    // ]),
+    service(props, propName) {
+      if (props.action === 'edit' && !(props[propName] instanceof Service)) {
+        return new Error(`'${propName}'' is expected to be of type 'Service'
+          when editing a Service`);
+      }
+
+      return null;
+    },
+    user: PropTypes.instanceOf(User).isRequired,
+    action: PropTypes.string.isRequired,
+    form: PropTypes.instanceOf(Form).isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+    isDeleting: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    service: {},
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    isValidatingCustomUrl: false,
+  }
+
+  submit(e) {
+    const { recipe } = this.props;
+
+    e.preventDefault();
+    this.props.form.submit({
+      onSuccess: async (form) => {
+        const values = form.values();
+
+        let isValid = true;
+
+        if (recipe.validateUrl && values.customUrl) {
+          this.setState({ isValidatingCustomUrl: true });
+          try {
+            values.customUrl = normalizeUrl(values.customUrl);
+            isValid = await recipe.validateUrl(values.customUrl);
+          } catch (err) {
+            console.warn('ValidateURL', err);
+            isValid = false;
+          }
+        }
+
+        if (isValid) {
+          this.props.onSubmit(values);
+        } else {
+          form.invalidate('url-validation-error');
+        }
+
+        this.setState({ isValidatingCustomUrl: false });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const {
+      recipe,
+      service,
+      action,
+      user,
+      form,
+      isSaving,
+      isDeleting,
+      onDelete,
+    } = this.props;
+    const { intl } = this.context;
+
+    const { isValidatingCustomUrl } = this.state;
+
+    const deleteButton = isDeleting ? (
+      <Button
+        label={intl.formatMessage(messages.deleteService)}
+        loaded={false}
+        buttonType="secondary"
+        className="settings__delete-button"
+        disabled
+      />
+    ) : (
+      <Button
+        buttonType="danger"
+        label={intl.formatMessage(messages.deleteService)}
+        className="settings__delete-button"
+        onClick={onDelete}
+      />
+    );
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {action === 'add' ? (
+              <Link to="/settings/recipes">
+                {intl.formatMessage(messages.availableServices)}
+              </Link>
+            ) : (
+              <Link to="/settings/services">
+                {intl.formatMessage(messages.yourServices)}
+              </Link>
+            )}
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {action === 'add' ? (
+              intl.formatMessage(messages.addServiceHeadline, {
+                name: recipe.name,
+              })
+            ) : (
+              intl.formatMessage(messages.editServiceHeadline, {
+                name: service.name !== '' ? service.name : recipe.name,
+              })
+            )}
+          </span>
+        </div>
+        <div className="settings__body">
+          <form onSubmit={e => this.submit(e)} id="form">
+            <Input field={form.$('name')} focus />
+            {(recipe.hasTeamId || recipe.hasCustomUrl) && (
+              <Tabs
+                active={service.customUrl ? 1 : 0}
+              >
+                {recipe.hasTeamId && (
+                  <TabItem title={intl.formatMessage(messages.tabHosted)}>
+                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                  </TabItem>
+                )}
+                {recipe.hasCustomUrl && (
+                  <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
+                    {user.isPremium ? (
+                      <div>
+                        <Input field={form.$('customUrl')} />
+                        {form.error === 'url-validation-error' && (
+                          <p className="franz-form__error">
+                            {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
+                          </p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="center premium-info">
+                        <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
+                        <p>
+                          <Link to="/settings/user" className="button">
+                            {intl.formatMessage(messages.customUrlUpgradeAccount)}
+                          </Link>
+                        </p>
+                      </div>
+                    )}
+                  </TabItem>
+                )}
+              </Tabs>
+            )}
+            <div className="settings__options">
+              <Toggle field={form.$('isNotificationEnabled')} />
+              {recipe.hasIndirectMessages && (
+                <div>
+                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                  <p className="settings__indirect-message-help">
+                    {intl.formatMessage(messages.indirectMessageInfo)}
+                  </p>
+                </div>
+              )}
+              <Toggle field={form.$('isEnabled')} />
+            </div>
+            {recipe.message && (
+              <p className="settings__message">
+                <span className="mdi mdi-information" />
+                {recipe.message}
+              </p>
+            )}
+          </form>
+        </div>
+        <div className="settings__controls">
+          {/* Delete Button */}
+          {action === 'edit' && deleteButton}
+
+          {/* Save Button */}
+          {isSaving || isValidatingCustomUrl ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.saveService)}
+              loaded={false}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.saveService)}
+              htmlForm="form"
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
new file mode 100644
index 000000000..923053296
--- /dev/null
+++ b/src/components/settings/services/ServiceError.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Infobox from '../../ui/Infobox';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.service.error.headline',
+    defaultMessage: '!!!Error',
+  },
+  goBack: {
+    id: 'settings.service.error.goBack',
+    defaultMessage: '!!!Back to services',
+  },
+  availableServices: {
+    id: 'settings.service.form.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  errorMessage: {
+    id: 'settings.service.error.message',
+    defaultMessage: '!!!Could not load service recipe.',
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/recipes">
+              {intl.formatMessage(messages.availableServices)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <Infobox
+            type="danger"
+            icon="alert"
+          >
+            {intl.formatMessage(messages.errorMessage)}
+          </Infobox>
+        </div>
+        <div className="settings__controls">
+          <Button
+            label={intl.formatMessage(messages.goBack)}
+            htmlForm="form"
+            onClick={() => window.history.back()}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
new file mode 100644
index 000000000..20d8581d0
--- /dev/null
+++ b/src/components/settings/services/ServiceItem.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+
+const messages = defineMessages({
+  tooltipIsDisabled: {
+    id: 'settings.services.tooltip.isDisabled',
+    defaultMessage: '!!!Service is disabled',
+  },
+  tooltipNotificationsDisabled: {
+    id: 'settings.services.tooltip.notificationsDisabled',
+    defaultMessage: '!!!Notifications are disabled',
+  },
+});
+
+@observer
+export default class ServiceItem extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    goToServiceForm: PropTypes.func.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      service,
+      // toggleAction,
+      goToServiceForm,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'service-table__row': true,
+          'service-table__row--disabled': !service.isEnabled,
+        })}
+      >
+        <td
+          className="service-table__column-icon"
+          onClick={goToServiceForm}
+        >
+          <img
+            src={service.icon}
+            className={classnames({
+              'service-table__icon': true,
+              'has-custom-icon': service.hasCustomIcon,
+            })}
+            alt=""
+          />
+        </td>
+        <td
+          className="service-table__column-name"
+          onClick={goToServiceForm}
+        >
+          {service.name !== '' ? service.name : service.recipe.name}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isEnabled && (
+            <span
+              className="mdi mdi-power"
+              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isNotificationEnabled && (
+            <span
+              className="mdi mdi-message-bulleted-off"
+              data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)}
+            />
+          )}
+          <ReactTooltip place="top" type="dark" effect="solid" />
+        </td>
+        {/* <td className="service-table__column-action">
+          <input
+            type="checkbox"
+            onChange={toggleAction}
+            checked={service.isEnabled}
+          />
+        </td> */}
+      </tr>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
new file mode 100644
index 000000000..5f146b5f3
--- /dev/null
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -0,0 +1,155 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import SearchInput from '../../ui/SearchInput';
+import Infobox from '../../ui/Infobox';
+import Loader from '../../ui/Loader';
+import ServiceItem from './ServiceItem';
+import Appear from '../../ui/effects/Appear';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.services.headline',
+    defaultMessage: '!!!Your services',
+  },
+  noServicesAdded: {
+    id: 'settings.services.noServicesAdded',
+    defaultMessage: '!!!You haven\'t added any services yet.',
+  },
+  discoverServices: {
+    id: 'settings.services.discoverServices',
+    defaultMessage: '!!!Discover services',
+  },
+  servicesRequestFailed: {
+    id: 'settings.services.servicesRequestFailed',
+    defaultMessage: '!!!Could not load your services',
+  },
+  tryReloadServices: {
+    id: 'settings.account.tryReloadServices',
+    defaultMessage: '!!!Try again',
+  },
+  updatedInfo: {
+    id: 'settings.services.updatedInfo',
+    defaultMessage: '!!!Your changes have been saved',
+  },
+  deletedInfo: {
+    id: 'settings.services.deletedInfo',
+    defaultMessage: '!!!Service has been deleted',
+  },
+});
+
+@observer
+export default class ServicesDashboard extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    toggleService: PropTypes.func.isRequired,
+    filterServices: PropTypes.func.isRequired,
+    resetFilter: PropTypes.func.isRequired,
+    goTo: PropTypes.func.isRequired,
+    servicesRequestFailed: PropTypes.bool.isRequired,
+    retryServicesRequest: PropTypes.func.isRequired,
+    status: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      services,
+      isLoading,
+      toggleService,
+      filterServices,
+      resetFilter,
+      goTo,
+      servicesRequestFailed,
+      retryServicesRequest,
+      status,
+    } = 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()}
+          />
+        </div>
+        <div className="settings__body">
+          {!isLoading && servicesRequestFailed && (
+            <div>
+              <Infobox
+                icon="alert"
+                type="danger"
+                ctaLabel={intl.formatMessage(messages.tryReloadServices)}
+                ctaLoading={isLoading}
+                ctaOnClick={retryServicesRequest}
+              >
+                {intl.formatMessage(messages.servicesRequestFailed)}
+              </Infobox>
+            </div>
+          )}
+
+          {status.length > 0 && status.includes('updated') && (
+            <Appear>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+              >
+                {intl.formatMessage(messages.updatedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+
+          {status.length > 0 && status.includes('service-deleted') && (
+            <Appear>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+              >
+                {intl.formatMessage(messages.deletedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+
+          {!isLoading && services.length === 0 && (
+            <div className="align-middle settings__empty-state">
+              <p className="settings__empty-text">
+                <span className="emoji">
+                  <img src="./assets/images/emoji/sad.png" alt="" />
+                </span>
+                {intl.formatMessage(messages.noServicesAdded)}
+              </p>
+              <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+            </div>
+          )}
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <table className="service-table">
+              <tbody>
+                {services.map(service => (
+                  <ServiceItem
+                    key={service.id}
+                    service={service}
+                    toggleAction={() => toggleService({ serviceId: service.id })}
+                    goToServiceForm={() => goTo(`/settings/services/edit/${service.id}`)}
+                  />
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    );
+  }
+}