Updates

README.md

@@ -1 +1 @@
-# talk-plugin-health-report
+# talk-plugin-auth-checkbox

client/components/TermsAndConditionsField.css

@@ -9,5 +9,10 @@
 }
 
 .fieldContainer {
-  padding: 5px 0;
+  padding: 10px 0;
+  display: flex;
+}
+
+.textLabel {
+ padding-left: 10px;
 }

client/components/TermsAndConditionsField.js

@@ -7,20 +7,20 @@ import cn from 'classnames';
 const TermsLink = () => (
   <a
     className={styles.link}
-    href={t('talk-plugin-health-report.terms-link')}
+    href={t('talk-plugin-auth-checkbox.terms-link')}
     target="_blank"
   >
-    {t('talk-plugin-health-report.terms')}
+    {t('talk-plugin-auth-checkbox.terms')}
   </a>
 );
 
 const PrivacyLink = () => (
   <a
     className={styles.link}
-    href={t('talk-plugin-health-report.privacy-policy-link')}
+    href={t('talk-plugin-auth-checkbox.privacy-policy-link')}
     target="_blank"
   >
-    {t('talk-plugin-health-report.privacy-policy')}
+    {t('talk-plugin-auth-checkbox.privacy-policy')}
   </a>
 );
 
@@ -29,16 +29,15 @@ class TermsAndConditionsField extends React.Component {
   id = 'terms-and-conditions';
 
   componentWillMount() {
-    this.props.disableSubmitSignUpForm();
+    this.props.indicateBlocker();
   }
 
   onChange = ({ target: { checked } }) => {
+    this.setState({ checked });
     if (checked) {
-      this.setState(() => ({ checked }));
-      this.props.enableSubmitSignUpForm();
+      this.props.indicateBlockerResolved();
     } else {
-      this.setState(() => ({ checked }));
-      this.props.disableSubmitSignUpForm();
+      this.props.indicateBlocker();
     }
   };
 
@@ -47,22 +46,28 @@ class TermsAndConditionsField extends React.Component {
       <div
         className={cn(
           styles.fieldContainer,
-          'talk-plugin-health-report-field-container'
+          'talk-plugin-auth-checkbox-field-container'
         )}
       >
         <Checkbox
           checked={this.state.checked}
-          className="talk-plugin-health-report-checkbox"
+          className="talk-plugin-auth-checkbox-checkbox"
           onChange={this.onChange}
           id={this.id}
         />
-        <label id={this.id} className="talk-plugin-health-report-label">
-          {t('talk-plugin-health-report.copy')}
+        <div
+          id={this.id}
+          className={cn(
+            styles.textLabel,
+            'talk-plugin-auth-checkbox-text-label'
+          )}
+        >
+          {t('talk-plugin-auth-checkbox.copy')}
           <TermsLink />
-          {t('talk-plugin-health-report.and')}
+          {t('talk-plugin-auth-checkbox.and')}
           <PrivacyLink />
-          {t('talk-plugin-health-report.from')}
-        </label>
+          {t('talk-plugin-auth-checkbox.from')}
+        </div>
       </div>
     );
   }

client/index.js

@@ -3,7 +3,7 @@ import translations from './translations.yml';
 
 export default {
   slots: {
-    'talkPluginAuth-formField': [TermsAndConditionsField],
+    'talkPluginAuth.formField': [TermsAndConditionsField],
   },
   translations,
 };

client/translations.yml

@@ -1,5 +1,5 @@
 en:
-  talk-plugin-health-report:
+  talk-plugin-auth-checkbox:
     copy: I agree to the Mozilla
     and: and
     terms: Terms of Service
@@ -8,7 +8,7 @@ en:
     terms-link: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
     privacy-policy-link: https://www.mozilla.org/en-US/privacy/websites/
 es:
-  talk-plugin-health-report:
+  talk-plugin-auth-checkbox:
     copy: Estoy de acuerdo con
     and: y
     terms: los Terminos y Condiciones
@@ -17,7 +17,7 @@ es:
     terms-link: https://www.mozilla.org/es-ES/about/legal/terms/mozilla/
     privacy-policy-link: https://www.mozilla.org/es-ES/privacy/websites/
 fr:
-  talk-plugin-health-report:
+  talk-plugin-auth-checkbox:
     copy: J'accepte 
     and: et
     terms: les conditions d'utilisation 
@@ -26,7 +26,7 @@ fr:
     terms-link: https://www.mozilla.org/fr/about/legal/terms/mozilla/
     privacy-policy-link: https://www.mozilla.org/fr/privacy/websites/
 de:
-  talk-plugin-health-report:
+  talk-plugin-auth-checkbox:
     copy: Ich stimme
     and: und
     terms: den Allgemeinen Geschäftsbedingungen