Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/profile/changeUsername/ChangeUsername.intl.json

@@ -0,0 +1,6 @@
+{
+  "changeUsernameTitle": "Change nickname",
+  "changeUsernameDescription": "You can change your nickname to any arbitrary value. Remember that it is not recommended to take a nickname of already existing Mojang account.",
+  "changeUsernameWarning": "Be careful: if you playing on the server with nickname binding, then after changing nickname you may lose all your progress.",
+  "changeUsernameButton": "Change nickname"
+}

packages/app/components/profile/changeUsername/ChangeUsername.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+
+import { Input, Button, Form, FormModel } from 'app/components/ui/form';
+import { BackButton } from 'app/components/profile/ProfileForm';
+import styles from 'app/components/profile/profileForm.scss';
+
+import messages from './ChangeUsername.intl.json';
+
+export default class ChangeUsername extends Component {
+  static displayName = 'ChangeUsername';
+
+  static propTypes = {
+    username: PropTypes.string.isRequired,
+    form: PropTypes.instanceOf(FormModel),
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  static get defaultProps() {
+    return {
+      form: new FormModel(),
+    };
+  }
+
+  render() {
+    const { form, username } = this.props;
+
+    return (
+      <Form onSubmit={this.onFormSubmit} form={form}>
+        <div className={styles.contentWithBackButton}>
+          <BackButton />
+
+          <div className={styles.form}>
+            <div className={styles.formBody}>
+              <Message {...messages.changeUsernameTitle}>
+                {pageTitle => (
+                  <h3 className={styles.title}>
+                    <Helmet title={pageTitle} />
+                    {pageTitle}
+                  </h3>
+                )}
+              </Message>
+
+              <div className={styles.formRow}>
+                <p className={styles.description}>
+                  <Message {...messages.changeUsernameDescription} />
+                </p>
+              </div>
+
+              <div className={styles.formRow}>
+                <Input
+                  {...form.bindField('username')}
+                  value={username}
+                  onChange={this.onUsernameChange}
+                  required
+                  skin="light"
+                />
+              </div>
+
+              <div className={styles.formRow}>
+                <p className={styles.description}>
+                  <Message {...messages.changeUsernameWarning} />
+                </p>
+              </div>
+            </div>
+
+            <Button
+              color="green"
+              block
+              label={messages.changeUsernameButton}
+              type="submit"
+            />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  onUsernameChange = event => {
+    this.props.onChange(event.target.value);
+  };
+
+  onFormSubmit = () => {
+    const { form } = this.props;
+
+    this.props.onSubmit(form).catch(resp => {
+      if (resp.errors) {
+        form.setErrors(resp.errors);
+      } else {
+        return Promise.reject(resp);
+      }
+    });
+  };
+}