Auth Refactor part 2

client/coral-admin/src/components/ForgotPassword.css

@@ -0,0 +1,20 @@
+
+.header, .cta, .success {
+  text-align: center;
+  font-size: 16px;
+}
+
+.success {
+  cursor: pointer;
+  padding: 8px 14px;
+}
+
+.signInLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.signInLink:hover {
+  text-decoration: underline;
+}

client/coral-admin/src/components/ForgotPassword.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ForgotPassword.css';
+import { Button, TextField, Alert, Success } from 'coral-ui';
+
+class ForgotPassword extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleEmailChange = e => this.props.onEmailChange(e.target.value);
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+  };
+
+  handleSignInLink = e => {
+    e.preventDefault();
+    this.props.onSignInLink();
+  };
+
+  renderSuccess() {
+    return (
+      <div className={styles.success} onClick={this.handleSignInLink}>
+        {this.props.success}{' '}
+        <a
+          className={styles.signInLink}
+          href="#"
+          onClick={this.handleSignInLink}
+        >
+          Sign in
+        </a>
+        <Success />
+      </div>
+    );
+  }
+
+  renderForm() {
+    const { email, errorMessage } = this.props;
+    return (
+      <form onSubmit={this.handleSubmit}>
+        {errorMessage && <Alert>{errorMessage}</Alert>}
+        <TextField
+          label="Email Address"
+          value={email}
+          onChange={this.handleEmailChange}
+        />
+        <Button type="submit" cStyle="black" full>
+          Reset Password
+        </Button>
+        <p className={styles.cta}>
+          Go back to{' '}
+          <a
+            href="#"
+            className={styles.signInLink}
+            onClick={this.handleSignInLink}
+          >
+            Sign In
+          </a>
+          .
+        </p>
+      </form>
+    );
+  }
+
+  render() {
+    return this.props.success ? this.renderSuccess() : this.renderForm();
+  }
+}
+
+ForgotPassword.propTypes = {
+  success: PropTypes.bool.isRequired,
+  email: PropTypes.string.isRequired,
+  onEmailChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string.isRequired,
+  onSignInLink: PropTypes.func.isRequired,
+};
+
+export default ForgotPassword;

client/coral-admin/src/components/Login.css

