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

packages/app/components/auth/password/Password.intl.json

@@ -0,0 +1,7 @@
+{
+  "passwordTitle": "Enter password",
+  "signInButton": "Sign in",
+  "forgotPassword": "Forgot password",
+  "accountPassword": "Account password",
+  "rememberMe": "Remember me on this device"
+}

packages/app/components/auth/password/Password.ts

@@ -0,0 +1,15 @@
+import factory from '../factory';
+import Body from './PasswordBody';
+import messages from './Password.intl.json';
+
+export default factory({
+  title: messages.passwordTitle,
+  body: Body,
+  footer: {
+    color: 'green',
+    label: messages.signInButton,
+  },
+  links: {
+    label: messages.forgotPassword,
+  },
+});

packages/app/components/auth/password/PasswordBody.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import icons from 'app/components/ui/icons.scss';
+import { Input, Checkbox } from 'app/components/ui/form';
+import BaseAuthBody from 'app/components/auth/BaseAuthBody';
+import authStyles from 'app/components/auth/auth.scss';
+
+import styles from './password.scss';
+import messages from './Password.intl.json';
+
+export default class PasswordBody extends BaseAuthBody {
+  static displayName = 'PasswordBody';
+  static panelId = 'password';
+  static hasGoBack = true;
+
+  autoFocusField = 'password';
+
+  render() {
+    const { user } = this.context;
+
+    return (
+      <div>
+        {this.renderErrors()}
+
+        <div className={styles.miniProfile}>
+          <div className={styles.avatar}>
+            {user.avatar ? (
+              <img src={user.avatar} />
+            ) : (
+              <span className={icons.user} />
+            )}
+          </div>
+          <div className={styles.email}>{user.email || user.username}</div>
+        </div>
+
+        <Input
+          {...this.bindField('password')}
+          icon="key"
+          type="password"
+          required
+          placeholder={messages.accountPassword}
+        />
+
+        <div className={authStyles.checkboxInput}>
+          <Checkbox
+            {...this.bindField('rememberMe')}
+            defaultChecked
+            label={messages.rememberMe}
+          />
+        </div>
+      </div>
+    );
+  }
+}

packages/app/components/auth/password/password.scss

@@ -0,0 +1,22 @@
+@import '~app/components/ui/fonts.scss';
+
+.avatar {
+  width: 90px;
+  height: 90px;
+  font-size: 90px;
+  line-height: 1;
+  margin: 0 auto;
+
+  img {
+    width: 100%;
+  }
+}
+
+.email {
+  font-family: $font-family-title;
+  font-size: 18px;
+  color: #fff;
+
+  margin-bottom: 15px;
+  margin-top: 10px;
+}