Merge branch 'develop'v5.0.0-beta.21

20 files changed, 242 insertions, 47 deletions

diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
deleted file mode 100644
index ac3cdcb05..000000000
--- a/src/components/ui/AppLoader.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import Appear from '../../components/ui/effects/Appear';
-import Loader from '../../components/ui/Loader';
-
-export default function () {
-  return (
-    <div className="app-loader">
-      <Appear>
-        <h1 className="app-loader__title">Franz</h1>
-        <Loader color="#FFF" />
-      </Appear>
-    </div>
-  );
-}
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
new file mode 100644
index 000000000..61053f6d1
--- /dev/null
+++ b/src/components/ui/AppLoader/index.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet, { withTheme } from 'react-jss';
+import classnames from 'classnames';
+
+import FullscreenLoader from '../FullscreenLoader';
+import { shuffleArray } from '../../../helpers/array-helpers';
+
+import styles from './styles';
+
+const textList = shuffleArray([
+  'Looking for Sisi',
+  'Contacting the herald',
+  'Saddling the unicorn',
+  'Learning the Waltz',
+  'Visiting Horst & Grete',
+  'Twisting my moustache',
+  'Playing the trumpet',
+  'Traveling through space & time',
+]);
+
+export default @injectSheet(styles) @withTheme class AppLoader extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+  }
+
+  state = {
+    step: 0,
+  }
+
+  interval = null;
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState(prevState => ({
+        step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
+      }));
+    }, 2500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { classes, theme } = this.props;
+    const { step } = this.state;
+
+    return (
+      <FullscreenLoader
+        title="Franz"
+        className={classes.component}
+        spinnerColor={theme.colorAppLoaderSpinner}
+      >
+        {textList.map((text, i) => (
+          <span
+            key={text}
+            className={classnames({
+              [`${classes.slogan}`]: true,
+              [`${classes.visible}`]: step === i,
+            })}
+          >
+            {text}
+          </span>
+        ))}
+      </FullscreenLoader>
+    );
+  }
+}
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
new file mode 100644
index 000000000..755a56b40
--- /dev/null
+++ b/src/components/ui/AppLoader/styles.js
@@ -0,0 +1,16 @@
+export default {
+  component: {
+    color: '#FFF',
+  },
+  slogan: {
+    display: 'block',
+    opacity: 0,
+    transition: 'opacity 1s ease',
+    position: 'absolute',
+    textAlign: 'center',
+    width: '100%',
+  },
+  visible: {
+    opacity: 1,
+  },
+};
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 309e05bb4..ffc7f7051 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -62,6 +62,8 @@ export default @observer class Button extends Component {
     }
 
     return (
+      // disabling rule as button has type defined in `buttonProps`
+      /* eslint-disable react/button-has-type */
       <button {...buttonProps}>
         <Loader
           loaded={loaded}
@@ -72,6 +74,7 @@ export default @observer class Button extends Component {
         />
         {label}
       </button>
+      /* eslint-enable react/button-has-type */
     );
   }
 }
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
new file mode 100644
index 000000000..6ecf4d395
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet, { withTheme } from 'react-jss';
+import classnames from 'classnames';
+
+import Loader from '../Loader';
+
+import styles from './styles';
+
+export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+    spinnerColor: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  static defaultProps = {
+    className: null,
+    spinnerColor: null,
+    children: null,
+  }
+
+  render() {
+    const {
+      classes,
+      title,
+      children,
+      spinnerColor,
+      className,
+      theme,
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper}>
+        <div
+          className={classnames({
+            [`${classes.component}`]: true,
+            [`${className}`]: className,
+          })}
+        >
+          <h1 className={classes.title}>{title}</h1>
+          <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
+          {children && (
+            <div className={classes.content}>
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
new file mode 100644
index 000000000..64d24e4ce
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -0,0 +1,23 @@
+export default {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
+  component: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    height: 'auto',
+  },
+  title: {
+    fontSize: 35,
+  },
+  content: {
+    marginTop: 20,
+    width: '100%',
+  },
+};
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 76f77d631..83a05554b 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
@@ -23,6 +23,8 @@ export default @observer class ImageUpload extends Component {
     path: null,
   }
 
+  dropzoneRef = null;
+
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
@@ -36,8 +38,6 @@ export default @observer class ImageUpload extends Component {
     field.set('');
   }
 
-  dropzoneRef = null;
-
   render() {
     const {
       field,
@@ -57,7 +57,7 @@ export default @observer class ImageUpload extends Component {
         <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <div>
+            <Fragment>
               <div
                 className="image-upload__preview"
                 style={({
@@ -84,7 +84,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </div>
+            </Fragment>
           ) : (
             <Dropzone
               ref={(node) => { this.dropzoneRef = node; }}
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 94a1ddf76..612399e9f 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Loader from 'react-loader';
 
 // import { oneOrManyChildElements } from '../../prop-types';
-import Appear from '../ui/effects/Appear';
+import Appear from './effects/Appear';
 
 export default @observer class InfoBar extends Component {
   static propTypes = {
@@ -64,6 +64,7 @@ export default @observer class InfoBar extends Component {
           {children}
           {ctaLabel && (
             <button
+              type="button"
               className="info-bar__cta"
               onClick={onClick}
             >
@@ -80,6 +81,7 @@ export default @observer class InfoBar extends Component {
         </div>
         {!sticky && (
           <button
+            type="button"
             className="info-bar__close mdi mdi-close"
             onClick={onHide}
           />
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 77051f567..a33c6474a 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -61,6 +61,7 @@ export default @observer class Infobox extends Component {
           <button
             className="infobox__cta"
             onClick={ctaOnClick}
+            type="button"
           >
             <Loader
               loaded={!ctaLoading}
@@ -74,6 +75,7 @@ export default @observer class Infobox extends Component {
         )}
         {dismissable && (
           <button
+            type="button"
             onClick={() => this.setState({
               dismissed: true,
             })}
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 7bf6e1b00..9b070c4df 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -33,6 +33,8 @@ export default @observer class Input extends Component {
     passwordScore: 0,
   }
 
+  inputElement = null;
+
   componentDidMount() {
     if (this.props.focus) {
       this.focus();
@@ -53,8 +55,6 @@ export default @observer class Input extends Component {
     this.inputElement.focus();
   }
 
-  inputElement = null;
-
   render() {
     const {
       field,
@@ -110,7 +110,7 @@ export default @observer class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState({ showPassword: !this.state.showPassword })}
+              onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
               tabIndex="-1"
             />
           )}
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 0602290f1..b88686d5e 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -72,5 +72,4 @@ Link.wrappedComponent.defaultProps = {
   activeClassName: '',
   strictFilter: false,
   target: '',
-  openInBrowser: false,
 };
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 73984be94..67cd6af0b 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -73,4 +73,3 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
-
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 16c40d0ec..81d6666c6 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -5,6 +5,7 @@ export default theme => ({
     margin: [0, 0, 20, -20],
     padding: 20,
     'border-radius': theme.borderRadius,
+    pointerEvents: 'none',
   },
   titleContainer: {
     display: 'flex',
@@ -20,6 +21,7 @@ export default theme => ({
     'border-radius': theme.borderRadiusSmall,
     padding: [2, 4],
     'font-size': 12,
+    pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index 63ca6f9b8..ba13aca63 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -18,6 +18,8 @@ export default @observer class Radio extends Component {
     showLabel: true,
   };
 
+  inputElement = null;
+
   componentDidMount() {
     if (this.props.focus) {
       this.focus();
@@ -28,8 +30,6 @@ export default @observer class Radio extends Component {
     this.inputElement.focus();
   }
 
-  inputElement = null;
-
   render() {
     const {
       field,
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 5a9571d27..78d6aae8b 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import uuidv1 from 'uuid/v1';
 import { debounce } from 'lodash';
 
 export default @observer class SearchInput extends Component {
@@ -22,7 +21,7 @@ export default @observer class SearchInput extends Component {
     value: '',
     placeholder: '',
     className: '',
-    name: uuidv1(),
+    name: 'searchInput',
     throttle: false,
     throttleDelay: 250,
     onChange: () => null,
@@ -30,6 +29,8 @@ export default @observer class SearchInput extends Component {
     autoFocus: false,
   }
 
+  input = null;
+
   constructor(props) {
     super(props);
 
@@ -74,8 +75,6 @@ export default @observer class SearchInput extends Component {
     onReset();
   }
 
-  input = null;
-
   render() {
     const { className, name, placeholder } = this.props;
     const { value } = this.state;
@@ -90,15 +89,17 @@ export default @observer class SearchInput extends Component {
         <label
           htmlFor={name}
           className="mdi mdi-magnify"
-        />
-        <input
-          name={name}
-          type="text"
-          placeholder={placeholder}
-          value={value}
-          onChange={e => this.onChange(e)}
-          ref={(ref) => { this.input = ref; }}
-        />
+        >
+          <input
+            name={name}
+            id={name}
+            type="text"
+            placeholder={placeholder}
+            value={value}
+            onChange={e => this.onChange(e)}
+            ref={(ref) => { this.input = ref; }}
+          />
+        </label>
         {value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index abcad417e..da52243ca 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -9,12 +9,13 @@ export default @observer class Select extends Component {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
     showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
   };
 
   static defaultProps = {
     className: null,
-    focus: false,
     showLabel: true,
+    disabled: false,
   };
 
   render() {
@@ -22,6 +23,7 @@ export default @observer class Select extends Component {
       field,
       className,
       showLabel,
+      disabled,
     } = this.props;
 
     return (
@@ -29,6 +31,7 @@ export default @observer class Select extends Component {
         className={classnames({
           'franz-form__field': true,
           'has-error': field.error,
+          'is-disabled': disabled,
           [`${className}`]: className,
         })}
       >
@@ -45,12 +48,13 @@ export default @observer class Select extends Component {
           id={field.id}
           defaultValue={field.value}
           className="franz-form__select"
+          disabled={field.disabled || disabled}
         >
           {field.options.map(type => (
             <option
               key={type.value}
               value={type.value}
-              // selected={field.value === }
+              disabled={type.disabled}
             >
               {type.label}
             </option>
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 4285a343c..6fc50fe5c 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-import Appear from '../ui/effects/Appear';
+import Appear from './effects/Appear';
 
 export default @observer class StatusBarTargetUrl extends Component {
   static propTypes = {
@@ -13,7 +13,6 @@ export default @observer class StatusBarTargetUrl extends Component {
 
   static defaultProps = {
     className: '',
-    position: 'bottom',
     text: '',
   };
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 9ff9f009e..16881a7f7 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <div>{children}</div>
+      <Fragment>{children}</Fragment>
     );
   }
 }
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
new file mode 100644
index 000000000..3a3dbbe49
--- /dev/null
+++ b/src/components/ui/WebviewLoader/index.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+
+import FullscreenLoader from '../FullscreenLoader';
+
+import styles from './styles';
+
+export default @observer @injectSheet(styles) class WebviewLoader extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { classes, name } = this.props;
+    return (
+      <FullscreenLoader
+        className={classes.component}
+        title={`Loading ${name}`}
+      />
+    );
+  }
+}
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
new file mode 100644
index 000000000..dbd75db8a
--- /dev/null
+++ b/src/components/ui/WebviewLoader/styles.js
@@ -0,0 +1,9 @@
+export default theme => ({
+  component: {
+    background: theme.colorWebviewLoaderBackground,
+    padding: 20,
+    width: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+  },
+});