@@ -1,37 +1,18 @@
 .layout {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.loginLayout {
   max-width: 400px;
   margin: 0 auto;
 }
 
-.loginHeader, .loginCTA, .forgotPasswordCTA, .passwordRequestSuccess {
+.header, .cta {
   text-align: center;
   font-size: 16px;
 }
 
-.forgotPasswordLink, .signInLink {
-  color: blue;
-  font-weight: normal;
-  text-decoration: none;
-}
-
-.forgotPasswordLink:hover, .signInLink:hover {
-  text-decoration: underline;
-}
-
 .layout h1 {
   font-size: 40px;
 }
 
-.loginHeader {
+.header {
   font-size: 30px;
 }
 
-.passwordRequestSuccess {
-  cursor: pointer;
-  padding: 8px 14px;
-}

client/coral-admin/src/components/Login.js

@@ -1,89 +1,37 @@
-import React from 'react';
+import React, { Component } from 'react';
+import SignIn from '../containers/SignIn';
+import ForgotPassword from '../containers/ForgotPassword';
 import PropTypes from 'prop-types';
-import Layout from 'coral-admin/src/components/Layout';
 import styles from './Login.css';
-import { Button, TextField, Alert } from 'coral-ui';
+import Layout from 'coral-admin/src/components/Layout';
 import cn from 'classnames';
 
-class AdminLogin extends React.Component {
-  constructor(props) {
-    super(props);
+class LoginContainer extends Component {
+  renderForm() {
+    return this.props.forgotPassword ? (
+      <ForgotPassword onSignInLink={this.props.onSignInLink} />
+    ) : (
+      <SignIn onForgotPasswordLink={this.props.onForgotPasswordLink} />
+    );
   }
 
-  handleForgotPassword = e => {
-    e.preventDefault();
-    this.props.onForgotPassword();
-  };
-  handleEmailChange = e => this.props.onEmailChange(e.target.value);
-  handlePasswordChange = e => this.props.onPasswordChange(e.target.value);
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit();
-  };
-
   render() {
-    const { email, password, errorMessage } = this.props;
     return (
       <Layout fixedDrawer restricted={true}>
-        <div className={cn(styles.loginLayout, 'talk-admin-login')}>
-          <h1 className={styles.loginHeader}>Team sign in</h1>
-          <p className={styles.loginCTA}>
-            Sign in to interact with your community.
-          </p>
-          <form
-            className="talk-admin-login-sign-in"
-            onSubmit={this.handleSubmit}
-          >
-            {errorMessage && <Alert>{errorMessage}</Alert>}
-            <TextField
-              id="email"
-              label="Email Address"
-              value={email}
-              onChange={this.handleEmailChange}
-            />
-            <TextField
-              id="password"
-              label="Password"
-              value={password}
-              onChange={this.handlePasswordChange}
-              type="password"
-            />
-            <div style={{ height: 10 }} />
-            <Button
-              className="talk-admin-login-sign-in-button"
-              type="submit"
-              cStyle="black"
-              full
-            >
-              Sign In
-            </Button>
-            <p className={styles.forgotPasswordCTA}>
-              Forgot your password?{' '}
-              <a
-                href="#"
-                className={styles.forgotPasswordLink}
-                onClick={this.handleForgotPassword}
-              >
-                Request a new one.
-              </a>
-            </p>
-          </form>
+        <div className={cn(styles.layout, 'talk-admin-login')}>
+          <h1 className={styles.header}>Team sign in</h1>
+          <p className={styles.cta}>Sign in to interact with your community.</p>
+          {this.renderForm()}
         </div>
       </Layout>
     );
   }
 }
 
-AdminLogin.propTypes = {
-  email: PropTypes.string,
-  password: PropTypes.string,
-  onEmailChange: PropTypes.func,
-  onPasswordChange: PropTypes.func,
-  onForgotPassword: PropTypes.func,
-  onSubmit: PropTypes.func,
-  errorMessage: PropTypes.string,
-  requireRecaptcha: PropTypes.string,
+LoginContainer.propTypes = {
+  forgotPassword: PropTypes.bool.isRequired,
+  onForgotPasswordLink: PropTypes.func.isRequired,
+  onSignInLink: PropTypes.func.isRequired,
 };
 
-export default AdminLogin;
+export default LoginContainer;

client/coral-admin/src/components/SignIn.css

@@ -0,0 +1,14 @@
+.forgotPasswordCTA {
+  text-align: center;
+  font-size: 16px;
+}
+
+.forgotPasswordLink:hover {
+  text-decoration: underline;
+}
+
+.forgotPasswordLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}

client/coral-admin/src/components/SignIn.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './SignIn.css';
+import { Button, TextField, Alert } from 'coral-ui';
+
+class SignIn extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleForgotPasswordLink = e => {
+    e.preventDefault();
+    this.props.onForgotPasswordLink();
+  };
+  handleEmailChange = e => this.props.onEmailChange(e.target.value);
+  handlePasswordChange = e => this.props.onPasswordChange(e.target.value);
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+  };
+
+  render() {
+    const { email, password, errorMessage } = this.props;
+    return (
+      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
+        {errorMessage && <Alert>{errorMessage}</Alert>}
+        <TextField
+          id="email"
+          label="Email Address"
+          value={email}
+          onChange={this.handleEmailChange}
+        />
+        <TextField
+          id="password"
+          label="Password"
+          value={password}
+          onChange={this.handlePasswordChange}
+          type="password"
+        />
+        <div style={{ height: 10 }} />
+        <Button
+          className="talk-admin-login-sign-in-button"
+          type="submit"
+          cStyle="black"
+          full
+        >
+          Sign In
+        </Button>
+        <p className={styles.forgotPasswordCTA}>
+          Forgot your password?{' '}
+          <a
+            href="#"
+            className={styles.forgotPasswordLink}
+            onClick={this.handleForgotPasswordLink}
+          >
+            Request a new one.
+          </a>
+        </p>
+      </form>
+    );
+  }
+}
+
+SignIn.propTypes = {
+  email: PropTypes.string.isRequired,
+  password: PropTypes.string.isRequired,
+  onEmailChange: PropTypes.func.isRequired,
+  onPasswordChange: PropTypes.func.isRequired,
+  onForgotPasswordLink: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string.isRequired,
+  requireRecaptcha: PropTypes.bool.isRequired,
+};
+
+export default SignIn;