.has-danger form updates

source/js/components/join/join.jsx

@@ -83,9 +83,20 @@ export default class JoinUs extends React.Component {
    */
   validatesAsEmail(input) {
     if (!input) {
-      return false;
+      return {
+        errorMessage: `This is a required section.`
+      };
+    }
+
+    let valid = input.match(/[^@]+@[^.@]+(\.[^.@]+)+$/) !== null;
+
+    if (!valid) {
+      return {
+        errorMessage: `Please enter a valid email address.`
+      };
     }
-    return input.match(/[^@]+@[^.@]+(\.[^.@]+)+$/) !== null;
+
+    return valid;
   }
 
   /**
@@ -224,28 +235,39 @@ export default class JoinUs extends React.Component {
    * Render the email field in signup CTA.
    */
   renderEmailField() {
-    let classes = classNames(`mb-2`, {
+    let wrapperClasses = classNames({
       "has-danger":
         (!this.state.apiSuccess &&
           this.state.userTriedSubmitting &&
-          !this.validatesAsEmail(this.email.value)) ||
+          this.validatesAsEmail(this.email.value).errorMessage) ||
         this.state.signupFailed
     });
 
+    let classes = classNames({
+      "position-relative": wrapperClasses !== ``
+    });
+
     return (
-      <div className={classes}>
-        <input
-          type="email"
-          className="form-control"
-          placeholder="Enter email address"
-          ref={el => (this.email = el)}
-          onFocus={evt => this.onInputFocus(evt)}
-        />
+      <div className={wrapperClasses}>
+        <div className={classes}>
+          <input
+            type="email"
+            className="form-control"
+            placeholder="Enter email address"
+            ref={el => (this.email = el)}
+            onFocus={evt => this.onInputFocus(evt)}
+          />
+          {this.state.userTriedSubmitting &&
+            this.validatesAsEmail(this.email.value).errorMessage && (
+              <div className="glyph-container">
+                <span className="form-error-glyph" />
+              </div>
+            )}
+        </div>
         {this.state.userTriedSubmitting &&
-          !this.state.apiSubmitted &&
-          !this.validatesAsEmail(this.email.value) && (
+          this.validatesAsEmail(this.email.value).errorMessage && (
             <p className="body-small form-check form-control-feedback">
-              Please enter your email
+              {this.validatesAsEmail(this.email.value).errorMessage}
             </p>
           )}
         {this.state.signupFailed && (
@@ -288,40 +310,45 @@ export default class JoinUs extends React.Component {
    * Render the privacy field in signup CTA.
    */
   renderPrivacyField() {
-    let classes = classNames(
-      this.props.buttonPosition === `side` ? `mb-2` : `my-3`,
-      {
-        "form-check": true,
-        "has-danger":
-          !this.state.apiSuccess &&
-          this.state.userTriedSubmitting &&
-          !this.privacy.checked
-      }
-    );
+    let classes = classNames(`my-3`, {
+      "form-check": true,
+      "has-danger":
+        !this.state.apiSuccess &&
+        this.state.userTriedSubmitting &&
+        !this.privacy.checked
+    });
 
     return (
       <div className={classes}>
-        <label className="form-check-label">
-          <input
-            type="checkbox"
-            className="form-check-input"
-            id="PrivacyCheckbox"
-            ref={el => (this.privacy = el)}
-          />
-          <p className="d-inline-block body-small my-0">
-            I'm okay with Mozilla handling my info as explained in this{" "}
-            <a href="https://www.mozilla.org/privacy/websites/">
-              Privacy Notice
-            </a>
-          </p>
-          {this.state.userTriedSubmitting &&
-            !this.state.apiSubmitted &&
-            !this.privacy.checked && (
-              <p className="body-small form-check form-control-feedback">
-                Please check this box if you want to proceed
+        <div className="d-flex align-items-start">
+          <div className="mb-0 form-check d-flex align-items-start">
+            <input
+              type="checkbox"
+              className="form-check-input ml-0 mt-0"
+              id="PrivacyCheckbox"
+              ref={el => (this.privacy = el)}
+              required
+            />
+            <label className="form-check-label d-flex align-items-start">
+              <p className="d-inline-block body-small my-0 mr-1 mr-sm-5 mr-md-2 mr-lg-1">
+                I'm okay with Mozilla handling my info as explained in this{" "}
+                <a href="https://www.mozilla.org/privacy/websites/">
+                  Privacy Notice
+                </a>
               </p>
-            )}
-        </label>
+              {this.state.userTriedSubmitting &&
+                !this.state.apiSubmitted &&
+                !this.privacy.checked && (
+                  <span class="form-error-glyph privacy-error d-flex" />
+                )}
+            </label>
+          </div>
+        </div>
+        {this.state.userTriedSubmitting && !this.privacy.checked && (
+          <p className="body-small form-check form-control-feedback mt-0 mb-3">
+            Please check this box if you want to proceed.
+          </p>
+        )}
       </div>
     );
   }

source/js/components/join/join.scss

@@ -2,27 +2,58 @@
   background: inherit;
 
   .has-danger {
-    color: $red;
+    $glyph-container: (
+      "margin-x": 10px,
+      "height": 20px,
+      "width": 13px
+    );
+
+    color: $dark-red;
+
+    .form-control {
+      border: 2px solid $dark-red;
+      padding-right: map-get($glyph-container, "margin-x") * 2 +
+        map-get($glyph-container, "width");
+    }
+
+    .glyph-container {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: map-get($glyph-container, "margin-x");
+      height: map-get($glyph-container, "height");
+      width: map-get($glyph-container, "width");
+      margin: auto;
+    }
+
+    .privacy-error {
+      @media (min-width: $bp-sm) {
+        margin-left: 30px;
+      }
+
+      @media (min-width: $bp-md) {
+        margin-left: 0;
+      }
+    }
   }
 
   .form-control {
     font-family: "Nunito Sans";
     font-weight: 400;
+    color: $black;
   }
 
   .fields-wrapper {
     flex: 1 1 auto;
   }
 
   @at-root .dark-theme & {
-    form {
-      input {
-        border: none;
-      }
+    .form-control-feedback {
+      color: $red;
     }
 
-    .body-small.form-control-feedback {
-      color: $red;
+    .has-danger .form-control {
+      border-color: $red;
     }
   }
 }

source/sass/glyphs.scss

@@ -39,6 +39,14 @@
       top: 2px;
     }
   }
+
+  &.form-error-glyph {
+    &::before {
+      width: 13px;
+      height: 13px;
+      margin-right: 10px;
+    }
+  }
 }
 
 .heart-glyph {
@@ -60,6 +68,10 @@
   @include hoverGlyph("linkedin-hover");
 }
 
+.form-error-glyph {
+  @include compositeGlyph("form-control-error");
+}
+
 .dark-theme {
   .twitter-glyph {
     @include compositeGlyph("twitter-dark-theme");
@@ -90,4 +102,8 @@
     @include compositeGlyph("github-dark-theme");
     @include hoverGlyph("github-dark-theme-hover");
   }
+
+  .form-error-glyph {
+    @include compositeGlyph("form-control-error-dark-theme");
+  }
 }

source/sass/utilities.scss

@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.position-relative {
+  position: relative;
+}
+
 .big-section {
   margin-bottom: 5rem;
 }