Add data policy and logic for checkbox

Brandon Green · jmjackson6880 · commit 3339afedfcda · 2021-04-29T22:14:12.000-04:00
diff --git a/_sass/contributors.scss b/_sass/contributors.scss
@@ -301,8 +301,40 @@
 .contributor-consent-check {
   color: $mid_gray;
   margin-top: 1rem;
+  input[type=checkbox] {
+    display: none;
+  }
+  input[type="checkbox"] + *::before {
+    content: "";
+    display: inline-block;
+    vertical-align: bottom;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-right: 0.3rem;
+    border-radius: 10%;
+    border-style: solid;
+    border-width: 0.1rem;
+    border-color: gray;
+  }
+  input[type="checkbox"]:checked + *::before {
+    content: "✓";
+    color: white;
+    text-align: center;
+    background: $orange;
+    border-color: $orange;
+    font-size: 14px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.please-accept-terms {
+  display: none;
+  color: $orange;
+  font-size: 18px;
 }
 
-#agree:checked {
-  background-color: red;
+input[type=checkbox]:checked {
+background-color: $orange;
 }
diff --git a/ecosystem/contributors.html b/ecosystem/contributors.html
@@ -50,24 +50,21 @@ <h2>Newsletter Sign Up</h2>
             <input type="text" name="Email Address">
             <input type="submit" value="Submit">
             <div class="contributor-consent-check">
-              <input type="checkbox" id="agree" oninvalid="this.setCustomValidity('Please accept the terms and conditions below')" onvalid="this.setCustomValidity('')" required>
-              <label for="agree">I accept the terms and conditions below</label>
+              <input type="checkbox" id="agree" oninvalid="this.setCustomValidity('')" required>
+              <label for="agree">
+                <span>I accept the terms and conditions below</span>
+              </label>
             </div>
           </form>
           <p class="form-success">Thanks! You are now subscribed to the PyTorch Contributors Newsletter.</p>
           <p class="form-fail">There was an error submitting your email address. Please try again.</p>
+          <p class="please-accept-terms">Please accept the terms and conditions below</p>
         </div>
         <p class="email-consent">
-          ☨Brand Domain (send/server) is from or in NA and ROW excluding EU/EEA
-          By submitting your email, you agree to receive technical updates and marketing-related electronic communications from Facebook Inc, including news, events, and updates.
-          You may withdraw your consent and unsubscribe from these at any time, for example, by clicking the unsubscribe link included on our emails.
-          For more information about how Facebook handles your data, please read our Data Policy
-        </p>
-        <p class="email-consent">
-          ☨Brand Domain (send/server) is from or in EU/EEA:
-          By submitting your email, you agree to receive technical updates and marketing-related electronic communications from Facebook Ireland Limited, including news, events, and updates.
-          You may withdraw your consent and unsubscribe from these at any time, for example, by clicking the unsubscribe link included on our emails. For more information about how Facebook handles your data, please read our Data Policy.
+          By submitting your email, you agree to receive technical updates and marketing-related electronic communications from Facebook Inc, and its affiliated businesses, including news, events, and updates.
+          You may withdraw your consent and unsubscribe from these at any time, for example, by clicking the unsubscribe link included on our emails. For more information about how Facebook handles your data, please read our <a href="https://pytorch.org/assets/tos-oss-privacy-policy/fb-oss-privacy-policy.pdf">Data Policy</a>
         </p>
+
         <a id="issue-toggle" class="contributors-button" href="#pytorch-1">View Issues</a>
       </div>
 
@@ -105,4 +102,15 @@ <h2>Join the conversation</h2>
     $(".form-success").hide();
     $(".form-fail").show();
   }
+
+    $('input[type=submit]').on("click", function(e) {
+      var checked = $('input[type=checkbox]').prop('checked');
+      if (!checked) {
+        $(".please-accept-terms").show().fadeOut(4000);
+        e.preventDefault();
+      }else{
+        return;
+      }
+    });
+
 </script>
