Adding checkbox, working on the translations

.gitignore

@@ -63,6 +63,7 @@ plugins/*
 !plugins/talk-plugin-viewing-options
 !plugins/talk-plugin-rich-text
 !plugins/talk-plugin-rich-text-pell
+!plugins/talk-plugin-health-report
 
 **/node_modules/*
 yarn-error.log

plugins/talk-plugin-auth/client/login/components/SignUp.js

@@ -122,6 +122,7 @@ class SignUp extends React.Component {
                   id="coralSignUpButton"
                   className={styles.button}
                   full
+                  disabled={!this.props.submitSignUpForm}
                 >
                   {t('talk-plugin-auth.login.sign_up')}
                 </Button>
@@ -175,6 +176,7 @@ SignUp.propTypes = {
   success: PropTypes.bool.isRequired,
   enableSubmitSignUpForm: PropTypes.func.isRequired,
   disableSubmitSignUpForm: PropTypes.func.isRequired,
+  submitSignUpForm: PropTypes.bool.isRequired,
 };
 
 export default SignUp;

plugins/talk-plugin-health-report/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Checkbox } from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+
+const TermsLink = () => (
+  <a href={t('talk-plugin-health-report.termslink')}>
+    {t('talk-plugin-health-report.terms')}
+  </a>
+);
+
+class TermsAndConditionsField extends React.Component {
+  state = { checked: false };
+  id = 'terms-and-conditions';
+
+  componentWillMount() {
+    this.props.disableSubmitSignUpForm();
+  }
+
+  onChange = ({ target: { checked } }) => {
+    if (checked) {
+      this.setState(() => ({ checked }));
+      this.props.enableSubmitSignUpForm();
+    } else {
+      this.setState(() => ({ checked }));
+      this.props.disableSubmitSignUpForm();
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <Checkbox
+          checked={this.state.checked}
+          onChange={this.onChange}
+          id={this.id}
+        />
+        <label id={this.id}>
+          {t('talk-plugin-health-report.copy', <a>hola</a>, TermsLink)}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default TermsAndConditionsField;

plugins/talk-plugin-health-report/client/index.js

@@ -0,0 +1,9 @@
+import TermsAndConditionsField from './components/TermsAndConditionsField';
+import translations from './translations.yml';
+
+export default {
+  slots: {
+    'talkPluginAuth-formField': [TermsAndConditionsField],
+  },
+  translations,
+};

plugins/talk-plugin-health-report/client/translations.yml

@@ -0,0 +1,21 @@
+en:
+  talk-plugin-health-report:
+    copy: I agree to the Mozilla {0} and {1}.
+    terms: Terms of Service
+    termslink: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
+    privacy: https://www.mozilla.org/en-US/privacy/websites/
+es:
+  talk-plugin-health-report:
+    copy: Estoy de acuerdo con los {0} de Mozilla y {1}.
+    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
+    privacy: https://www.mozilla.org/en-US/privacy/websites/
+fr:
+  talk-plugin-health-report:
+    copy: J'accepte les conditions d'utilisation et la politique de confidentialité de Mozilla.
+    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
+    privacy: https://www.mozilla.org/en-US/privacy/websites/
+de:
+  talk-plugin-health-report:
+    copy: J'accepte les conditions d'utilisation et la politique de confidentialité de Mozilla.
+    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
+    privacy: https://www.mozilla.org/en-US/privacy/websites/

plugins/talk-plugin-health-report/index.js

@@ -0,0 +1 @@
+module.exports = {};