style subscription form

1 files changed, 52 insertions, 20 deletions

diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
index 9353e3e..8107358 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -2,19 +2,30 @@ import React, { Component } from 'react'
 
 import { Arrow } from '../nav/viewer.icons'
 
+const initialState = {
+  email: "",
+  agreed: false,
+  subscribed: false,
+}
+
 export default class SubscriptionForm extends Component {
   state = {
-    email: "",
+    ...initialState
   }
   constructor(props) {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleCheckbox = this.handleCheckbox.bind(this)
+    this.handleReset = this.handleReset.bind(this)
   }
   handleChange(e) {
     this.setState({ email: e.target.value })
   }
+  handleCheckbox(e) {
+    this.setState({ agreed: e.target.checked })
+  }
   handleKeyDown(e) {
     // disable tab
     if (e.keyCode === 9) {
@@ -23,26 +34,46 @@ export default class SubscriptionForm extends Component {
   }
   handleSubmit(e) {
     e.preventDefault()
+    if (!this.state.agreed) {
+      return
+    }
+    this.setState({ subscribed: true })
+  }
+  handleReset(e) {
+    this.setState({ ...initialState })
   }
   render() {
     return (
-      <form className="subscription-form" onSubmit={this.handleSubmit}>
+      <form
+        className={this.state.subscribed ? "subscription-form subscribed" : "subscription-form"}
+        onSubmit={this.handleSubmit}
+      >
         <div className="subscription-callout">
           Stay up to date and get notified when the next episode is available
         </div>
-        <input
-          required
-          type="email"
-          name="email"
-          value={this.state.email}
-          placeholder="Email address here"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          onKeyDown={this.handleKeyDown}
-          onChange={this.handleChange}
-        />
-        <label className="subscription-privacy">
+        <div className="subscription-row">
+          <input
+            type="email"
+            name="email"
+            value={this.state.email}
+            placeholder="Email address here"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onKeyDown={this.handleKeyDown}
+            onChange={this.handleChange}
+          />
+          <button className="subscription-submit" onClick={this.handleSubmit}>
+            {'Submit '}
+            <Arrow type='right' />
+          </button>
+        </div>
+        <label className="subscription-privacy checkbox">
+          <input
+            type="checkbox"
+            checked={this.state.agreed}
+            onChange={this.handleCheckbox}
+          />
           <span>
             {"I have read e-flux’s privacy policy "}
             {"and agree that e-flux may send me emails to the email address "}
@@ -51,11 +82,12 @@ export default class SubscriptionForm extends Component {
             <a href="/privacy">privacy policy.</a>
           </span>
         </label>
-        <button onClick={this.handleSubmit}>
-          {'Submit '}
-          <Arrow type='right' />
-        </button>
+        <div className="subscription-thanks">
+          Thanks! You will receive an email soon with next steps.
+          <br />
+          <button className="subscription-reset" onClick={this.handleReset}>OK</button>
+        </div>
       </form>
     )
   }
-}
\ No newline at end of file
+}