From cf3a33937ad5e7d66a58c60e1635e61757fd58d0 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sun, 25 Mar 2018 22:16:45 +0300
Subject: [PATCH] Implemented UI for Accounts applications management.
 Introduced copy service and injected it usage into auth finish page.
 Introduced Collapse component. Introduced Radio component. Generalized
 Checkbox component to share Radio component styles. Improved Textarea
 component: it now has auto height functionality. Improved profile/BackButton
 component: now you can pass custom url. BSOD is no longer displayed on 404
 response.

---
 .eslintrc                                     |   6 +-
 package.json                                  |   2 +
 src/components/auth/actions.js                |   2 +-
 src/components/auth/auth.scss                 |   3 +
 src/components/auth/finish/Finish.js          |  49 +---
 src/components/auth/password/PasswordBody.js  |  11 +-
 src/components/auth/register/RegisterBody.js  |  29 +-
 src/components/contact/ContactForm.js         |   2 +
 src/components/dev/apps/ApplicationItem.js    | 246 +++++++++++++++++
 .../dev/apps/ApplicationsIndex.intl.json      |  26 ++
 src/components/dev/apps/ApplicationsIndex.js  | 198 ++++++++++++++
 src/components/dev/apps/actions.js            |  68 +++++
 .../applicationForm/ApplicationForm.intl.json |  20 ++
 .../apps/applicationForm/ApplicationForm.js   | 129 +++++++++
 .../ApplicationTypeSwitcher.js                |  40 +++
 .../applicationForm/MinecraftServerType.js    |  59 ++++
 .../dev/apps/applicationForm/WebsiteType.js   |  74 +++++
 .../applicationTypeSwitcher.scss              |   3 +
 .../dev/apps/applicationsIndex.scss           | 252 ++++++++++++++++++
 src/components/dev/apps/icons/cube.svg        |   5 +
 .../dev/apps/icons/loading-cube.svg           |  17 ++
 src/components/dev/apps/icons/tools.svg       |   6 +
 src/components/dev/apps/index.js              |   4 +
 src/components/dev/apps/reducer.js            |  29 ++
 src/components/footerMenu/FooterMenu.js       |  16 +-
 .../footerMenu/footerMenu.intl.json           |   3 +-
 src/components/profile/ProfileForm.js         |  13 +-
 src/components/ui/bsod/BsodMiddleware.js      |   2 +-
 src/components/ui/buttons.scss                |   8 +-
 src/components/ui/collapse/Collapse.js        |  85 ++++++
 src/components/ui/collapse/collapse.scss      |   9 +
 src/components/ui/collapse/index.js           |   2 +
 src/components/ui/form/Button.js              |  35 ++-
 src/components/ui/form/Checkbox.js            |  34 ++-
 src/components/ui/form/Input.js               |  90 ++++---
 src/components/ui/form/LinkButton.js          |  14 +
 src/components/ui/form/Radio.js               |  58 ++++
 src/components/ui/form/TextArea.js            |  50 ++--
 src/components/ui/form/form.scss              | 109 ++++++--
 src/components/ui/form/index.js               |   4 +
 src/icons/webfont/clipboard.svg               |   3 +
 src/index.scss                                |   3 +-
 src/pages/dev/ApplicationsListPage.js         |  61 +++++
 src/pages/dev/CreateNewApplicationPage.js     |  71 +++++
 src/pages/dev/DevPage.js                      |  30 +++
 src/pages/dev/UpdateApplicationPage.js        | 113 ++++++++
 src/pages/dev/dev.scss                        |  18 ++
 src/pages/root/RootPage.js                    |   2 +
 src/reducers.js                               |   4 +-
 src/services/api/oauth.js                     |  58 +++-
 src/services/copy.js                          |  18 ++
 src/services/errorsDict/errorsDict.intl.json  |   4 +-
 src/services/errorsDict/errorsDict.js         |   3 +
 src/services/loader.js                        |  11 +-
 src/services/request/request.js               |  40 +--
 yarn.lock                                     |  16 ++
 56 files changed, 2054 insertions(+), 213 deletions(-)
 create mode 100644 src/components/auth/auth.scss
 create mode 100644 src/components/dev/apps/ApplicationItem.js
 create mode 100644 src/components/dev/apps/ApplicationsIndex.intl.json
 create mode 100644 src/components/dev/apps/ApplicationsIndex.js
 create mode 100644 src/components/dev/apps/actions.js
 create mode 100644 src/components/dev/apps/applicationForm/ApplicationForm.intl.json
 create mode 100644 src/components/dev/apps/applicationForm/ApplicationForm.js
 create mode 100644 src/components/dev/apps/applicationForm/ApplicationTypeSwitcher.js
 create mode 100644 src/components/dev/apps/applicationForm/MinecraftServerType.js
 create mode 100644 src/components/dev/apps/applicationForm/WebsiteType.js
 create mode 100644 src/components/dev/apps/applicationForm/applicationTypeSwitcher.scss
 create mode 100644 src/components/dev/apps/applicationsIndex.scss
 create mode 100644 src/components/dev/apps/icons/cube.svg
 create mode 100644 src/components/dev/apps/icons/loading-cube.svg
 create mode 100644 src/components/dev/apps/icons/tools.svg
 create mode 100644 src/components/dev/apps/index.js
 create mode 100644 src/components/dev/apps/reducer.js
 create mode 100644 src/components/ui/collapse/Collapse.js
 create mode 100644 src/components/ui/collapse/collapse.scss
 create mode 100644 src/components/ui/collapse/index.js
 create mode 100644 src/components/ui/form/LinkButton.js
 create mode 100644 src/components/ui/form/Radio.js
 create mode 100755 src/icons/webfont/clipboard.svg
 create mode 100644 src/pages/dev/ApplicationsListPage.js
 create mode 100644 src/pages/dev/CreateNewApplicationPage.js
 create mode 100644 src/pages/dev/DevPage.js
 create mode 100644 src/pages/dev/UpdateApplicationPage.js
 create mode 100644 src/pages/dev/dev.scss
 create mode 100644 src/services/copy.js

diff --git a/.eslintrc b/.eslintrc
index 15fbdd5..d54d531 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -147,7 +147,11 @@
         "semi-spacing": "error",
         "keyword-spacing": "warn",
         "space-before-blocks": "error",
-        "space-before-function-paren": ["error", "never"],
+        "space-before-function-paren": ["error", {
+            "anonymous": "never",
+            "named": "never",
+            "asyncArrow": "always"
+        }],
         "space-in-parens": "warn",
         "space-infix-ops": "warn",
         "space-unary-ops": "error",
diff --git a/package.json b/package.json
index e0e2fd5..8bb1ab6 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "babel-polyfill": "^6.3.14",
     "classnames": "^2.1.3",
+    "copy-to-clipboard": "~3.0.8",
     "debounce": "^1.0.0",
     "flag-icon-css": "^2.8.0",
     "intl": "^1.2.2",
@@ -43,6 +44,7 @@
     "react-motion": "^0.5.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.1.1",
+    "react-textarea-autosize": "^6.0.0",
     "react-transition-group": "^1.1.3",
     "redux": "^3.0.4",
     "redux-localstorage": "^0.4.1",
