21 files changed, 249 insertions, 154 deletions

diff --git a/docs/example-feature/actions.js b/docs/example-feature/actions.js
new file mode 100644
index 000000000..c4d49b708
--- /dev/null
+++ b/docs/example-feature/actions.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../src/actions/lib/actions';
+
+export const exampleFeatureActions = createActionsFromDefinitions({
+  greet: {
+    name: PropTypes.string.isRequired,
+  },
+}, PropTypes.checkPropTypes);
+
+export default exampleFeatureActions;
diff --git a/docs/example-feature/api.js b/docs/example-feature/api.js
new file mode 100644
index 000000000..65207e877
--- /dev/null
+++ b/docs/example-feature/api.js
@@ -0,0 +1,5 @@
+export default {
+  async getName() {
+    return Promise.resolve('Franz');
+  },
+};
diff --git a/docs/example-feature/index.js b/docs/example-feature/index.js
new file mode 100644
index 000000000..af859af26
--- /dev/null
+++ b/docs/example-feature/index.js
@@ -0,0 +1,36 @@
+import { reaction, runInAction } from 'mobx';
+import { ExampleFeatureStore } from './store';
+import state, { resetState } from './state';
+import api from './api';
+
+const debug = require('debug')('Franz:feature:EXAMPLE_FEATURE');
+
+let store = null;
+
+export default function initAnnouncements(stores, actions) {
+  const { features } = stores;
+
+  // Toggle workspace feature
+  reaction(
+    () => (
+      features.features.isExampleFeatureEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `EXAMPLE_FEATURE` feature');
+        store = new ExampleFeatureStore(stores, api, actions, state);
+        store.initialize();
+        runInAction(() => { state.isFeatureActive = true; });
+      } else if (store) {
+        debug('Disabling `EXAMPLE_FEATURE` feature');
+        runInAction(() => { state.isFeatureActive = false; });
+        store.teardown();
+        store = null;
+        resetState(); // Reset state to default
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/docs/example-feature/state.js b/docs/example-feature/state.js
new file mode 100644
index 000000000..676717da7
--- /dev/null
+++ b/docs/example-feature/state.js
@@ -0,0 +1,14 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  name: null,
+  isFeatureActive: false,
+};
+
+export const exampleFeatureState = observable(defaultState);
+
+export function resetState() {
+  Object.assign(exampleFeatureState, defaultState);
+}
+
+export default exampleFeatureState;
diff --git a/docs/example-feature/store.js b/docs/example-feature/store.js
new file mode 100644
index 000000000..d8acfdca3
--- /dev/null
+++ b/docs/example-feature/store.js
@@ -0,0 +1,32 @@
+import { action, observable, reaction } from 'mobx';
+import Store from '../../src/stores/lib/Store';
+import Request from '../../src/stores/lib/Request';
+
+const debug = require('debug')('Franz:feature:EXAMPLE_FEATURE:store');
+
+export class ExampleFeatureStore extends Store {
+  @observable getNameRequest = new Request(this.api, 'getName');
+
+  constructor(stores, api, actions, state) {
+    super(stores, api, actions);
+    this.state = state;
+  }
+
+  setup() {
+    debug('fetching name from api');
+    this.getNameRequest.execute();
+
+    // Update the name on the state when the request resolved
+    reaction(
+      () => this.getNameRequest.result,
+      name => this._setName(name),
+    );
+  }
+
+  @action _setName = (name) => {
+    debug('setting name', name);
+    this.state.name = name;
+  };
+}
+
+export default ExampleFeatureStore;
diff --git a/packages/forms/package.json b/packages/forms/package.json
index e78929777..fe161a282 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.9",
+  "version": "1.0.13",
   "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
-    "@meetfranz/theme": "^1.0.7",
+    "@meetfranz/theme": "^1.0.11",
     "react-html-attributes": "^1.4.3",
     "react-loader": "^2.4.5"
   },
@@ -35,5 +35,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b"
+  "gitHead": "27778954921365e4957eae964e28f68690f3825f"
 }
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 7a7f83dab..6959cde73 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -44,6 +44,7 @@ const styles = (theme: Theme) => ({
     width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
+    height: theme.buttonHeight,
 
     '&:hover': {
       opacity: 0.8,
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 478738cad..ab1c33315 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -102,6 +102,9 @@ class InputComponent extends Component<IProps, IState> {
       spellCheck,
       onBlur,
       onFocus,
+      min,
+      max,
+      step,
     } = this.props;
 
     const {
@@ -147,6 +150,9 @@ class InputComponent extends Component<IProps, IState> {
               onFocus={onFocus}
               onBlur={onBlur}
               disabled={disabled}
+              min={min}
+              max={max}
+              step={step}
             />
             {suffix && (
               <span className={classes.suffix}>
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index 36fcfbedf..590270a06 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -26,6 +26,8 @@ class LabelComponent extends Component<ILabel> {
       htmlFor,
     } = this.props;
 
+    if (!showLabel) return children;
+
     return (
       <label
         className={classnames({
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 5c21a787f..3034d6347 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/theme",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Theme configuration for Franz",
   "author": "Stefan Malzner <stefan@adlk.io>",
   "homepage": "https://github.com/meetfranz/franz",
@@ -25,5 +25,5 @@
   "dependencies": {
     "color": "^3.1.0"
   },
-  "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b"
+  "gitHead": "27778954921365e4957eae964e28f68690f3825f"
 }
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 8a71e61cf..273792d46 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -42,7 +42,7 @@ export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter)
 // Input
 export const labelColor = legacyStyles.themeGrayLight;
 export const inputColor = legacyStyles.themeGray;
-export const inputHeight = '35px';
+export const inputHeight = 40;
 export const inputBackground = legacyStyles.themeGrayLightest;
 export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
 export const inputModifierColor = legacyStyles.themeGrayLight;
@@ -108,6 +108,8 @@ export const buttonInvertedBackground = 'none';
 export const buttonInvertedTextColor = brandPrimary;
 export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
 
+export const buttonHeight = inputHeight;
+
 export const buttonLoaderColor = {
   primary: '#FFF',
   secondary: buttonSecondaryTextColor,
diff --git a/packages/typings/package.json b/packages/typings/package.json
index 54257c54c..5207cf3c6 100644
--- a/packages/typings/package.json
+++ b/packages/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/typings",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "TypeScript typings for internal and external projects",
   "author": "Stefan Malzner <stefan@adlk.io>",
   "homepage": "https://github.com/meetfranz/franz",
@@ -18,5 +18,5 @@
   "bugs": {
     "url": "https://github.com/meetfranz/franz/issues"
   },
-  "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b"
+  "gitHead": "27778954921365e4957eae964e28f68690f3825f"
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 62a1e5a6e..fb36555c4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
-    "@meetfranz/theme": "^1.0.7",
+    "@meetfranz/theme": "^1.0.11",
     "react-loader": "^2.4.5"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b"
+  "gitHead": "27778954921365e4957eae964e28f68690f3825f"
 }
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 53ed16341..1a442a733 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -15,6 +15,7 @@ interface IProps extends IWithStyle {
   ctaLabel?: string;
   ctaLoading?: boolean;
   children: React.ReactNode;
+  className: string;
 }
 
 interface IState {
@@ -138,6 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      className,
     } = this.props;
 
     const {
@@ -150,7 +152,10 @@ class InfoboxComponent extends Component<IProps, IState> {
     }
 
     return (
-      <div className={classes.wrapper}>
+      <div className={classnames({
+        [classes.wrapper]: true,
+        [`${className}`]: className,
+      })}>
         <div
           className={classnames({
             [classes.infobox]: true,
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
index 499018d70..6571e9441 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.js
@@ -1,18 +1,23 @@
+export const createActionsFromDefinitions = (actionDefinitions, validate) => {
+  const actions = {};
+  Object.keys(actionDefinitions).forEach((actionName) => {
+    const action = (params) => {
+      const schema = actionDefinitions[actionName];
+      validate(schema, params, actionName);
+      action.notify(params);
+    };
+    actions[actionName] = action;
+    action.listeners = [];
+    action.listen = listener => action.listeners.push(listener);
+    action.notify = params => action.listeners.forEach(listener => listener(params));
+  });
+  return actions;
+};
+
 export default (definitions, validate) => {
   const newActions = {};
   Object.keys(definitions).forEach((scopeName) => {
-    newActions[scopeName] = {};
-    Object.keys(definitions[scopeName]).forEach((actionName) => {
-      const action = (params) => {
-        const schema = definitions[scopeName][actionName];
-        validate(schema, params, actionName);
-        action.notify(params);
-      };
-      newActions[scopeName][actionName] = action;
-      action.listeners = [];
-      action.listen = listener => action.listeners.push(listener);
-      action.notify = params => action.listeners.forEach(listener => listener(params));
-    });
+    newActions[scopeName] = createActionsFromDefinitions(definitions[scopeName], validate);
   });
   return newActions;
 };
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 2871769a9..bafeef005 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -3,7 +3,6 @@ import path from 'path';
 import tar from 'tar';
 import fs from 'fs-extra';
 import { remote } from 'electron';
-import localStorage from 'mobx-localstorage';
 
 import ServiceModel from '../../models/Service';
 import RecipePreviewModel from '../../models/RecipePreview';
@@ -16,6 +15,7 @@ import OrderModel from '../../models/Order';
 import { sleep } from '../../helpers/async-helpers';
 
 import { API } from '../../environment';
+import { prepareAuthRequest, sendAuthRequest } from '../utils/auth';
 
 import {
   getRecipeDirectory,
@@ -39,6 +39,7 @@ const { default: fetch } = remote.require('electron-fetch');
 
 const SERVER_URL = API;
 const API_VERSION = 'v1';
+const API_URL = `${SERVER_URL}/${API_VERSION}`;
 
 export default class ServerApi {
   recipePreviews = [];
@@ -47,12 +48,12 @@ export default class ServerApi {
 
   // User
   async login(email, passwordHash) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/login`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/auth/login`, {
       method: 'POST',
       headers: {
         Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
       },
-    }, false));
+    }, false);
     if (!request.ok) {
       throw request;
     }
@@ -63,10 +64,10 @@ export default class ServerApi {
   }
 
   async signup(data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/signup`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/auth/signup`, {
       method: 'POST',
       body: JSON.stringify(data),
-    }, false));
+    }, false);
     if (!request.ok) {
       throw request;
     }
@@ -77,10 +78,10 @@ export default class ServerApi {
   }
 
   async inviteUser(data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/invite`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/invite`, {
       method: 'POST',
       body: JSON.stringify(data),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -90,12 +91,12 @@ export default class ServerApi {
   }
 
   async retrievePassword(email) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/password`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/auth/password`, {
       method: 'POST',
       body: JSON.stringify({
         email,
       }),
-    }, false));
+    }, false);
     if (!request.ok) {
       throw request;
     }
@@ -106,9 +107,7 @@ export default class ServerApi {
   }
 
   async userInfo() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
+    const request = await sendAuthRequest(`${API_URL}/me`);
     if (!request.ok) {
       throw request;
     }
@@ -121,10 +120,10 @@ export default class ServerApi {
   }
 
   async updateUserInfo(data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/me`, {
       method: 'PUT',
       body: JSON.stringify(data),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -136,9 +135,9 @@ export default class ServerApi {
   }
 
   async deleteAccount() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/me`, {
       method: 'DELETE',
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -150,9 +149,7 @@ export default class ServerApi {
 
   // Services
   async getServices() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/services`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
+    const request = await sendAuthRequest(`${API_URL}/me/services`);
     if (!request.ok) {
       throw request;
     }
@@ -165,12 +162,12 @@ export default class ServerApi {
   }
 
   async createService(recipeId, data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/service`, {
       method: 'POST',
       body: JSON.stringify(Object.assign({
         recipeId,
       }, data)),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -195,10 +192,10 @@ export default class ServerApi {
       await this.uploadServiceIcon(serviceId, data.iconFile);
     }
 
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/service/${serviceId}`, {
       method: 'PUT',
       body: JSON.stringify(data),
-    }));
+    });
 
     if (!request.ok) {
       throw request;
@@ -216,14 +213,14 @@ export default class ServerApi {
     const formData = new FormData();
     formData.append('icon', icon);
 
-    const requestData = this._prepareAuthRequest({
+    const requestData = prepareAuthRequest({
       method: 'PUT',
       body: formData,
     });
 
     delete requestData.headers['Content-Type'];
 
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData);
+    const request = await window.fetch(`${API_URL}/service/${serviceId}`, requestData);
 
     if (!request.ok) {
       throw request;
@@ -235,10 +232,10 @@ export default class ServerApi {
   }
 
   async reorderService(data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/service/reorder`, {
       method: 'PUT',
       body: JSON.stringify(data),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -248,9 +245,9 @@ export default class ServerApi {
   }
 
   async deleteService(id) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${id}`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/service/${id}`, {
       method: 'DELETE',
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -264,9 +261,7 @@ export default class ServerApi {
 
   // Features
   async getDefaultFeatures() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/features/default`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
+    const request = await sendAuthRequest(`${API_URL}/features/default`);
     if (!request.ok) {
       throw request;
     }
@@ -278,9 +273,7 @@ export default class ServerApi {
   }
 
   async getFeatures() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/features`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
+    const request = await sendAuthRequest(`${API_URL}/features`);
     if (!request.ok) {
       throw request;
     }
@@ -314,10 +307,10 @@ export default class ServerApi {
   }
 
   async getRecipeUpdates(recipeVersions) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/update`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/recipes/update`, {
       method: 'POST',
       body: JSON.stringify(recipeVersions),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -328,29 +321,19 @@ export default class ServerApi {
 
   // Recipes Previews
   async getRecipePreviews() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
+    const request = await sendAuthRequest(`${API_URL}/recipes`);
+    if (!request.ok) throw request;
     const data = await request.json();
-
     const recipePreviews = this._mapRecipePreviewModel(data);
     debug('ServerApi::getRecipes resolves', recipePreviews);
-
     return recipePreviews;
   }
 
   async getFeaturedRecipePreviews() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/popular`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
-    const data = await request.json();
+    const request = await sendAuthRequest(`${API_URL}/recipes/popular`);
+    if (!request.ok) throw request;
 
+    const data = await request.json();
     // data = this._addLocalRecipesToPreviews(data);
 
     const recipePreviews = this._mapRecipePreviewModel(data);
@@ -359,14 +342,11 @@ export default class ServerApi {
   }
 
   async searchRecipePreviews(needle) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/search?needle=${needle}`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
-    const data = await request.json();
+    const url = `${API_URL}/recipes/search?needle=${needle}`;
+    const request = await sendAuthRequest(url);
+    if (!request.ok) throw request;
 
+    const data = await request.json();
     const recipePreviews = this._mapRecipePreviewModel(data);
     debug('ServerApi::searchRecipePreviews resolves', recipePreviews);
     return recipePreviews;
@@ -375,10 +355,9 @@ export default class ServerApi {
   async getRecipePackage(recipeId) {
     try {
       const recipesDirectory = path.join(app.getPath('userData'), 'recipes');
-
       const recipeTempDirectory = path.join(recipesDirectory, 'temp', recipeId);
       const archivePath = path.join(recipeTempDirectory, 'recipe.tar.gz');
-      const packageUrl = `${SERVER_URL}/${API_VERSION}/recipes/download/${recipeId}`;
+      const packageUrl = `${API_URL}/recipes/download/${recipeId}`;
 
       fs.ensureDirSync(recipeTempDirectory);
       const res = await fetch(packageUrl);
@@ -415,26 +394,21 @@ export default class ServerApi {
 
   // Payment
   async getPlans() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/payment/plans`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
+    const request = await sendAuthRequest(`${API_URL}/payment/plans`);
+    if (!request.ok) throw request;
     const data = await request.json();
-
     const plan = new PlanModel(data);
     debug('ServerApi::getPlans resolves', plan);
     return plan;
   }
 
   async getHostedPage(planId) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/payment/init`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${API_URL}/payment/init`, {
       method: 'POST',
       body: JSON.stringify({
         planId,
       }),
-    }));
+    });
     if (!request.ok) {
       throw request;
     }
@@ -445,25 +419,16 @@ export default class ServerApi {
   }
 
   async getPaymentDashboardUrl() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/billing`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
+    const request = await sendAuthRequest(`${API_URL}/me/billing`);
+    if (!request.ok) throw request;
     const data = await request.json();
-
     debug('ServerApi::getPaymentDashboardUrl resolves', data);
     return data;
   }
 
   async getSubscriptionOrders() {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/subscription`, this._prepareAuthRequest({
-      method: 'GET',
-    }));
-    if (!request.ok) {
-      throw request;
-    }
+    const request = await sendAuthRequest(`${API_URL}/me/subscription`);
+    if (!request.ok) throw request;
     const data = await request.json();
     const orders = this._mapOrderModels(data);
     debug('ServerApi::getSubscriptionOrders resolves', orders);
@@ -472,15 +437,9 @@ export default class ServerApi {
 
   // News
   async getLatestNews() {
-    // eslint-disable-next-line
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/news?platform=${os.platform()}&arch=${os.arch()}&version=${app.getVersion()}`,
-      this._prepareAuthRequest({
-        method: 'GET',
-      }));
-
-    if (!request.ok) {
-      throw request;
-    }
+    const url = `${API_URL}/news?platform=${os.platform()}&arch=${os.arch()}&version=${app.getVersion()}`;
+    const request = await sendAuthRequest(url);
+    if (!request.ok) throw request;
     const data = await request.json();
     const news = this._mapNewsModels(data);
     debug('ServerApi::getLatestNews resolves', news);
@@ -488,23 +447,16 @@ export default class ServerApi {
   }
 
   async hideNews(id) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/news/${id}/read`,
-      this._prepareAuthRequest({
-        method: 'GET',
-      }));
-
-    if (!request.ok) {
-      throw request;
-    }
-
+    const request = await sendAuthRequest(`${API_URL}/news/${id}/read`);
+    if (!request.ok) throw request;
     debug('ServerApi::hideNews resolves', id);
   }
 
   // Health Check
   async healthCheck() {
-    const request = await window.fetch(`${SERVER_URL}/health`, this._prepareAuthRequest({
+    const request = await sendAuthRequest(`${SERVER_URL}/health`, {
       method: 'GET',
-    }, false));
+    }, false);
     if (!request.ok) {
       throw request;
     }
@@ -520,10 +472,7 @@ export default class ServerApi {
       if (Object.prototype.hasOwnProperty.call(config, 'services')) {
         const services = await Promise.all(config.services.map(async (s) => {
           const service = s;
-          const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/${s.service}`,
-            this._prepareAuthRequest({
-              method: 'GET',
-            }));
+          const request = await sendAuthRequest(`${API_URL}/recipes/${s.service}`);
 
           if (request.status === 200) {
             const data = await request.json();
@@ -546,9 +495,7 @@ export default class ServerApi {
   // Helper
   async _mapServiceModels(services) {
     const recipes = services.map(s => s.recipeId);
-
     await this._bulkRecipeCheck(recipes);
-
     /* eslint-disable no-return-await */
     return Promise.all(services.map(async service => await this._prepareServiceModel(service)));
     /* eslint-enable no-return-await */
@@ -632,26 +579,6 @@ export default class ServerApi {
     }).filter(orderItem => orderItem !== null);
   }
 
-  _prepareAuthRequest(options, auth = true) {
-    const request = Object.assign(options, {
-      mode: 'cors',
-      headers: Object.assign({
-        'Content-Type': 'application/json',
-        'X-Franz-Source': 'desktop',
-        'X-Franz-Version': app.getVersion(),
-        'X-Franz-platform': process.platform,
-        'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
-        'X-Franz-System-Locale': app.getLocale(),
-      }, options.headers),
-    });
-
-    if (auth) {
-      request.headers.Authorization = `Bearer ${localStorage.getItem('authToken')}`;
-    }
-
-    return request;
-  }
-
   _getDevRecipes() {
     const recipesDirectory = getDevRecipeDirectory();
     try {
diff --git a/src/api/utils/auth.js b/src/api/utils/auth.js
new file mode 100644
index 000000000..6dbdeaa7f
--- /dev/null
+++ b/src/api/utils/auth.js
@@ -0,0 +1,28 @@
+import { remote } from 'electron';
+import localStorage from 'mobx-localstorage';
+
+const { app } = remote;
+
+export const prepareAuthRequest = (options = { method: 'GET' }, auth = true) => {
+  const request = Object.assign(options, {
+    mode: 'cors',
+    headers: Object.assign({
+      'Content-Type': 'application/json',
+      'X-Franz-Source': 'desktop',
+      'X-Franz-Version': app.getVersion(),
+      'X-Franz-platform': process.platform,
+      'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
+      'X-Franz-System-Locale': app.getLocale(),
+    }, options.headers),
+  });
+
+  if (auth) {
+    request.headers.Authorization = `Bearer ${localStorage.getItem('authToken')}`;
+  }
+
+  return request;
+};
+
+export const sendAuthRequest = (url, options, auth) => (
+  window.fetch(url, prepareAuthRequest(options, auth))
+);
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 817801982..0a075036a 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -107,7 +107,7 @@
   &__scroll-container {
     max-height: 100vh;
     padding: 80px 0;
-    overflow: scroll;
+    overflow: auto;
     width: 100%;
   }
 
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index d81808530..c8e9bcbf3 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -76,6 +76,11 @@ storiesOf('Button')
       busy: true,
     })} />
   ))
+  .add('With icon', () => (
+    <WithStoreButton store={createStore({
+      icon: 'mdiInformation',
+    })} />
+  ))
   .add('As link', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 2a5e8b0d5..144855376 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -10,6 +10,7 @@ interface IStoreArgs {
   ctaLabel?: string;
   type?: string;
   dismissable?: boolean;
+  className?: string;
 }
 
 const createStore = (args?: IStoreArgs) => {
@@ -29,6 +30,7 @@ const WithStoreInfobox = observer(({ store, children }: { store: any, children:
       type={store.type}
       ctaOnClick={store.ctaOnClick}
       dismissable={store.dismissable}
+      className={store.className}
     >
       {children}
     </Infobox>
@@ -123,4 +125,11 @@ storiesOf('Infobox')
     >
       Welcome to the world of tomorrow
     </WithStoreInfobox>
+  ))
+  .add('With className', () => (
+    <WithStoreInfobox store={createStore({
+      className: 'franz-is-awesome',
+    })}>
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
   ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index c522a10c7..af5e791d0 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -66,6 +66,14 @@ storiesOf('Input')
       value="faulty input"
       error="This is a generic error message."
     />
+  ))
+  .add('Type number with min & max', () => (
+    <Input
+      {...defaultProps()}
+      type="number"
+      min={1}
+      max={10}
+    />
   ));
 
 storiesOf('Password')