Refactor PasswordToolPage to use the new layout

src/pages/tools/password-tool.js

@@ -26,12 +26,26 @@ import ApiClient from '../../api/client';
 import { API_HOST } from '../../config';
 import { ActionsTrigger } from '../../triggers';
 import createSelector from '../../selectors/createSelector';
+import currentUserSelector from '../../selectors/currentUser';
 import { addMessage, removeMessage } from '../../actions/messages';
 
 import { ArrayOfMessages as ArrayOfMessagesPropType } from '../../prop-types/messages';
 import SettingsPasswordForm from '../../components/settings/password-form';
 import Messages from '../../components/messages';
 
+import {
+  Page,
+  PageMain,
+  PageBody,
+  PageContent
+} from '../../components/page';
+import SidebarAlt from '../../components/sidebarAlt';
+import Header from '../../components/header';
+import HeaderLogo from '../../components/header-logo';
+import Footer from '../../components/footer';
+import Sidebar from '../../components/sidebar';
+
+
 const WEAK_PASSWORD_MESSAGE = 'Password is weak. Consider adding more words or symbols';
 
 class PasswordToolPage extends React.Component {
@@ -89,28 +103,51 @@ class PasswordToolPage extends React.Component {
   };
 
   render() {
+    const {
+      current_user
+    } = this.props;
+
     return (
       <div>
         <Helmet title="Password tool on " />
-        <SettingsPasswordForm
-          ref={c => this.form = c}
-          onChange={this.handleChange}
-          onSubmit={this.handleSubmit}
-        />
-        <div className="layout__row">
-          <Messages
-            messages={this.props.messages}
-            removeMessage={this.props.actions.removeMessage}
-          />
-        </div>
+        <Header current_user={current_user} is_logged_in={!!current_user.get('id')}>
+          <HeaderLogo small />
+        </Header>
+
+        <Page>
+          <PageMain>
+            <PageBody>
+              <Sidebar />
+              <PageContent>
+                <SettingsPasswordForm
+                  ref={c => this.form = c}
+                  onChange={this.handleChange}
+                  onSubmit={this.handleSubmit}
+                />
+                <div className="layout__row">
+                  <Messages
+                    messages={this.props.messages}
+                    removeMessage={this.props.actions.removeMessage}
+                  />
+                </div>
+              </PageContent>
+              <SidebarAlt />
+            </PageBody>
+          </PageMain>
+        </Page>
+        <Footer />
       </div>
     );
   }
 }
 
 const inputSelector = createSelector(
+  currentUserSelector,
   state => state.get('messages'),
-  messages => ({ messages })
+  (current_user, messages) => ({
+    ...current_user,
+    messages
+  })
 );
 
 const outputSelector = dispatch => ({