API & Client: registration controls

mpwo_client/src/components/App.css

@@ -1,5 +1,5 @@
 .App {
-  /*text-align: center;*/
+  text-align: center;
 }
 
 .App-logo {
@@ -27,6 +27,10 @@
   to { transform: rotate(360deg); }
 }
 
+.card {
+  text-align: left;
+}
+
 .page-title {
   font-size: 2em;
   margin: 1em;

mpwo_client/src/components/User/Form.jsx

@@ -1,10 +1,13 @@
 import React from 'react'
-
+import { Helmet } from 'react-helmet'
 
 export default function Form (props) {
   return (
     <div>
-      <h1>{props.formType}</h1>
+      <Helmet>
+        <title>mpwo - {props.formType}</title>
+      </Helmet>
+      <h1 className="page-title">{props.formType}</h1>
       <div className="container">
       <div className="row">
         <div className="col-md-3" />
@@ -13,7 +16,7 @@ export default function Form (props) {
           <form onSubmit={event =>
             props.handleUserFormSubmit(event, props.formType)}
           >
-          {props.formType === 'Register' &&
+            {props.formType === 'Register' &&
             <div className="form-group">
               <input
                 name="username"
@@ -24,16 +27,16 @@ export default function Form (props) {
                 onChange={props.onHandleFormChange}
               />
             </div>
-          }
-          <div className="form-group">
-            <input
-              name="email"
-              className="form-control input-lg"
-              type="email"
-              placeholder="Enter an email address"
-              required
-              onChange={props.onHandleFormChange}
-            />
+            }
+            <div className="form-group">
+              <input
+                name="email"
+                className="form-control input-lg"
+                type="email"
+                placeholder="Enter an email address"
+                required
+                onChange={props.onHandleFormChange}
+              />
             </div>
             <div className="form-group">
               <input
@@ -45,6 +48,18 @@ export default function Form (props) {
                 onChange={props.onHandleFormChange}
               />
             </div>
+            {props.formType === 'Register' &&
+            <div className="form-group">
+              <input
+                name="password-conf"
+                className="form-control input-lg"
+                type="password"
+                placeholder="Enter password confirmation"
+                required
+                onChange={props.onHandleFormChange}
+              />
+            </div>
+            }
             <input
               type="submit"
               className="btn btn-primary btn-lg btn-block"

mpwo_client/src/components/User/Logout.jsx

@@ -11,7 +11,7 @@ class Logout extends React.Component {
   render() {
     return (
       <div>
-        <p>
+        <p className="App-center">
           You are now logged out.
           Click <Link to="/login">here</Link> to log back in.</p>
       </div>

mpwo_client/src/components/User/UserForm.jsx

@@ -16,6 +16,17 @@ function UserForm(props) {
           { props.message !== '' && (
             <code>{props.message}</code>
           )}
+          { props.messages.length > 0 && (
+            <code>
+              <ul>
+                {props.messages.map(msg => (
+                  <li key={msg.id}>
+                    {msg.value}
+                  </li>
+                ))}
+              </ul>
+            </code>
+          )}
           <Form
             formType={props.formType}
             userForm={props.formData}
@@ -32,6 +43,7 @@ export default connect(
   state => ({
     formData: state.formData,
     message: state.message,
+    messages: state.messages,
   }),
   dispatch => ({
     onHandleFormChange: event => {