diff --git a/src/components/auth/actions.js b/src/components/auth/actions.js
index 6e1947d..b26c497 100644
--- a/src/components/auth/actions.js
+++ b/src/components/auth/actions.js
@@ -370,7 +370,7 @@ export function oAuthValidate(oauthData: {
 export function oAuthComplete(params: {accept?: bool} = {}) {
     return wrapInLoader((dispatch, getState) =>
         oauth.complete(getState().auth.oauth, params)
-            .then((resp) => {
+            .then((resp: Object) => {
                 localStorage.removeItem('oauthData');
 
                 if (resp.redirectUri.startsWith('static_page')) {
diff --git a/src/components/auth/auth.scss b/src/components/auth/auth.scss
new file mode 100644
index 0000000..877a295
--- /dev/null
+++ b/src/components/auth/auth.scss
@@ -0,0 +1,3 @@
+.checkboxInput {
+    margin-top: 15px;
+}
diff --git a/src/components/auth/finish/Finish.js b/src/components/auth/finish/Finish.js
index 11d920e..70ba20b 100644
--- a/src/components/auth/finish/Finish.js
+++ b/src/components/auth/finish/Finish.js
@@ -6,6 +6,7 @@ import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
 
 import { Button } from 'components/ui/form';
+import copy from 'services/copy';
 
 import messages from './Finish.intl.json';
 import styles from './finish.scss';
@@ -21,13 +22,8 @@ class Finish extends Component {
         success: PropTypes.bool
     };
 
-    state = {
-        isCopySupported: document.queryCommandSupported && document.queryCommandSupported('copy')
-    };
-
     render() {
         const {appName, code, state, displayCode, success} = this.props;
-        const {isCopySupported} = this.state;
         const authData = JSON.stringify({
             auth_code: code, // eslint-disable-line
             state
@@ -53,18 +49,16 @@ class Finish extends Component {
                                     <Message {...messages.passCodeToApp} values={{appName}} />
                                 </div>
                                 <div className={styles.codeContainer}>
-                                    <div className={styles.code} ref={this.setCode}>{code}</div>
+                                    <div className={styles.code}>
+                                        {code}
+                                    </div>
                                 </div>
-                                {isCopySupported ? (
-                                    <Button
-                                        color="green"
-                                        small
-                                        label={messages.copy}
-                                        onClick={this.onCopyClick}
-                                    />
-                                ) : (
-                                    ''
-                                )}
+                                <Button
+                                    color="green"
+                                    small
+                                    label={messages.copy}
+                                    onClick={this.onCopyClick}
+                                />
                             </div>
                         ) : (
                             <div className={styles.description}>
@@ -91,28 +85,7 @@ class Finish extends Component {
 
     onCopyClick = (event) => {
         event.preventDefault();
-        // http://stackoverflow.com/a/987376/5184751
-
-        try {
-            const selection = window.getSelection();
-            const range = document.createRange();
-            range.selectNodeContents(this.code);
-            selection.removeAllRanges();
-            selection.addRange(range);
-
-            const successful = document.execCommand('copy');
-            selection.removeAllRanges();
-
-            // TODO: было бы ещё неплохо сделать какую-то анимацию, вроде "Скопировано",
-            // ибо сейчас после клика как-то неубедительно, скопировалось оно или нет
-            console.log('Copying text command was %s', successful ? 'successful' : 'unsuccessful');
-        } catch (err) {
-            // not critical
-        }
-    };
-
-    setCode = (el) => {
-        this.code = el;
+        copy(this.props.code);
     };
 }
 
diff --git a/src/components/auth/password/PasswordBody.js b/src/components/auth/password/PasswordBody.js
index cd47753..f6e96d4 100644
--- a/src/components/auth/password/PasswordBody.js
+++ b/src/components/auth/password/PasswordBody.js
@@ -4,6 +4,7 @@ import icons from 'components/ui/icons.scss';
 import { Input, Checkbox } from 'components/ui/form';
 import BaseAuthBody from 'components/auth/BaseAuthBody';
 
+import authStyles from 'components/auth/auth.scss';
 import styles from './password.scss';
 import messages from './Password.intl.json';
 
@@ -40,10 +41,12 @@ export default class PasswordBody extends BaseAuthBody {
                     placeholder={messages.accountPassword}
                 />
 
-                <Checkbox {...this.bindField('rememberMe')}
-                    defaultChecked
-                    label={messages.rememberMe}
-                />
+                <div className={authStyles.checkboxInput}>
+                    <Checkbox {...this.bindField('rememberMe')}
+                        defaultChecked
+                        label={messages.rememberMe}
+                    />
+                </div>
             </div>
         );
     }
diff --git a/src/components/auth/register/RegisterBody.js b/src/components/auth/register/RegisterBody.js
index e2060de..6f46ff5 100644
--- a/src/components/auth/register/RegisterBody.js
+++ b/src/components/auth/register/RegisterBody.js
@@ -7,6 +7,7 @@ import { Input, Checkbox, Captcha } from 'components/ui/form';
 import BaseAuthBody from 'components/auth/BaseAuthBody';
 import passwordMessages from 'components/auth/password/Password.intl.json';
 
+import styles from 'components/auth/auth.scss';
 import messages from './Register.intl.json';
 
 // TODO: password and username can be validate for length and sameness
@@ -56,19 +57,21 @@ export default class RegisterBody extends BaseAuthBody {
 
                 <Captcha {...this.bindField('captcha')} delay={600} />
 
-                <Checkbox {...this.bindField('rulesAgreement')}
-                    color="blue"
-                    required
-                    label={
-                        <Message {...messages.acceptRules} values={{
-                            link: (
-                                <Link to="/rules" target="_blank">
-                                    <Message {...messages.termsOfService} />
-                                </Link>
-                            )
-                        }} />
-                    }
-                />
+                <div className={styles.checkboxInput}>
+                    <Checkbox {...this.bindField('rulesAgreement')}
+                        color="blue"
+                        required
+                        label={
+                            <Message {...messages.acceptRules} values={{
+                                link: (
+                                    <Link to="/rules" target="_blank">
+                                        <Message {...messages.termsOfService} />
+                                    </Link>
+                                )
+                            }} />
+                        }
+                    />
+                </div>
             </div>
         );
     }
diff --git a/src/components/contact/ContactForm.js b/src/components/contact/ContactForm.js
index 1d77952..a2ed222 100644
--- a/src/components/contact/ContactForm.js
+++ b/src/components/contact/ContactForm.js
@@ -118,6 +118,8 @@ export class ContactForm extends Component {
                         required
                         label={messages.message}
                         skin="light"
+                        minRows={6}
+                        maxRows={6}
                     />
                 </div>
 
diff --git a/src/components/dev/apps/ApplicationItem.js b/src/components/dev/apps/ApplicationItem.js
new file mode 100644
index 0000000..8f87ac7
--- /dev/null
+++ b/src/components/dev/apps/ApplicationItem.js
@@ -0,0 +1,246 @@
+// @flow
+import React, { Component } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import classNames from 'classnames';
+
+import { SKIN_LIGHT, COLOR_BLACK, COLOR_RED } from 'components/ui';
+import { Input, Button } from 'components/ui/form';
+import Collapse from 'components/ui/collapse';
+
+import styles from './applicationsIndex.scss';
+import messages from './ApplicationsIndex.intl.json';
+
+import type { Node } from 'react';
+import type { OauthAppResponse } from 'services/api/oauth';
+
+const ACTION_REVOKE_TOKENS = 'revoke-tokens';
+const ACTION_RESET_SECRET = 'reset-secret';
+const ACTION_DELETE = 'delete';
+
+export default class ApplicationItem extends Component<{
+    application: OauthAppResponse,
+    expand: bool,
+    onTileClick: (string) => void,
+    onResetSubmit: (string, bool) => Promise<*>,
+    onDeleteSubmit: (string) => Promise<*>,
+}, {
+    selectedAction: ?string,
+    isActionPerforming: bool,
+    detailsHeight: number,
+}> {
+    state = {
+        selectedAction: null,
+        isActionPerforming: false,
+        detailsHeight: 0,
+    };
+
+    render() {
+        const { application: app, expand } = this.props;
+        const { selectedAction, isActionPerforming } = this.state;
+
+        let actionContent: Node;
+        // eslint-disable-next-line
+        switch (selectedAction) {
+            case ACTION_REVOKE_TOKENS:
+            case ACTION_RESET_SECRET:
+                actionContent = (
+                    <div>
+                        <div className={styles.appActionDescription}>
+                            <Message {...messages.allRefreshTokensWillBecomeInvalid} />{' '}
+                            <Message {...messages.takeCareAccessTokensInvalidation} />
+                        </div>
+                        <div className={styles.appActionsButtons}>
+                            <Button
+                                label={messages.cancel}
+                                color={COLOR_BLACK}
+                                className={styles.appActionButton}
+                                onClick={this.onActionButtonClick(null)}
+                                small
+                            />
+                            <div className={styles.continueActionButtonWrapper}>
+                                {isActionPerforming ? (
+                                    <div className={styles.performingAction}>
+                                        <Message {...messages.performing} />
+                                    </div>
+                                ) : (
+                                    <div
+                                        className={styles.continueActionLink}
+                                        onClick={this.onResetSubmit(selectedAction === ACTION_RESET_SECRET)}
+                                    >
+                                        <Message {...messages.continue} />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+                break;
+            case ACTION_DELETE:
+                actionContent = (
+                    <div>
+                        <div className={styles.appActionDescription}>
+                            <Message {...messages.appAndAllTokenWillBeDeleted} />{' '}
+                            <Message {...messages.takeCareAccessTokensInvalidation} />
+                        </div>
+                        <div className={styles.appActionsButtons}>
+                            <Button
+                                label={messages.cancel}
+                                color={COLOR_BLACK}
+                                className={styles.appActionButton}
+                                onClick={this.onActionButtonClick(null)}
+                                small
+                            />
+                            <div className={styles.continueActionButtonWrapper}>
+                                {isActionPerforming ? (
+                                    <div className={styles.performingAction}>
+                                        <Message {...messages.performing} />
+                                    </div>
+                                ) : (
+                                    <Button
+                                        label={messages.delete}
+                                        color={COLOR_RED}
+                                        className={styles.appActionButton}
+                                        onClick={this.onSubmitDelete}
+                                        small
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+                break;
+        }
+
+        // TODO: @SleepWalker: нужно сделать так, чтобы форматирование числа пользователей шло через пробел
+
+        return (
+            <div className={classNames(styles.appItemContainer, {
+                [styles.appExpanded]: expand,
+            })}>
+                <div className={styles.appItemTile} onClick={this.onTileToggle}>
+                    <div className={styles.appTileTitle}>
+                        <div className={styles.appName}>
+                            {app.name}
+                        </div>
+                        <div className={styles.appStats}>
+                            Client ID: {app.clientId}
+                            {typeof app.countUsers !== 'undefined' && (
+                                <span>
+                                    {' | '}
+                                    <Message {...messages.countUsers} values={{
+                                        count: app.countUsers,
+                                    }} />
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.appItemToggle}>
+                        <div className={styles.appItemToggleIcon} />
+                    </div>
+                </div>
+                <Collapse isOpened={expand} onRest={this.onCollapseRest}>
+                    <div className={styles.appDetailsContainer}>
+                        <div className={styles.appDetailsInfoField}>
+                            <Link to={`/dev/applications/${app.clientId}`} className={styles.editAppLink}>
+                                <Message {...messages.editDescription} values={{
+                                    icon: <div className={styles.pencilIcon} />,
+                                }} />
+                            </Link>
+                            <Input
+                                label="Client ID:"
+                                skin={SKIN_LIGHT}
+                                disabled
+                                value={app.clientId}
+                                copy
+                            />
+                        </div>
+
+                        <div className={styles.appDetailsInfoField}>
+                            <Input
+                                label="Client Secret:"
+                                skin={SKIN_LIGHT}
+                                disabled
+                                value={app.clientSecret}
+                                copy
+                            />
+                        </div>
+
+                        <div className={styles.appDetailsDescription}>
+                            <Message {...messages.ifYouSuspectingThatSecretHasBeenCompromised} />
+                        </div>
+
+                        <div className={styles.appActionsButtons}>
+                            <Button
+                                label={messages.revokeAllTokens}
+                                color={COLOR_BLACK}
+                                className={styles.appActionButton}
+                                disabled={selectedAction && selectedAction !== ACTION_REVOKE_TOKENS}
+                                onClick={this.onActionButtonClick(ACTION_REVOKE_TOKENS)}
+                                small
+                            />
+                            <Button
+                                label={messages.resetClientSecret}
+                                color={COLOR_BLACK}
+                                className={styles.appActionButton}
+                                disabled={selectedAction && selectedAction !== ACTION_RESET_SECRET}
+                                onClick={this.onActionButtonClick(ACTION_RESET_SECRET)}
+                                small
+                            />
+                            <Button
+                                label={messages.delete}
+                                color={COLOR_BLACK}
+                                className={styles.appActionButton}
+                                disabled={selectedAction && selectedAction !== ACTION_DELETE}
+                                onClick={this.onActionButtonClick(ACTION_DELETE)}
+                                small
+                            />
+                        </div>
+
+                        {actionContent}
+                    </div>
+                </Collapse>
+            </div>
+        );
+    }
+
+    onTileToggle = () => {
+        const { onTileClick, application } = this.props;
+        onTileClick(application.clientId);
+    };
+
+    onCollapseRest = () => {
+        if (!this.props.expand && this.state.selectedAction) {
+            this.setState({
+                selectedAction: null,
+            });
+        }
+    };
+
+    onActionButtonClick = (type: ?string) => () => {
+        this.setState({
+            selectedAction: type === this.state.selectedAction ? null : type,
+        });
+    };
+
+    onResetSubmit = (resetClientSecret: bool) => async () => {
+        const { onResetSubmit, application } = this.props;
+        this.setState({
+            isActionPerforming: true,
+        });
+        await onResetSubmit(application.clientId, resetClientSecret);
+        this.setState({
+            isActionPerforming: false,
+            selectedAction: null,
+        });
+    };
+
+    onSubmitDelete = () => {
+        const { onDeleteSubmit, application } = this.props;
+        this.setState({
+            isActionPerforming: true,
+        });
+        onDeleteSubmit(application.clientId);
+    };
+}
diff --git a/src/components/dev/apps/ApplicationsIndex.intl.json b/src/components/dev/apps/ApplicationsIndex.intl.json
new file mode 100644
index 0000000..683ca2c
--- /dev/null
+++ b/src/components/dev/apps/ApplicationsIndex.intl.json
@@ -0,0 +1,26 @@
+{
+    "accountsForDevelopers": "Ely.by Accounts for developers",
+    "accountsAllowsYouYoUseOauth2": "Ely.by Accounts service provides users with a quick and easy-to-use way to login to your site, launcher or Minecraft server via OAuth2 authorization protocol. You can find more information about integration with Ely.by Accounts in {ourDocumentation}.",
+    "ourDocumentation": "our documentation",
+    "ifYouHaveAnyTroubles": "If you are experiencing difficulties, you can always use {feedback}. We'll surely help you.",
+    "feedback": "feedback",
+    "weDontKnowAnythingAboutYou": "We don't know anything about you yet.",
+    "youMustAuthToBegin": "You have to authorize to start.",
+    "authorization": "Authorization",
+    "youDontHaveAnyApplication": "You don't have any app registered yet.",
+    "shallWeStart": "Shall we start?",
+    "addNew": "Add new",
+    "yourApplications": "Your applications:",
+    "countUsers": "{count, plural, =0 {No users} one {# user} other {# users}}",
+    "ifYouSuspectingThatSecretHasBeenCompromised": "If you are suspecting that your Client Secret has been compromised, then you may want to reset it value. It'll cause recall of the all \"access\" and \"refresh\" tokens that have been issued. You can also recall all issued tokens without changing Client Secret.",
+    "revokeAllTokens": "Revoke all tokens",
+    "resetClientSecret": "Reset Client Secret",
+    "delete": "Delete",
+    "editDescription": "{icon} Edit description",
+    "allRefreshTokensWillBecomeInvalid": "All \"refresh\" tokens will become invalid and after next authorization the user will get permissions prompt.",
+    "appAndAllTokenWillBeDeleted": "Application and all associated tokens will be deleted.",
+    "takeCareAccessTokensInvalidation": "Take care because \"access\" tokens won't be invalidated immediately.",
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "performing": "Performing…"
+}
diff --git a/src/components/dev/apps/ApplicationsIndex.js b/src/components/dev/apps/ApplicationsIndex.js
new file mode 100644
index 0000000..5adde2b
--- /dev/null
+++ b/src/components/dev/apps/ApplicationsIndex.js
@@ -0,0 +1,198 @@
+// @flow
+import React, { Component } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import { Helmet } from 'react-helmet';
+
+import styles from './applicationsIndex.scss';
+import messages from './ApplicationsIndex.intl.json';
+import cubeIcon from './icons/cube.svg';
+import loadingCubeIcon from './icons/loading-cube.svg';
+import toolsIcon from './icons/tools.svg';
+
+import ApplicationItem from './ApplicationItem';
+
+import { LinkButton } from 'components/ui/form';
+import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
+import { restoreScroll } from 'components/ui/scroll/scroll';
+
+import type { Node } from 'react';
+import type { OauthAppResponse } from 'services/api/oauth';
+
+type Props = {
+    location: {
+        hash: string,
+    },
+    displayForGuest: bool,
+    applications: Array<OauthAppResponse>,
+    isLoading: bool,
+    createContactPopup: () => void,
+    deleteApp: (string) => Promise<any>,
+    resetApp: (string, bool) => Promise<any>,
+};
+
+type State = {
+    expandedApp: ?string,
+};
+
+class ApplicationsIndex extends Component<Props, State> {
+    state = {
+        expandedApp: null,
+    };
+
+    appsRefs = {};
+
+    componentDidUpdate(prevProps: Props) {
+        const { applications, isLoading, location } = this.props;
+        if (isLoading !== prevProps.isLoading && applications.length) {
+            const hash = location.hash.substr(1);
+            if (hash !== '' && applications.some((app) => app.clientId === hash)) {
+                requestAnimationFrame(() => this.onTileClick(hash));
+            }
+        }
+    }
+
+    render() {
+        const { displayForGuest, applications, isLoading, resetApp, deleteApp } = this.props;
+        const { expandedApp } = this.state;
+
+        let content: Node;
+        if (displayForGuest) {
+            content = (
+                <div className={styles.emptyState}>
+                    <img src={toolsIcon} className={styles.emptyStateIcon} />
+                    <div className={styles.emptyStateText}>
+                        <div>
+                            <Message {...messages.weDontKnowAnythingAboutYou}/>
+                        </div>
+                        <div>
+                            <Message {...messages.youMustAuthToBegin}/>
+                        </div>
+                    </div>
+
+                    <LinkButton
+                        to="/login"
+                        label={messages.authorization}
+                        color={COLOR_BLUE}
+                        className={styles.emptyStateActionButton}
+                    />
+                </div>
+            );
+        } else if (isLoading) {
+            content = (
+                <div className={styles.emptyState}>
+                    <img src={loadingCubeIcon} className={styles.loadingStateIcon} />
+                </div>
+            );
+        } else if (applications.length > 0) {
+            content = (
+                <div>
+                    <div className={styles.appsListTitleContainer}>
+                        <div className={styles.appsListTitle}>
+                            <Message {...messages.yourApplications} />
+                        </div>
+                        <LinkButton
+                            to="/dev/applications/new"
+                            label={messages.addNew}
+                            color={COLOR_GREEN}
+                            className={styles.appsListAddNewAppBtn}
+                        />
+                    </div>
+                    <div className={styles.appsListContainer}>
+                        {applications.map((app: OauthAppResponse) => (
+                            <div key={app.clientId} ref={(elem) => {this.appsRefs[app.clientId] = elem;}}>
+                                <ApplicationItem
+                                    application={app}
+                                    expand={app.clientId === expandedApp}
+                                    onTileClick={this.onTileClick}
+                                    onResetSubmit={resetApp}
+                                    onDeleteSubmit={deleteApp}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            );
+        } else {
+            content = (
+                <div className={styles.emptyState}>
+                    <img src={cubeIcon} className={styles.emptyStateIcon} />
+                    <div className={styles.emptyStateText}>
+                        <div>
+                            <Message {...messages.youDontHaveAnyApplication}/>
+                        </div>
+                        <div>
+                            <Message {...messages.shallWeStart}/>
+                        </div>
+                    </div>
+
+                    <LinkButton
+                        to="/dev/applications/new"
+                        label={messages.addNew}
+                        color={COLOR_GREEN}
+                        className={styles.emptyStateActionButton}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles.container}>
+                <div className={styles.welcomeContainer}>
+                    <Message {...messages.accountsForDevelopers} >
+                        {(pageTitle: string) => (
+                            <h2 className={styles.welcomeTitle}>
+                                <Helmet title={pageTitle} />
+                                {pageTitle}
+                            </h2>
+                        )}
+                    </Message>
+                    <div className={styles.welcomeTitleDelimiter} />
+                    <div className={styles.welcomeParagraph}>
+                        <Message {...messages.accountsAllowsYouYoUseOauth2} values={{
+                            ourDocumentation: (
+                                <a href="http://docs.ely.by/oauth.html" target="_blank">
+                                    <Message {...messages.ourDocumentation} />
+                                </a>
+                            ),
+                        }} />
+                    </div>
+                    <div className={styles.welcomeParagraph}>
+                        <Message {...messages.ifYouHaveAnyTroubles} values={{
+                            feedback: (
+                                <a href="#" onClick={this.onContact}>
+                                    <Message {...messages.feedback} />
+                                </a>
+                            ),
+                        }} />
+                    </div>
+                </div>
+
+                {content}
+            </div>
+        );
+    }
+
+    onTileClick = (clientId: string) => {
+        const expandedApp = this.state.expandedApp === clientId ? null : clientId;
+        this.setState({expandedApp}, () => {
+            if (expandedApp !== null) {
+                // TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
+                setTimeout(() => restoreScroll(this.appsRefs[clientId]), 150);
+            }
+        });
+    };
+
+    onContact = (event) => {
+        event.preventDefault();
+        this.props.createContactPopup();
+    };
+}
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { create as createPopup } from 'components/ui/popup/actions';
+import ContactForm from 'components/contact/ContactForm';
+
+export default withRouter(connect(null, {
+    createContactPopup: () => createPopup(ContactForm),
+})(ApplicationsIndex));
diff --git a/src/components/dev/apps/actions.js b/src/components/dev/apps/actions.js
new file mode 100644
index 0000000..9f4cf51
--- /dev/null
+++ b/src/components/dev/apps/actions.js
@@ -0,0 +1,68 @@
+// @flow
+
+import oauth from 'services/api/oauth';
+
+import type { Dispatch } from 'redux';
+import type { Apps } from './reducer';
+import type { OauthAppResponse } from 'services/api/oauth';
+import type { User } from 'components/user';
+
+export const SET_AVAILABLE = 'SET_AVAILABLE';
+export function setAppsList(apps: Array<OauthAppResponse>) {
+    return {
+        type: SET_AVAILABLE,
+        payload: apps,
+    };
+}
+
+export function getApp(state: {apps: Apps}, clientId: string): ?OauthAppResponse {
+    return state.apps.available.find((app) => app.clientId === clientId) || null;
+}
+
+export function fetchApp(clientId: string) {
+    return async (dispatch: Dispatch<any>, getState: () => {apps: Apps}) => {
+        const fetchedApp = await oauth.getApp(clientId);
+        const { available } = getState().apps;
+        let newApps: Array<OauthAppResponse>;
+        if (available.some((app) => app.clientId === fetchedApp.clientId)) {
+            newApps = available.map((app) => app.clientId === fetchedApp.clientId ? fetchedApp : app);
+        } else {
+            newApps = [...available, fetchedApp];
+        }
+
+        return dispatch(setAppsList(newApps));
+    };
+}
+
+export function fetchAvailableApps() {
+    return async (dispatch: Dispatch<any>, getState: () => {user: User}) => {
+        const { id } = getState().user;
+        if (!id) {
+            throw new Error('store.user.id is required for this action');
+        }
+
+        const apps = await oauth.getAppsByUser(id);
+
+        return dispatch(setAppsList(apps));
+    };
+}
+
+export function deleteApp(clientId: string) {
+    return async (dispatch: Dispatch<any>, getState: () => {apps: Apps}) => {
+        await oauth.delete(clientId);
+        const apps = getState().apps.available.filter((app) => app.clientId !== clientId);
+
+        return dispatch(setAppsList(apps));
+    };
+}
+
+export function resetApp(clientId: string, resetSecret: bool) {
+    return async (dispatch: Dispatch<any>, getState: () => {apps: Apps}) => {
+        const result = await oauth.reset(clientId, resetSecret);
+        if (resetSecret) {
+            const apps = getState().apps.available.map((app) => app.clientId === clientId ? result.data : app);
+
+            return dispatch(setAppsList(apps));
+        }
+    };
+}
diff --git a/src/components/dev/apps/applicationForm/ApplicationForm.intl.json b/src/components/dev/apps/applicationForm/ApplicationForm.intl.json
new file mode 100644
index 0000000..de0ebf8
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/ApplicationForm.intl.json
@@ -0,0 +1,20 @@
+{
+    "creatingApplication": "Creating an application",
+    "website": "Web site",
+    "minecraftServer": "Minecraft server",
+    "toDisplayRegistrationFormChooseType": "To display registration form for a new application choose necessary type.",
+    "applicationName": "Application name:",
+    "appDescriptionWillBeAlsoVisibleOnOauthPage": "Application's description will be displayed at the authorization page too. It isn't a required field. In authorization process the value may be overridden.",
+    "description": "Description:",
+    "websiteLinkWillBeUsedAsAdditionalId": "Site's link is optional, but it can be used as an additional identifier of the application.",
+    "websiteLink": "Website link:",
+    "redirectUriLimitsAllowableBaseAddress": "Redirection URI (redirectUri) determines a base address, that user will be allowed to be redirected to after authorization. In order to improve security it's better to use the whole path instead of just a domain name. For example: https://example.com/oauth/ely.",
+    "redirectUri": "Redirect URI:",
+    "createApplication": "Create application",
+    "serverName": "Server name:",
+    "ipAddressIsOptionButPreferable": "IP address is optional, but is very preferable. It might become handy in case of we suddenly decide to play on your server with the entire band (=",
+    "serverIp": "Server IP:",
+    "youCanAlsoSpecifyServerSite": "You also can specify either server's site URL or its community in a social network.",
+    "updatingApplication": "Updating an application",
+    "updateApplication" : "Update application"
+}
diff --git a/src/components/dev/apps/applicationForm/ApplicationForm.js b/src/components/dev/apps/applicationForm/ApplicationForm.js
new file mode 100644
index 0000000..d0ee78e
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/ApplicationForm.js
@@ -0,0 +1,129 @@
+// @flow
+import React, { Component } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import { Helmet } from 'react-helmet';
+
+import { Form, FormModel, Button } from 'components/ui/form';
+import { BackButton } from 'components/profile/ProfileForm';
+import { COLOR_GREEN } from 'components/ui';
+
+import { TYPE_APPLICATION, TYPE_MINECRAFT_SERVER } from 'components/dev/apps';
+import styles from 'components/profile/profileForm.scss';
+import messages from './ApplicationForm.intl.json';
+
+import ApplicationTypeSwitcher from './ApplicationTypeSwitcher';
+import WebsiteType from './WebsiteType';
+import MinecraftServerType from './MinecraftServerType';
+
+import type { ComponentType } from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import type { OauthAppResponse } from 'services/api/oauth';
+
+const typeToForm: {
+    [key: string]: {
+        label: MessageDescriptor,
+        component: ComponentType<any>,
+    },
+} = {
+    [TYPE_APPLICATION]: {
+        label: messages.website,
+        component: WebsiteType,
+    },
+    [TYPE_MINECRAFT_SERVER]: {
+        label: messages.minecraftServer,
+        component: MinecraftServerType,
+    },
+};
+
+const typeToLabel: {
+    [key: string]: MessageDescriptor,
+} = Object.keys(typeToForm).reduce((result, key: string) => {
+    result[key] = typeToForm[key].label;
+    return result;
+}, {});
+
+export default class ApplicationForm extends Component<{
+    app: OauthAppResponse,
+    form: FormModel,
+    displayTypeSwitcher?: bool,
+    type: ?string,
+    setType: (string) => void,
+    onSubmit: (FormModel) => Promise<*>,
+}> {
+    static displayName = 'ApplicationForm';
+
+    static defaultProps = {
+        setType: () => {},
+    };
+
+    render() {
+        const { type, setType, form, displayTypeSwitcher, app } = this.props;
+        const { component: FormComponent } = type && typeToForm[type] || {};
+        const isUpdate = app.clientId !== '';
+
+        return (
+            <Form form={form} onSubmit={this.onFormSubmit}>
+                <div className={styles.contentWithBackButton}>
+                    <BackButton to="/dev/applications" />
+
+                    <div className={styles.form}>
+                        <div className={styles.formBody}>
+                            <Message {...(isUpdate ? messages.updatingApplication : messages.creatingApplication)}>
+                                {(pageTitle: string) => (
+                                    <h3 className={styles.title}>
+                                        <Helmet title={pageTitle} />
+                                        {pageTitle}
+                                    </h3>
+                                )}
+                            </Message>
+
+                            {displayTypeSwitcher && (
+                                <div className={styles.formRow}>
+                                    <ApplicationTypeSwitcher
+                                        selectedType={type}
+                                        setType={setType}
+                                        appTypes={typeToLabel}
+                                    />
+                                </div>
+                            )}
+
+                            {!FormComponent && (
+                                <div className={styles.formRow}>
+                                    <p className={styles.description}>
+                                        <Message {...messages.toDisplayRegistrationFormChooseType} />
+                                    </p>
+                                </div>
+                            )}
+
+                            {FormComponent && <FormComponent form={form} app={app} />}
+                        </div>
+                    </div>
+
+                    {FormComponent && (
+                        <Button
+                            color={COLOR_GREEN}
+                            block
+                            label={isUpdate ? messages.updateApplication : messages.createApplication}
+                            type="submit"
+                        />
+                    )}
+                </div>
+            </Form>
+        );
+    }
+
+    onFormSubmit = async () => {
+        const { form } = this.props;
+
+        try {
+            await this.props.onSubmit(form);
+        } catch (resp) {
+            if (resp.errors) {
+                form.setErrors(resp.errors);
+                return;
+            }
+
+            throw resp;
+        }
+    };
+}
diff --git a/src/components/dev/apps/applicationForm/ApplicationTypeSwitcher.js b/src/components/dev/apps/applicationForm/ApplicationTypeSwitcher.js
new file mode 100644
index 0000000..5ffab91
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/ApplicationTypeSwitcher.js
@@ -0,0 +1,40 @@
+// @flow
+import React, { Component } from 'react';
+
+import { SKIN_LIGHT } from 'components/ui';
+import { Radio } from 'components/ui/form';
+
+import styles from './applicationTypeSwitcher.scss';
+
+import type { MessageDescriptor } from 'react-intl';
+
+export default class ApplicationTypeSwitcher extends Component<{
+    appTypes: {
+        [key: string]: MessageDescriptor,
+    },
+    selectedType: ?string,
+    setType: (type: string) => void,
+}> {
+    render() {
+        const { appTypes, selectedType } = this.props;
+
+        return (
+            <div onChange={this.onChange}>
+                {Object.keys(appTypes).map((type: string) => (
+                    <div className={styles.radioContainer} key={type}>
+                        <Radio
+                            skin={SKIN_LIGHT}
+                            label={appTypes[type]}
+                            value={type}
+                            checked={selectedType === type}
+                        />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    onChange = (event: {target: {value: string}}) => {
+        this.props.setType(event.target.value);
+    }
+}
diff --git a/src/components/dev/apps/applicationForm/MinecraftServerType.js b/src/components/dev/apps/applicationForm/MinecraftServerType.js
new file mode 100644
index 0000000..4168683
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/MinecraftServerType.js
@@ -0,0 +1,59 @@
+// @flow
+import React, { Component } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+
+import styles from 'components/profile/profileForm.scss';
+import messages from './ApplicationForm.intl.json';
+
+import { Input, FormModel } from 'components/ui/form';
+import { SKIN_LIGHT } from 'components/ui';
+
+import type {OauthAppResponse} from 'services/api/oauth';
+
+export default class MinecraftServerType extends Component<{
+    form: FormModel,
+    app: OauthAppResponse,
+}> {
+    render() {
+        const { form, app } = this.props;
+
+        return (
+            <div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('name')}
+                        label={messages.serverName}
+                        defaultValue={app.name}
+                        required
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+
+                <div className={styles.formRow}>
+                    <p className={styles.description}>
+                        <Message {...messages.ipAddressIsOptionButPreferable} />
+                    </p>
+                </div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('minecraftServerIp')}
+                        label={messages.serverIp}
+                        defaultValue={app.minecraftServerIp}
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+
+                <div className={styles.formRow}>
+                    <p className={styles.description}>
+                        <Message {...messages.youCanAlsoSpecifyServerSite} />
+                    </p>
+                </div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('websiteUrl')}
+                        label={messages.websiteLink}
+                        defaultValue={app.websiteUrl}
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/components/dev/apps/applicationForm/WebsiteType.js b/src/components/dev/apps/applicationForm/WebsiteType.js
new file mode 100644
index 0000000..29667bb
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/WebsiteType.js
@@ -0,0 +1,74 @@
+// @flow
+import React, { Component } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+
+import styles from 'components/profile/profileForm.scss';
+import messages from './ApplicationForm.intl.json';
+
+import { Input, TextArea, FormModel } from 'components/ui/form';
+import { SKIN_LIGHT } from 'components/ui';
+
+import type { OauthAppResponse } from 'services/api/oauth';
+
+export default class WebsiteType extends Component<{
+    form: FormModel,
+    app: OauthAppResponse,
+}> {
+    render() {
+        const { form, app } = this.props;
+
+        return (
+            <div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('name')}
+                        label={messages.applicationName}
+                        defaultValue={app.name}
+                        required
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+
+                <div className={styles.formRow}>
+                    <p className={styles.description}>
+                        <Message {...messages.appDescriptionWillBeAlsoVisibleOnOauthPage} />
+                    </p>
+                </div>
+                <div className={styles.formRow}>
+                    <TextArea {...form.bindField('description')}
+                        label={messages.description}
+                        defaultValue={app.description}
+                        skin={SKIN_LIGHT}
+                        minRows={3}
+                    />
+                </div>
+
+                <div className={styles.formRow}>
+                    <p className={styles.description}>
+                        <Message {...messages.websiteLinkWillBeUsedAsAdditionalId} />
+                    </p>
+                </div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('websiteUrl')}
+                        label={messages.websiteLink}
+                        defaultValue={app.websiteUrl}
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+
+                <div className={styles.formRow}>
+                    <p className={styles.description}>
+                        <Message {...messages.redirectUriLimitsAllowableBaseAddress} />
+                    </p>
+                </div>
+                <div className={styles.formRow}>
+                    <Input {...form.bindField('redirectUri')}
+                        label={messages.redirectUri}
+                        defaultValue={app.redirectUri}
+                        required
+                        skin={SKIN_LIGHT}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/components/dev/apps/applicationForm/applicationTypeSwitcher.scss b/src/components/dev/apps/applicationForm/applicationTypeSwitcher.scss
new file mode 100644
index 0000000..ed17ef4
--- /dev/null
+++ b/src/components/dev/apps/applicationForm/applicationTypeSwitcher.scss
@@ -0,0 +1,3 @@
+.radioContainer {
+    margin-top: 10px;
+}
diff --git a/src/components/dev/apps/applicationsIndex.scss b/src/components/dev/apps/applicationsIndex.scss
new file mode 100644
index 0000000..f2ccb3e
--- /dev/null
+++ b/src/components/dev/apps/applicationsIndex.scss
@@ -0,0 +1,252 @@
+@import '~components/ui/fonts.scss';
+@import '~components/ui/colors.scss';
+
+.container {
+    max-width: 500px;
+    margin: 0 auto;
+    background: white;
+    border-bottom: 10px solid #DDD8CE;
+
+    @media (max-width: 540px) {
+        margin: 0 20px;
+    }
+}
+
+.welcomeContainer {
+    padding: 30px;
+    background: #F5F5F5;
+    text-align: center;
+    border-bottom: 1px solid #EEEEEE;
+}
+
+.welcomeTitle {
+    font-size: 30px;
+    font-family: $font-family-title;
+    max-width: 245px;
+    margin: 0 auto 15px;
+    line-height: 1.2;
+}
+
+.welcomeTitleDelimiter {
+    width: 86px;
+    height: 3px;
+    background: $green;
+    margin: 0 auto 15px;
+}
+
+.welcomeParagraph {
+    color: #666666;
+    font-size: 14px;
+    margin-bottom: 15px;
+    line-height: 1.3;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.emptyState {
+    padding: 30px 30px 50px;
+    text-align: center;
+}
+
+.emptyStateIcon {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 20px;
+}
+
+@mixin emptyStateAnimation($order) {
+    animation:
+        slide-in-bottom
+        1s // Total animation time
+        .2s + .2s * $order // Increase each next element delay
+        cubic-bezier(0.075, 0.82, 0.165, 1) // easeOutCirc
+        both
+    ;
+}
+
+.emptyStateText {
+    font-family: $font-family-title;
+    color: #666666;
+    font-size: 16px;
+    margin-bottom: 20px;
+    line-height: 20px;
+
+    > div {
+        &:nth-child(1) {
+            @include emptyStateAnimation(0);
+        }
+
+        &:nth-child(2) {
+            @include emptyStateAnimation(1);
+        }
+    }
+}
+
+.emptyStateActionButton {
+    @include emptyStateAnimation(2);
+}
+
+@keyframes slide-in-bottom {
+    0% {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.loadingStateIcon {
+    composes: emptyStateIcon;
+
+    margin-bottom: 130px; // TODO: this is needed to render empty state without height jumping. Maybe it can be done more dynamically?
+}
+
+.appsListTitleContainer {
+    display: flex;
+    align-items: center;
+    padding: 20px 30px;
+    border-bottom: 1px solid #eee;
+}
+
+.appsListTitle {
+    font-family: $font-family-title;
+    font-size: 24px;
+    flex-grow: 1;
+}
+
+.appsListAddNewAppBtn {
+
+}
+
+.appsListContainer {
+    margin-bottom: 30px;
+}
+
+.appItemContainer {
+    border-bottom: 1px solid #eee;
+}
+
+.appItemTile {
+    padding: 15px 30px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color .25s;
+}
+
+.appTileTitle {
+    flex-grow: 1;
+}
+
+.appName {
+    font-family: $font-family-title;
+    font-size: 24px;
+}
+
+.appStats {
+    color: #999;
+    font-size: 14px;
+}
+
+.appItemToggle {
+
+}
+
+.appItemToggleIcon {
+    composes: arrowRight from 'components/ui/icons.scss';
+
+    position: relative;
+    left: 0;
+
+    font-size: 28px;
+    color: #ebe8e1;
+
+    transition: .25s;
+
+    .appItemTile:hover & {
+        color: #777;
+    }
+
+    .appExpanded & {
+        color: #777;
+        transform: rotate(360deg)!important; // Prevent it from hover rotating
+    }
+}
+
+.appDetailsContainer {
+    background: #F5F5F5;
+    border-top: 1px solid #eee;
+    padding: 5px 30px;
+}
+
+.appDetailsInfoField {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.editAppLink {
+    position: absolute;
+    top: 4px;
+    right: 0;
+
+    font-size: 12px;
+    color: #9A9A9A;
+    border-bottom: 0;
+}
+
+.pencilIcon {
+    composes: pencil from 'components/ui/icons.scss';
+
+    font-size: 14px;
+    position: relative;
+    bottom: 2px;
+}
+
+.appDetailsDescription {
+    font-size: 12px;
+    color: #9A9A9A;
+    line-height: 1.4;
+    margin-bottom: 20px;
+}
+
+.appActionsButtons {
+
+}
+
+.appActionButton {
+    margin: 0 10px 10px 0;
+
+    &:last-of-type {
+        margin-right: 0;
+    }
+}
+
+.appActionDescription {
+    composes: appDetailsDescription;
+
+    margin-top: 20px;
+}
+
+.continueActionButtonWrapper {
+    display: inline-block;
+    margin-left: 10px;
+}
+
+.continueActionLink {
+    composes: textLink from 'index.scss';
+
+    font-family: $font-family-title;
+    font-size: 14px;
+    color: #666;
+}
+
+.performingAction {
+    font-family: $font-family-title;
+    font-size: 14px;
+    color: #666;
+}
diff --git a/src/components/dev/apps/icons/cube.svg b/src/components/dev/apps/icons/cube.svg
new file mode 100644
index 0000000..d1610bc
--- /dev/null
+++ b/src/components/dev/apps/icons/cube.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#DDD8CE" d="M110,20V10H80V0H40V10H10V20H0v80H10v10H40v10H80V110h30V100h10V20H110ZM20,30V20H50V10H70V20h30V30H70V40H50V30H20Zm90,60H100v10H70v10H60V50H80V40h30V90h0Z">
+        <animate attributeName="fill" from="#EBE8E2" to="#DDD8CE" dur="1s" />
+    </path>
+</svg>
diff --git a/src/components/dev/apps/icons/loading-cube.svg b/src/components/dev/apps/icons/loading-cube.svg
new file mode 100644
index 0000000..d6742e8
--- /dev/null
+++ b/src/components/dev/apps/icons/loading-cube.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#gradient)" d="M110,20V10H80V0H40V10H10V20H0v80H10v10H40v10H80V110h30V100h10V20H110ZM20,30V20H50V10H70V20h30V30H70V40H50V30H20Zm90,60H100v10H70v10H60V50H80V40h30V90h0Z" />
+
+    <defs>
+        <linearGradient id="gradient">
+            <stop offset="0%" stop-color="#EBE8E2">
+                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite" />
+            </stop>
+            <stop offset="50%" stop-color="#DDD8CE">
+                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite" />
+            </stop>
+            <stop offset="100%" stop-color="#EBE8E2">
+                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite" />
+            </stop>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/components/dev/apps/icons/tools.svg b/src/components/dev/apps/icons/tools.svg
new file mode 100644
index 0000000..5590ca6
--- /dev/null
+++ b/src/components/dev/apps/icons/tools.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#DDD8CE">
+        <polygon points="110 20 110 30 90 30 90 10 100 10 100 0 80 0 80 10 70 10 70 40 60 40 60 50 50 50 50 60 40 60 40 70 10 70 10 80 0 80 0 100 10 100 10 90 30 90 30 110 20 110 20 120 40 120 40 110 50 110 50 80 60 80 60 70 70 70 70 60 80 60 80 50 110 50 110 40 120 40 120 20"/>
+        <path d="M50,30 L50,50 L30,50 L30,40 L20,40 L20,30 L10,30 L10,20 L0,20 L0,0 L20,0 L20,10 L30,10 L30,20 L40,20 L40,30 L50,30 L50,30 Z M110,120 L110,110 L120,110 L120,90 L110,90 L110,80 L100,80 L100,70 L90,70 L90,60 L80,60 L80,70 L70,70 L70,80 L60,80 L60,90 L70,90 L70,100 L80,100 L80,110 L90,110 L90,120 L110,120 L110,120 Z"/>
+    </g>
+</svg>
diff --git a/src/components/dev/apps/index.js b/src/components/dev/apps/index.js
new file mode 100644
index 0000000..9dc3994
--- /dev/null
+++ b/src/components/dev/apps/index.js
@@ -0,0 +1,4 @@
+// @flow
+
+export const TYPE_APPLICATION = 'application';
+export const TYPE_MINECRAFT_SERVER = 'minecraft-server';
diff --git a/src/components/dev/apps/reducer.js b/src/components/dev/apps/reducer.js
new file mode 100644
index 0000000..4b0a535
--- /dev/null
+++ b/src/components/dev/apps/reducer.js
@@ -0,0 +1,29 @@
+// @flow
+import { SET_AVAILABLE } from './actions';
+import type { OauthAppResponse } from 'services/api/oauth';
+
+export type Apps = {
+    +available: Array<OauthAppResponse>,
+};
+
+const defaults: Apps = {
+    available: [],
+};
+
+export default function apps(
+    state: Apps = defaults,
+    {type, payload}: {type: string, payload: ?Object}
+) {
+    switch (type) {
+        case SET_AVAILABLE:
+            return {
+                ...state,
+                available: payload,
+            };
+
+        default:
+            return state || {
+                ...defaults
+            };
+    }
+}
diff --git a/src/components/footerMenu/FooterMenu.js b/src/components/footerMenu/FooterMenu.js
index 35f7b57..c4733f0 100644
--- a/src/components/footerMenu/FooterMenu.js
+++ b/src/components/footerMenu/FooterMenu.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+// @flow
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -10,14 +10,12 @@ import { create as createPopup } from 'components/ui/popup/actions';
 import styles from './footerMenu.scss';
 import messages from './footerMenu.intl.json';
 
-class FooterMenu extends Component {
+class FooterMenu extends Component<{
+    createContactPopup: () => void,
+    createLanguageSwitcherPopup: () => void,
+}> {
     static displayName = 'FooterMenu';
 
-    static propTypes = {
-        createContactPopup: PropTypes.func.isRequired,
-        createLanguageSwitcherPopup: PropTypes.func.isRequired,
-    };
-
     render() {
         return (
             <div className={styles.footerMenu}>
@@ -28,6 +26,10 @@ class FooterMenu extends Component {
                 <a href="#" onClick={this.onContact}>
                     <Message {...messages.contactUs} />
                 </a>
+                {' | '}
+                <Link to="/dev">
+                    <Message {...messages.forDevelopers} />
+                </Link>
 
                 <div className={styles.langTriggerContainer}>
                     <a href="#" className={styles.langTrigger} onClick={this.onLanguageSwitcher}>
diff --git a/src/components/footerMenu/footerMenu.intl.json b/src/components/footerMenu/footerMenu.intl.json
index 3f1edef..a71bef4 100644
--- a/src/components/footerMenu/footerMenu.intl.json
+++ b/src/components/footerMenu/footerMenu.intl.json
@@ -1,5 +1,6 @@
 {
     "rules": "Rules",
     "contactUs": "Contact Us",
-    "siteLanguage": "Site language"
+    "siteLanguage": "Site language",
+    "forDevelopers": "For developers"
 }
diff --git a/src/components/profile/ProfileForm.js b/src/components/profile/ProfileForm.js
index ac6818d..0575d27 100644
--- a/src/components/profile/ProfileForm.js
+++ b/src/components/profile/ProfileForm.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
@@ -9,12 +10,20 @@ import styles from 'components/profile/profileForm.scss';
 
 import messages from './ProfileForm.intl.json';
 
-export class BackButton extends FormComponent {
+export class BackButton extends FormComponent<{
+    to: string,
+}> {
     static displayName = 'BackButton';
 
+    static defaultProps = {
+        to: '/',
+    };
+
     render() {
+        const { to } = this.props;
+
         return (
-            <Link className={styles.backButton} to="/" title={this.formatMessage(messages.back)}>
+            <Link className={styles.backButton} to={to} title={this.formatMessage(messages.back)}>
                 <span className={styles.backIcon} />
                 <span className={styles.backText}>
                     <Message {...messages.back} />
diff --git a/src/components/ui/bsod/BsodMiddleware.js b/src/components/ui/bsod/BsodMiddleware.js
index 355a487..1289bcc 100644
--- a/src/components/ui/bsod/BsodMiddleware.js
+++ b/src/components/ui/bsod/BsodMiddleware.js
@@ -13,7 +13,7 @@ export default function BsodMiddleware(dispatchBsod: Function, logger: Logger) {
                 (resp instanceof InternalServerError
                         && resp.error.code !== ABORT_ERR
                 ) || (resp.originalResponse
-                    && /404|5\d\d/.test((resp.originalResponse.status: string))
+                    && /5\d\d/.test((resp.originalResponse.status: string))
                 )
             )) {
                 dispatchBsod();
diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss
index 333fbd8..8297422 100644
--- a/src/components/ui/buttons.scss
+++ b/src/components/ui/buttons.scss
@@ -47,7 +47,7 @@
     composes: button;
 
     height: 30px;
-    padding: 0 7px;
+    padding: 0 15px;
     font-size: 14px;
     line-height: 30px;
 }
@@ -75,6 +75,7 @@
 @include button-theme('darkBlue', $dark_blue);
 @include button-theme('lightViolet', $light_violet);
 @include button-theme('violet', $violet);
+@include button-theme('red', $red);
 
 .block {
     display: block;
@@ -90,3 +91,8 @@
     outline: none;
     pointer-events: none;
 }
+
+.black.disabled {
+    background: #95A5A6;
+    cursor: default;
+}
diff --git a/src/components/ui/collapse/Collapse.js b/src/components/ui/collapse/Collapse.js
new file mode 100644
index 0000000..359149a
--- /dev/null
+++ b/src/components/ui/collapse/Collapse.js
@@ -0,0 +1,85 @@
+// @flow
+import React, { Component } from 'react';
+import { Motion, spring } from 'react-motion';
+
+import MeasureHeight from 'components/MeasureHeight';
+
+import styles from './collapse.scss';
+
+import type { Node } from 'react';
+
+type Props = {
+    isOpened?: bool,
+    children: Node,
+    onRest: () => void,
+};
+
+export default class Collapse extends Component<Props, {
+    height: number,
+    wasInitialized: bool,
+}> {
+    state = {
+        height: 0,
+        wasInitialized: false,
+    };
+
+    static defaultProps = {
+        onRest: () => {},
+    };
+
+    componentWillReceiveProps(nextProps: Props) {
+        if (this.props.isOpened !== nextProps.isOpened && !this.state.wasInitialized) {
+            this.setState({
+                wasInitialized: true,
+            });
+        }
+    }
+
+    render() {
+        // TODO: @SleepWalker сейчас при первой отрисовке можно увидеть дёргание родительского блока. Надо пофиксить.
+        const { isOpened, children, onRest } = this.props;
+        const { height, wasInitialized } = this.state;
+
+        return (
+            <div className={styles.overflow}>
+                <MeasureHeight
+                    state={this.shouldMeasureHeight()}
+                    onMeasure={this.onUpdateHeight}
+                >
+                    <Motion
+                        style={{
+                            top: wasInitialized ? spring(isOpened ? 0 : -height) : -height,
+                        }}
+                        onRest={onRest}
+                    >
+                        {({top}) => (
+                            <div
+                                className={styles.content}
+                                style={{
+                                    marginTop: top,
+                                    visibility: wasInitialized ? 'inherit' : 'hidden',
+                                    // height: wasInitialized ? 'auto' : 0,
+                                }}
+                            >
+                                {children}
+                            </div>
+                        )}
+                    </Motion>
+                </MeasureHeight>
+            </div>
+        );
+    }
+
+    onUpdateHeight = (height: number) => {
+        this.setState({
+            height,
+        });
+    };
+
+    shouldMeasureHeight = () => {
+        return [
+            this.props.isOpened,
+            this.state.wasInitialized,
+        ].join('');
+    };
+}
diff --git a/src/components/ui/collapse/collapse.scss b/src/components/ui/collapse/collapse.scss
new file mode 100644
index 0000000..ed69d50
--- /dev/null
+++ b/src/components/ui/collapse/collapse.scss
@@ -0,0 +1,9 @@
+@import '~components/ui/colors.scss';
+
+.overflow {
+    overflow: hidden;
+}
+
+.content {
+
+}
diff --git a/src/components/ui/collapse/index.js b/src/components/ui/collapse/index.js
new file mode 100644
index 0000000..940f5df
--- /dev/null
+++ b/src/components/ui/collapse/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { default } from './Collapse';
diff --git a/src/components/ui/form/Button.js b/src/components/ui/form/Button.js
index dcbdfbb..0a8bbe9 100644
--- a/src/components/ui/form/Button.js
+++ b/src/components/ui/form/Button.js
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import type { ComponentType } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,19 +10,21 @@ import { COLOR_GREEN } from 'components/ui';
 import FormComponent from './FormComponent';
 
 import type { Color } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 
-export default class Button extends FormComponent {
-    props: {
-        label: string | {id: string},
-        block: bool,
-        small: bool,
-        loading: bool,
-        className: string,
-        color: Color
-    };
-
+export default class Button extends FormComponent<{
+    label: string | MessageDescriptor,
+    block?: bool,
+    small?: bool,
+    loading?: bool,
+    className?: string,
+    color?: Color,
+    disabled?: bool,
+    component?: string | ComponentType<any>,
+} | HTMLButtonElement> {
     static defaultProps = {
-        color: COLOR_GREEN
+        color: COLOR_GREEN,
+        component: 'button',
     };
 
     render() {
@@ -29,23 +32,27 @@ export default class Button extends FormComponent {
             color,
             block,
             small,
+            disabled,
             className,
             loading,
             label,
+            component: ComponentProp,
             ...restProps
         } = this.props;
 
         return (
-            <button
+            <ComponentProp
                 className={classNames(buttons[color], {
                     [buttons.loading]: loading,
                     [buttons.block]: block,
-                    [buttons.smallButton]: small
+                    [buttons.smallButton]: small,
+                    [buttons.disabled]: disabled,
                 }, className)}
+                disabled={disabled}
                 {...restProps}
             >
                 {this.formatMessage(label)}
-            </button>
+            </ComponentProp>
         );
     }
 }
diff --git a/src/components/ui/form/Checkbox.js b/src/components/ui/form/Checkbox.js
index 36ed59b..5426950 100644
--- a/src/components/ui/form/Checkbox.js
+++ b/src/components/ui/form/Checkbox.js
@@ -1,31 +1,27 @@
-import PropTypes from 'prop-types';
+// @flow
 import React from 'react';
 
 import classNames from 'classnames';
 
-import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
+import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 import { omit } from 'functions';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-export default class Checkbox extends FormInputComponent {
-    static displayName = 'Checkbox';
+import type { Color, Skin } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 
-    static propTypes = {
-        color: PropTypes.oneOf(colors),
-        skin: PropTypes.oneOf(skins),
-        label: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]).isRequired
-    };
+export default class Checkbox extends FormInputComponent<{
+    color: Color,
+    skin: Skin,
+    label: string | MessageDescriptor,
+}> {
+    static displayName = 'Checkbox';
 
     static defaultProps = {
         color: COLOR_GREEN,
-        skin: SKIN_DARK
+        skin: SKIN_DARK,
     };
 
     render() {
@@ -34,13 +30,13 @@ export default class Checkbox extends FormInputComponent {
 
         label = this.formatMessage(label);
 
-        const props = omit(this.props, Object.keys(Checkbox.propTypes));
+        const props = omit(this.props, ['color', 'skin', 'label']);
 
         return (
-            <div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}>
-                <label className={styles.checkboxContainer}>
+            <div className={classNames(styles[`${color}MarkableRow`], styles[`${skin}MarkableRow`])}>
+                <label className={styles.markableContainer}>
                     <input ref={this.setEl}
-                        className={styles.checkboxInput}
+                        className={styles.markableInput}
                         type="checkbox"
                         {...props}
                     />
diff --git a/src/components/ui/form/Input.js b/src/components/ui/form/Input.js
index 5311f66..307f1f4 100644
--- a/src/components/ui/form/Input.js
+++ b/src/components/ui/form/Input.js
@@ -1,57 +1,56 @@
-import PropTypes from 'prop-types';
+// @flow
 import React from 'react';
 
 import classNames from 'classnames';
 
 import { uniqueId, omit } from 'functions';
+import copy from 'services/copy';
 import icons from 'components/ui/icons.scss';
-import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
+import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-export default class Input extends FormInputComponent {
-    static displayName = 'Input';
+import type { Skin, Color } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 
-    static propTypes = {
-        placeholder: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]),
-        label: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]),
-        error: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.shape({
-                type: PropTypes.string.isRequired,
-                payload: PropTypes.object.isRequired
-            })
-        ]),
-        icon: PropTypes.string,
-        skin: PropTypes.oneOf(skins),
-        color: PropTypes.oneOf(colors),
-        center: PropTypes.bool
-    };
+let copiedStateTimeout;
+
+export default class Input extends FormInputComponent<{
+    skin: Skin,
+    color: Color,
+    center: bool,
+    disabled: bool,
+    label?: string | MessageDescriptor,
+    placeholder?: string | MessageDescriptor,
+    error?: string | {type: string, payload: string},
+    icon?: string,
+    copy?: bool,
+}, {
+    wasCopied: bool,
+}> {
+    static displayName = 'Input';
 
     static defaultProps = {
         color: COLOR_GREEN,
-        skin: SKIN_DARK
+        skin: SKIN_DARK,
+        center: false,
+        disabled: false,
+    };
+
+    state = {
+        wasCopied: false,
     };
 
     render() {
         const { color, skin, center } = this.props;
-        let { icon, label } = this.props;
+        let { icon, label, copy } = this.props;
+        const { wasCopied } = this.state;
 
         const props = omit({
             type: 'text',
-            ...this.props
-        }, Object.keys(Input.propTypes).filter((prop) => prop !== 'placeholder'));
+            ...this.props,
+        }, ['label', 'error', 'skin', 'color', 'center', 'icon', 'copy']);
 
         if (label) {
             if (!props.id) {
@@ -77,6 +76,19 @@ export default class Input extends FormInputComponent {
             );
         }
 
+        if (copy) {
+            copy = (
+                <div
+                    className={classNames(styles.copyIcon, {
+                        [icons.clipboard]: !wasCopied,
+                        [icons.checkmark]: wasCopied,
+                        [styles.copyCheckmark]: wasCopied,
+                    })}
+                    onClick={this.onCopy}
+                />
+            );
+        }
+
         return (
             <div className={baseClass}>
                 {label}
@@ -92,6 +104,7 @@ export default class Input extends FormInputComponent {
                         {...props}
                     />
                     {icon}
+                    {copy}
                 </div>
                 {this.renderError()}
             </div>
@@ -106,4 +119,15 @@ export default class Input extends FormInputComponent {
         this.el.focus();
         setTimeout(this.el.focus.bind(this.el), 10);
     }
+
+    onCopy = async () => {
+        try {
+            clearTimeout(copiedStateTimeout);
+            await copy(this.getValue());
+            this.setState({wasCopied: true});
+            copiedStateTimeout = setTimeout(() => this.setState({wasCopied: false}), 2000);
+        } catch (err) {
+            // it's okay
+        }
+    };
 }
diff --git a/src/components/ui/form/LinkButton.js b/src/components/ui/form/LinkButton.js
new file mode 100644
index 0000000..452494c
--- /dev/null
+++ b/src/components/ui/form/LinkButton.js
@@ -0,0 +1,14 @@
+// @flow
+import React from 'react';
+import type {ElementProps} from 'react';
+import { Link } from 'react-router-dom';
+
+import Button from './Button';
+
+export default function LinkButton(props: ElementProps<typeof Button> | ElementProps<typeof Link>) {
+    const {to, ...restProps} = props;
+
+    return (
+        <Button component={Link} to={to} {...restProps} />
+    );
+}
diff --git a/src/components/ui/form/Radio.js b/src/components/ui/form/Radio.js
new file mode 100644
index 0000000..0d6fbb7
--- /dev/null
+++ b/src/components/ui/form/Radio.js
@@ -0,0 +1,58 @@
+// @flow
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
+import { omit } from 'functions';
+
+import styles from './form.scss';
+import FormInputComponent from './FormInputComponent';
+
+import type { Color, Skin } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
+
+export default class Radio extends FormInputComponent<{
+    color: Color,
+    skin: Skin,
+    label: string | MessageDescriptor,
+}> {
+    static displayName = 'Radio';
+
+    static defaultProps = {
+        color: COLOR_GREEN,
+        skin: SKIN_DARK,
+    };
+
+    render() {
+        const { color, skin } = this.props;
+        let { label } = this.props;
+
+        label = this.formatMessage(label);
+
+        const props = omit(this.props, ['color', 'skin', 'label']);
+
+        return (
+            <div className={classNames(styles[`${color}MarkableRow`], styles[`${skin}MarkableRow`])}>
+                <label className={styles.markableContainer}>
+                    <input ref={this.setEl}
+                        className={styles.markableInput}
+                        type="radio"
+                        {...props}
+                    />
+                    <div className={styles.radio} />
+                    {label}
+                </label>
+                {this.renderError()}
+            </div>
+        );
+    }
+
+    getValue() {
+        return this.el.checked ? 1 : 0;
+    }
+
+    focus() {
+        this.el.focus();
+    }
+}
diff --git a/src/components/ui/form/TextArea.js b/src/components/ui/form/TextArea.js
index 58a322d..c2d7e06 100644
--- a/src/components/ui/form/TextArea.js
+++ b/src/components/ui/form/TextArea.js
@@ -1,38 +1,38 @@
-import PropTypes from 'prop-types';
+// @flow
 import React from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 
 import classNames from 'classnames';
 
 import { uniqueId, omit } from 'functions';
-import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
+import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-export default class TextArea extends FormInputComponent {
-    static displayName = 'TextArea';
+import type { Skin, Color } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 
-    static propTypes = {
-        placeholder: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]),
-        label: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]),
-        error: PropTypes.string,
-        skin: PropTypes.oneOf(skins),
-        color: PropTypes.oneOf(colors)
-    };
+type TextareaAutosizeProps = {
+    onHeightChange?: (number, TextareaAutosizeProps) => void,
+    useCacheForDOMMeasurements?: bool,
+    minRows?: number,
+    maxRows?: number,
+    inputRef?: (HTMLTextAreaElement) => void,
+} | HTMLTextAreaElement;
+
+export default class TextArea extends FormInputComponent<{
+    placeholder?: string | MessageDescriptor,
+    label?: string | MessageDescriptor,
+    error?: string,
+    skin: Skin,
+    color: Color,
+} | TextareaAutosizeProps> {
+    static displayName = 'TextArea';
 
     static defaultProps = {
         color: COLOR_GREEN,
-        skin: SKIN_DARK
+        skin: SKIN_DARK,
     };
 
     render() {
@@ -41,8 +41,8 @@ export default class TextArea extends FormInputComponent {
 
         const props = omit({
             type: 'text',
-            ...this.props
-        }, Object.keys(TextArea.propTypes).filter((prop) => prop !== 'placeholder'));
+            ...this.props,
+        }, ['label', 'error', 'skin', 'color']);
 
         if (label) {
             if (!props.id) {
@@ -64,7 +64,7 @@ export default class TextArea extends FormInputComponent {
             <div className={styles.formRow}>
                 {label}
                 <div className={styles.textAreaContainer}>
-                    <textarea ref={this.setEl}
+                    <TextareaAutosize inputRef={this.setEl}
                         className={classNames(
                             styles.textArea,
                             styles[`${skin}TextField`],
diff --git a/src/components/ui/form/form.scss b/src/components/ui/form/form.scss
index 6f8f522..f244a21 100644
--- a/src/components/ui/form/form.scss
+++ b/src/components/ui/form/form.scss
@@ -94,6 +94,23 @@
     @include form-transition();
 }
 
+.copyIcon {
+    position: absolute;
+    right: 5px;
+    top: 10px;
+
+    padding: 5px;
+    cursor: pointer;
+
+    font-size: 20px;
+
+    transition: .25s;
+}
+
+.copyCheckmark {
+    color: $green!important;
+}
+
 .darkTextField {
     background: $black;
 
@@ -106,11 +123,32 @@
     ~ .textFieldIcon {
         border-color: lighter($black);
     }
+
+    ~ .copyIcon {
+        color: #999;
+        background: $black;
+
+        &:hover {
+            background: lighter($black);
+        }
+    }
 }
 
 .lightTextField {
     background: #fff;
 
+    &:disabled {
+        background: #DCD8CD;
+
+        ~ .copyIcon {
+            background: #dcd8ce;
+
+            &:hover {
+                background: #EBE8E2;
+            }
+        }
+    }
+
     &::placeholder {
         opacity: 1;
         color: #aaa;
@@ -120,6 +158,15 @@
     ~ .textFieldIcon {
         border-color: #dcd8cd;
     }
+
+    ~ .copyIcon {
+        color: #AAA;
+        background: #fff;
+
+        &:hover {
+            background: #F5F5F5;
+        }
+    }
 }
 
 .textFieldLabel {
@@ -151,9 +198,10 @@
 }
 
 .textArea {
-    height: 150px;
+    height: auto; // unset .textField height
+    min-height: 50px;
     padding: 5px 10px;
-    resize: vertical;
+    resize: none;
     position: relative;
 }
 
@@ -169,23 +217,23 @@
 @include input-theme('violet', $violet);
 
 /**
- * Checkbox
+ * Markable is our common name for checkboxes and radio buttons
  */
-@mixin checkbox-theme($themeName, $color) {
-    .#{$themeName}CheckboxRow {
-        composes: checkboxRow;
+@mixin markable-theme($themeName, $color) {
+    .#{$themeName}MarkableRow {
+        composes: markableRow;
 
-        .checkboxContainer {
+        .markableContainer {
             &:hover {
-                .checkbox {
+                .mark {
                     border-color: $color;
                 }
             }
         }
 
-        .checkboxInput {
+        .markableInput {
             &:checked {
-                + .checkbox {
+                + .mark {
                     background: $color;
                     border-color: $color;
                 }
@@ -194,12 +242,11 @@
     }
 }
 
-.checkboxRow {
+.markableRow {
     height: 22px;
-    margin-top: 15px;
 }
 
-.checkboxContainer {
+.markableContainer {
     display: inline-block;
     position: relative;
     padding-left: 27px;
@@ -211,7 +258,7 @@
     cursor: pointer;
 }
 
-.checkboxPosition {
+.markPosition {
     position: absolute;
     box-sizing: border-box;
     left: 0;
@@ -222,12 +269,12 @@
     height: 22px;
 }
 
-.checkboxInput {
-    composes: checkboxPosition;
+.markableInput {
+    composes: markPosition;
     opacity: 0;
 
     &:checked {
-        + .checkbox {
+        + .mark {
             &:before {
                 opacity: 1;
             }
@@ -235,8 +282,8 @@
     }
 }
 
-.checkbox {
-    composes: checkboxPosition;
+.mark {
+    composes: markPosition;
     composes: checkmark from 'components/ui/icons.scss';
 
     border: 2px #dcd8cd solid;
@@ -254,21 +301,31 @@
     }
 }
 
-.lightCheckboxRow {
-    .checkboxContainer {
+.checkbox {
+    composes: mark;
+}
+
+.radio {
+    composes: mark;
+
+    border-radius: 50%;
+}
+
+.lightMarkableRow {
+    .markableContainer {
         color: #666;
     }
 }
 
-.darkCheckboxRow {
-    .checkboxContainer {
+.darkMarkableRow {
+    .markableContainer {
         color: #fff;
     }
 }
 
-@include checkbox-theme('green', $green);
-@include checkbox-theme('blue', $blue);
-@include checkbox-theme('red', $red);
+@include markable-theme('green', $green);
+@include markable-theme('blue', $blue);
+@include markable-theme('red', $red);
 
 .isFormLoading {
     // TODO: надо бы разнести from и input на отдельные модули,
diff --git a/src/components/ui/form/index.js b/src/components/ui/form/index.js
index b73ffce..fa3dab5 100644
--- a/src/components/ui/form/index.js
+++ b/src/components/ui/form/index.js
@@ -1,7 +1,9 @@
 import Input from './Input';
 import TextArea from './TextArea';
 import Checkbox from './Checkbox';
+import Radio from './Radio';
 import Button from './Button';
+import LinkButton from './LinkButton';
 import Form from './Form';
 import FormModel from './FormModel';
 import Dropdown from './Dropdown';
@@ -12,7 +14,9 @@ export {
     Input,
     TextArea,
     Button,
+    LinkButton,
     Checkbox,
+    Radio,
     Form,
     FormModel,
     Dropdown,
diff --git a/src/icons/webfont/clipboard.svg b/src/icons/webfont/clipboard.svg
new file mode 100755
index 0000000..0bbc4bf
--- /dev/null
+++ b/src/icons/webfont/clipboard.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path d="M17.119 2.134h-2.222v2.133h2.222v-2.133zM19.341 7.467h-6.665c-0.623 0-1.12-0.48-1.12-1.067v-2.134c0-0.587 0.498-1.067 1.12-1.067h0.053c-0.036-0.177-0.053-0.355-0.053-0.533 0-1.476 1.475-2.667 3.324-2.667s3.341 1.191 3.341 2.667c0 0.178-0.036 0.356-0.072 0.533h0.072c0.606 0 1.102 0.48 1.102 1.067v2.133c0 0.587-0.497 1.067-1.102 1.067zM27.11 32h-22.219c-1.226 0-2.222-0.96-2.222-2.134v-23.466c0-1.173 0.996-2.133 2.222-2.133h5.564v2.667c0 0.889 0.409 1.6 0.925 1.6h9.243c0.517 0 0.925-0.71 0.925-1.6v-2.667h5.564c1.226 0 2.222 0.96 2.222 2.134v23.466c-0 1.174-0.997 2.134-2.223 2.134z"/>
+</svg>
diff --git a/src/index.scss b/src/index.scss
index 66eb317..dcb3b59 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -25,10 +25,11 @@ b {
     font-weight: $font-weight-bold;
 }
 
-a {
+a, .textLink {
     color: #444;
     border-bottom: 1px dotted #444;
     text-decoration: none;
+    cursor: pointer;
     transition: .25s;
 
     &:hover {
diff --git a/src/pages/dev/ApplicationsListPage.js b/src/pages/dev/ApplicationsListPage.js
new file mode 100644
index 0000000..80d0f94
--- /dev/null
+++ b/src/pages/dev/ApplicationsListPage.js
@@ -0,0 +1,61 @@
+// @flow
+import React, { Component } from 'react';
+
+import ApplicationsIndex from 'components/dev/apps/ApplicationsIndex';
+
+import type { User } from 'components/user';
+import type { OauthAppResponse } from 'services/api/oauth';
+
+class ApplicationsListPage extends Component<{
+    user: User,
+    apps: Array<OauthAppResponse>,
+    fetchAvailableApps: () => Promise<*>,
+    deleteApp: (string) => Promise<*>,
+    resetApp: (string, bool) => Promise<*>,
+}, {
+    isLoading: bool,
+}> {
+    static displayName = 'ApplicationsListPage';
+
+    state = {
+        appsList: [],
+        isLoading: false,
+    };
+
+    componentWillMount() {
+        !this.props.user.isGuest && this.loadApplicationsList();
+    }
+
+    render() {
+        const { user, apps, resetApp, deleteApp } = this.props;
+        const { isLoading } = this.state;
+
+        return (
+            <ApplicationsIndex
+                displayForGuest={user.isGuest}
+                applications={apps}
+                isLoading={isLoading}
+                deleteApp={deleteApp}
+                resetApp={resetApp}
+            />
+        );
+    }
+
+    loadApplicationsList = async () => {
+        this.setState({isLoading: true});
+        await this.props.fetchAvailableApps();
+        this.setState({isLoading: false});
+    };
+}
+
+import { connect } from 'react-redux';
+import { fetchAvailableApps, resetApp, deleteApp } from 'components/dev/apps/actions';
+
+export default connect((state) => ({
+    user: state.user,
+    apps: state.apps.available,
+}), {
+    fetchAvailableApps,
+    resetApp,
+    deleteApp,
+})(ApplicationsListPage);
diff --git a/src/pages/dev/CreateNewApplicationPage.js b/src/pages/dev/CreateNewApplicationPage.js
new file mode 100644
index 0000000..99bca79
--- /dev/null
+++ b/src/pages/dev/CreateNewApplicationPage.js
@@ -0,0 +1,71 @@
+// @flow
+import React, { Component } from 'react';
+
+import { FormModel } from 'components/ui/form';
+
+import ApplicationForm from 'components/dev/apps/applicationForm/ApplicationForm';
+
+import oauth from 'services/api/oauth';
+import { browserHistory } from 'services/history';
+
+import type {OauthAppResponse} from 'services/api/oauth';
+
+const app: OauthAppResponse = {
+    clientId: '',
+    clientSecret: '',
+    countUsers: 0,
+    createdAt: 0,
+    type: '',
+    name: '',
+    description: '',
+    websiteUrl: '',
+    redirectUri: '',
+    minecraftServerIp: '',
+};
+
+export default class CreateNewApplicationPage extends Component<{}, {
+    type: ?string,
+}> {
+    static displayName = 'CreateNewApplicationPage';
+
+    state = {
+        type: null,
+    };
+
+    form = new FormModel();
+
+    render() {
+        return (
+            <ApplicationForm
+                form={this.form}
+                displayTypeSwitcher
+                onSubmit={this.onSubmit}
+                type={this.state.type}
+                setType={this.setType}
+                app={app}
+            />
+        );
+    }
+
+    onSubmit = async () => {
+        const { form } = this;
+        const { type } = this.state;
+        if (!type) {
+            throw new Error('Form was submitted without specified type');
+        }
+
+        form.beginLoading();
+        const result = await oauth.create(type, form.serialize());
+        form.endLoading();
+
+        this.goToMainPage(result.data.clientId);
+    };
+
+    setType = (type: string) => {
+        this.setState({
+            type,
+        });
+    };
+
+    goToMainPage = (hash?: string) => browserHistory.push(`/dev/applications${hash ? `#${hash}` : ''}`);
+}
diff --git a/src/pages/dev/DevPage.js b/src/pages/dev/DevPage.js
new file mode 100644
index 0000000..f35e838
--- /dev/null
+++ b/src/pages/dev/DevPage.js
@@ -0,0 +1,30 @@
+// @flow
+import React, { Component } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+
+import styles from './dev.scss';
+
+import ApplicationsListPage from './ApplicationsListPage';
+import CreateNewApplicationPage from './CreateNewApplicationPage';
+import UpdateApplicationPage from './UpdateApplicationPage';
+
+import { FooterMenu } from 'components/footerMenu';
+
+export default class DevPage extends Component<{}> {
+    render() {
+        return (
+            <div className={styles.container}>
+                <Switch>
+                    <Route path="/dev/applications" exact component={ApplicationsListPage} />
+                    <Route path="/dev/applications/new" exact component={CreateNewApplicationPage} />
+                    <Route path="/dev/applications/:clientId" component={UpdateApplicationPage} />
+                    <Redirect to="/dev/applications" />
+                </Switch>
+
+                <div className={styles.footer}>
+                    <FooterMenu />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/pages/dev/UpdateApplicationPage.js b/src/pages/dev/UpdateApplicationPage.js
new file mode 100644
index 0000000..f00ffdf
--- /dev/null
+++ b/src/pages/dev/UpdateApplicationPage.js
@@ -0,0 +1,113 @@
+// @flow
+import React, { Component } from 'react';
+
+import { FormModel } from 'components/ui/form';
+
+import ApplicationForm from 'components/dev/apps/applicationForm/ApplicationForm';
+
+import { browserHistory } from 'services/history';
+import oauth from 'services/api/oauth';
+import loader from 'services/loader';
+
+import PageNotFound from 'pages/404/PageNotFound';
+
+import type { OauthAppResponse } from 'services/api/oauth';
+
+type MatchType = {
+    match: {
+        params: {
+            clientId: string,
+        },
+    },
+};
+
+class UpdateApplicationPage extends Component<{
+    app: ?OauthAppResponse,
+    fetchApp: (string) => Promise<*>,
+} & MatchType, {
+    isNotFound: bool,
+}> {
+    static displayName = 'UpdateApplicationPage';
+
+    form = new FormModel();
+
+    state = {
+        isNotFound: false,
+    };
+
+    componentWillMount() {
+        this.props.app === null && this.fetchApp();
+    }
+
+    render() {
+        const { app } = this.props;
+        if (this.state.isNotFound) {
+            return (
+                <PageNotFound />
+            );
+        }
+
+        if (!app) {
+            return (<div/>);
+        }
+
+        return (
+            <ApplicationForm
+                form={this.form}
+                onSubmit={this.onSubmit}
+                app={app}
+                type={app.type}
+            />
+        );
+    }
+
+    async fetchApp() {
+        const { fetchApp, match } = this.props;
+        try {
+            loader.show();
+            await fetchApp(match.params.clientId);
+        } catch (resp) {
+            const { status } = resp.originalResponse;
+            if (status === 403) {
+                this.goToMainPage();
+                return;
+            }
+
+            if (status === 404) {
+                this.setState({
+                    isNotFound: true,
+                });
+                return;
+            }
+
+            throw resp;
+        } finally {
+            loader.hide();
+        }
+    }
+
+    onSubmit = async () => {
+        const { form } = this;
+        const { app } = this.props;
+        if (!app || !app.clientId) {
+            throw new Error('Form has an invalid state');
+        }
+
+        form.beginLoading();
+        const result = await oauth.update(app.clientId, form.serialize());
+        form.endLoading();
+
+        this.goToMainPage(result.data.clientId);
+    };
+
+    goToMainPage = (hash?: string) => browserHistory.push(`/dev/applications${hash ? `#${hash}` : ''}`);
+}
+
+import { connect } from 'react-redux';
+import { getApp, fetchApp } from 'components/dev/apps/actions';
+
+export default connect((state, props: MatchType) => ({
+    app: getApp(state, props.match.params.clientId),
+}), {
+    fetchApp,
+})(UpdateApplicationPage);
diff --git a/src/pages/dev/dev.scss b/src/pages/dev/dev.scss
new file mode 100644
index 0000000..52c6ef3
--- /dev/null
+++ b/src/pages/dev/dev.scss
@@ -0,0 +1,18 @@
+.container {
+    padding: 55px 0 65px;
+}
+
+.footer {
+    width: 100%;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+
+    text-align: center;
+}
+
+@media (max-width: 720px) {
+    .container {
+        padding-top: 20px;
+    }
+}
diff --git a/src/pages/root/RootPage.js b/src/pages/root/RootPage.js
index 6ac79c2..98b8061 100644
--- a/src/pages/root/RootPage.js
+++ b/src/pages/root/RootPage.js
@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import AuthPage from 'pages/auth/AuthPage';
 import ProfilePage from 'pages/profile/ProfilePage';
 import RulesPage from 'pages/rules/RulesPage';
+import DevPage from 'pages/dev/DevPage';
 import PageNotFound from 'pages/404/PageNotFound';
 import { ScrollIntoView } from 'components/ui/scroll';
 import PrivateRoute from 'containers/PrivateRoute';
@@ -83,6 +84,7 @@ class RootPage extends Component<{
                             <PrivateRoute path="/profile" component={ProfilePage} />
                             <Route path="/404" component={PageNotFound} />
                             <Route path="/rules" component={RulesPage} />
+                            <Route path="/dev" component={DevPage} />
                             <AuthFlowRoute exact path="/" component={ProfilePage} />
                             <AuthFlowRoute path="/" component={AuthPage} />
                             <Route component={PageNotFound} />
diff --git a/src/reducers.js b/src/reducers.js
index 67a321d..c749f1d 100644
--- a/src/reducers.js
+++ b/src/reducers.js
@@ -6,6 +6,7 @@ import accounts from 'components/accounts/reducer';
 import i18n from 'components/i18n/reducer';
 import popup from 'components/ui/popup/reducer';
 import bsod from 'components/ui/bsod/reducer';
+import apps from 'components/dev/apps/reducer';
 
 export default combineReducers({
     bsod,
@@ -13,5 +14,6 @@ export default combineReducers({
     user,
     accounts,
     i18n,
-    popup
+    popup,
+    apps,
 });
diff --git a/src/services/api/oauth.js b/src/services/api/oauth.js
index 77a59ef..6f3ba12 100644
--- a/src/services/api/oauth.js
+++ b/src/services/api/oauth.js
@@ -1,15 +1,39 @@
+// @flow
 /* eslint camelcase: off */
 import request from 'services/request';
 
+export type OauthAppResponse = {
+    clientId: string,
+    clientSecret: string,
+    type: string,
+    name: string,
+    websiteUrl: string,
+    createdAt: number,
+    // fields for 'application' type
+    countUsers?: number,
+    description?: string,
+    redirectUri?: string,
+    // fields for 'minecraft-server' type
+    minecraftServerIp?: string,
+};
+
+type FormPayloads = {
+    name?: string,
+    description?: string,
+    websiteUrl?: string,
+    redirectUri?: string,
+    minecraftServerIp?: string,
+};
+
 export default {
-    validate(oauthData) {
+    validate(oauthData: Object) {
         return request.get(
             '/api/oauth2/v1/validate',
             getOAuthRequest(oauthData)
         ).catch(handleOauthParamsValidation);
     },
 
-    complete(oauthData, params = {}) {
+    complete(oauthData: Object, params: Object = {}) {
         const query = request.buildQuery(getOAuthRequest(oauthData));
 
         return request.post(
@@ -25,20 +49,44 @@ export default {
             }
 
             if (resp.status === 401 && resp.name === 'Unauthorized') {
-                const error = new Error('Unauthorized');
+                const error: Object = new Error('Unauthorized');
                 error.unauthorized = true;
                 throw error;
             }
 
             if (resp.statusCode === 401 && resp.error === 'accept_required') {
-                const error = new Error('Permissions accept required');
+                const error: Object = new Error('Permissions accept required');
                 error.acceptRequired = true;
                 throw error;
             }
 
             return handleOauthParamsValidation(resp);
         });
-    }
+    },
+
+    create(type: string, formParams: FormPayloads): Promise<{success: bool, data: OauthAppResponse}> {
+        return request.post(`/api/v1/oauth2/${type}`, formParams);
+    },
+
+    update(clientId: string, formParams: FormPayloads): Promise<{success: bool, data: OauthAppResponse}> {
+        return request.put(`/api/v1/oauth2/${clientId}`, formParams);
+    },
+
+    getApp(clientId: string): Promise<OauthAppResponse> {
+        return request.get(`/api/v1/oauth2/${clientId}`);
+    },
+
+    getAppsByUser(userId: number): Promise<Array<OauthAppResponse>> {
+        return request.get(`/api/v1/accounts/${userId}/oauth2/clients`);
+    },
+
+    reset(clientId: string, regenerateSecret: bool = false): Promise<{success: bool, data: OauthAppResponse}> {
+        return request.post(`/api/v1/oauth2/${clientId}/reset${regenerateSecret ? '?regenerateSecret' : ''}`);
+    },
+
+    delete(clientId: string): Promise<{success: bool}> {
+        return request.delete(`/api/v1/oauth2/${clientId}`);
+    },
 };
 /**
  * @param {object} oauthData
diff --git a/src/services/copy.js b/src/services/copy.js
new file mode 100644
index 0000000..4a5b749
--- /dev/null
+++ b/src/services/copy.js
@@ -0,0 +1,18 @@
+// @flow
+import copyToClipboard from 'copy-to-clipboard';
+
+/**
+ * Simple wrapper to copy-to-clipboard library, that adds support
+ * for the new navigator.clipboard API.
+ *
+ * @param {string} content
+ * @return {Promise<*>}
+ */
+export default async function copy(content: string): Promise<void> {
+    if (navigator.clipboard) {
+        // $FlowFixMe there is no typing for navigator.clipboard
+        return navigator.clipboard.writeText(content);
+    }
+
+    return copyToClipboard(content);
+}
diff --git a/src/services/errorsDict/errorsDict.intl.json b/src/services/errorsDict/errorsDict.intl.json
index fa32e5b..59fcd97 100644
--- a/src/services/errorsDict/errorsDict.intl.json
+++ b/src/services/errorsDict/errorsDict.intl.json
@@ -32,5 +32,7 @@
     "accountNotActivated": "The account is not activated",
     "accountBanned": "Account is blocked",
     "emailNotFound": "Specified E‑mail is not found",
-    "accountAlreadyActivated": "This account is already activated"
+    "accountAlreadyActivated": "This account is already activated",
+    "redirectUriRequired": "Redirect URI is required",
+    "redirectUriInvalid": "Redirect URI is invalid"
 }
diff --git a/src/services/errorsDict/errorsDict.js b/src/services/errorsDict/errorsDict.js
index 1171b3d..d2edb73 100644
--- a/src/services/errorsDict/errorsDict.js
+++ b/src/services/errorsDict/errorsDict.js
@@ -86,6 +86,9 @@ const errorsMap = {
     'error.captcha_required': () => <Message {...messages.captchaRequired} />,
     'error.captcha_invalid': () => errorsMap['error.captcha_required'](),
 
+    'error.redirectUri_required': () => <Message {...messages.redirectUriRequired} />,
+    'error.redirectUri_invalid': () => <Message {...messages.redirectUriInvalid} />,
+
     suggestResetPassword: () => (
         <span>
             <br/>
diff --git a/src/services/loader.js b/src/services/loader.js
index c1d8619..5209698 100644
--- a/src/services/loader.js
+++ b/src/services/loader.js
@@ -1,9 +1,16 @@
+// On page initialization loader is already visible, so initial value is 1
+let stack = 1;
+
 export default {
     show() {
-        document.getElementById('loader').classList.add('is-active');
+        if (++stack !== 1) {
+            document.getElementById('loader').classList.add('is-active');
+        }
     },
 
     hide() {
-        document.getElementById('loader').classList.remove('is-active');
+        if (--stack === 0) {
+            document.getElementById('loader').classList.remove('is-active');
+        }
     }
 };
diff --git a/src/services/request/request.js b/src/services/request/request.js
index 54435c7..76c96a6 100644
--- a/src/services/request/request.js
+++ b/src/services/request/request.js
@@ -14,6 +14,15 @@ type Middleware = {
     catch?: () => Promise<*>
 };
 
+const buildOptions = (method: string, data?: Object, options: Object) => ({
+    method,
+    headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+    },
+    body: buildQuery(data),
+    ...options,
+});
+
 export default {
     /**
      * @param {string} url
@@ -23,14 +32,7 @@ export default {
      * @return {Promise}
      */
     post<T>(url: string, data?: Object, options: Object = {}): Promise<Resp<T>> {
-        return doFetch(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-            },
-            body: buildQuery(data),
-            ...options
-        });
+        return doFetch(url, buildOptions('POST', data, options));
     },
 
     /**
@@ -54,14 +56,18 @@ export default {
      * @return {Promise}
      */
     delete<T>(url: string, data?: Object, options: Object = {}): Promise<Resp<T>> {
-        return doFetch(url, {
-            method: 'DELETE',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-            },
-            body: buildQuery(data),
-            ...options
-        });
+        return doFetch(url, buildOptions('DELETE', data, options));
+    },
+
+    /**
+     * @param {string} url
+     * @param {object} [data] - request data
+     * @param {object} [options] - additional options for fetch or middlewares
+     *
+     * @return {Promise}
+     */
+    put<T>(url: string, data?: Object, options: Object = {}): Promise<Resp<T>> {
+        return doFetch(url, buildOptions('PUT', data, options));
     },
 
     /**
@@ -87,7 +93,7 @@ export default {
      */
     addMiddleware(middleware: Middleware) {
         middlewareLayer.add(middleware);
-    }
+    },
 };
 
 const checkStatus = (resp: Response) => resp.status >= 200 && resp.status < 300
diff --git a/yarn.lock b/yarn.lock
index 88aabdc..83da62c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1785,6 +1785,12 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+copy-to-clipboard@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  dependencies:
+    toggle-selection "^1.0.3"
+
 core-js@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-0.6.1.tgz#1b4970873e8101bf8c435af095faa9024f4b9b58"
@@ -5552,6 +5558,12 @@ react-test-renderer@^15.5.4:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
+react-textarea-autosize@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.0.0.tgz#31e44dc7f40aef4fb140dcc8b8c4e1b9cd15c8e3"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-transform-catch-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
@@ -6658,6 +6670,10 @@ to-fast-properties@^1.0.0, to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"