Merge pull request #1036 from cboard-org/feature/terms-and-privacy

Added terms of service and privacy policy links in the App
cboard-org · Sep 13, 2021 · ac7ff5a · ac7ff5a
2 parents 5ad4404 + f3f44c5
commit ac7ff5a
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 59 deletions.
diff --git a/src/components/Account/SignUp/SignUp.component.js b/src/components/Account/SignUp/SignUp.component.js
@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Formik } from 'formik';
+import { Formik, ErrorMessage } from 'formik';
 import classNames from 'classnames';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
 import { TextField } from '../../UI/FormItems';
 import LoadingIcon from '../../UI/LoadingIcon';
 import validationSchema from './validationSchema';
@@ -68,63 +70,105 @@ export class SignUp extends Component {
           >
             <Typography color="inherit">{signUpStatus.message}</Typography>
           </div>
-          {signUpStatus &&
-            !signUpStatus.success && (
-              <Formik
-                onSubmit={this.handleSubmit}
-                validationSchema={validationSchema}
-              >
-                {({ errors, handleChange, handleSubmit }) => (
-                  <form className="SignUp__form" onSubmit={handleSubmit}>
-                    <TextField
-                      name="name"
-                      label={intl.formatMessage(messages.name)}
-                      error={errors.name}
-                      onChange={handleChange}
-                    />
-                    <TextField
-                      name="email"
-                      label={intl.formatMessage(messages.email)}
-                      error={errors.email}
-                      onChange={handleChange}
-                    />
-                    <TextField
-                      type="password"
-                      name="password"
-                      label={intl.formatMessage(messages.createYourPassword)}
-                      error={errors.password}
-                      onChange={handleChange}
-                    />
-                    <TextField
-                      type="password"
-                      name="passwordConfirm"
-                      label={intl.formatMessage(messages.confirmYourPassword)}
-                      error={errors.passwordConfirm}
-                      onChange={handleChange}
-                    />
-
-                    <DialogActions>
-                      <Button
-                        color="primary"
-                        disabled={isButtonDisabled}
-                        onClick={onClose}
-                      >
-                        <FormattedMessage {...messages.cancel} />
-                      </Button>
-                      <Button
-                        type="submit"
-                        disabled={isButtonDisabled}
-                        variant="contained"
+          {signUpStatus && !signUpStatus.success && (
+            <Formik
+              onSubmit={this.handleSubmit}
+              validationSchema={validationSchema}
+              initialValues={{
+                isTermsAccepted: false
+              }}
+            >
+              {({ errors, handleChange, handleSubmit }) => (
+                <form className="SignUp__form" onSubmit={handleSubmit}>
+                  <TextField
+                    name="name"
+                    label={intl.formatMessage(messages.name)}
+                    error={errors.name}
+                    onChange={handleChange}
+                  />
+                  <TextField
+                    name="email"
+                    label={intl.formatMessage(messages.email)}
+                    error={errors.email}
+                    onChange={handleChange}
+                  />
+                  <TextField
+                    type="password"
+                    name="password"
+                    label={intl.formatMessage(messages.createYourPassword)}
+                    error={errors.password}
+                    onChange={handleChange}
+                  />
+                  <TextField
+                    type="password"
+                    name="passwordConfirm"
+                    label={intl.formatMessage(messages.confirmYourPassword)}
+                    error={errors.passwordConfirm}
+                    onChange={handleChange}
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        type="checkbox"
+                        name="isTermsAccepted"
+                        onChange={handleChange}
                         color="primary"
-                      >
-                        {isSigningUp && <LoadingIcon />}
-                        <FormattedMessage {...messages.signMeUp} />
-                      </Button>
-                    </DialogActions>
-                  </form>
-                )}
-              </Formik>
-            )}
+                      />
+                    }
+                    label={
+                      <FormattedMessage
+                        {...messages.agreement}
+                        values={{
+                          terms: (
+                            <a
+                              href="https://www.cboard.io/terms-of-use/"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {intl.formatMessage(messages.termsAndConditions)}
+                            </a>
+                          ),
+                          privacy: (
+                            <a
+                              href="https://www.cboard.io/privacy/"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {intl.formatMessage(messages.privacy)}
+                            </a>
+                          )
+                        }}
+                      />
+                    }
+                  />
+                  <ErrorMessage
+                    name="isTermsAccepted"
+                    component="p"
+                    className="SignUp__status--error SignUp__termsError"
+                  />
+
+                  <DialogActions>
+                    <Button
+                      color="primary"
+                      disabled={isButtonDisabled}
+                      onClick={onClose}
+                    >
+                      <FormattedMessage {...messages.cancel} />
+                    </Button>
+                    <Button
+                      type="submit"
+                      disabled={isButtonDisabled}
+                      variant="contained"
+                      color="primary"
+                    >
+                      {isSigningUp && <LoadingIcon />}
+                      <FormattedMessage {...messages.signMeUp} />
+                    </Button>
+                  </DialogActions>
+                </form>
+              )}
+            </Formik>
+          )}
         </DialogContent>
       </Dialog>
     );

diff --git a/src/components/Account/SignUp/SignUp.css b/src/components/Account/SignUp/SignUp.css
@@ -6,6 +6,21 @@
   margin-top: 0.75em;
 }
 
+.SignUp__form > label:not(:first-child) {
+  margin-top: 0.75em;
+  margin-right: 0em;
+}
+
+.SignUp__form > label > span {
+  font-size: 0.85rem;
+  margin-top: 3px;
+  text-align: left;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+}
+
 .SignUp__status {
   padding: 1rem 0;
 }
@@ -17,3 +32,14 @@
 .SignUp__status--error {
   color: #f44336;
 }
+
+.SignUp__termsError {
+  margin: 0;
+  font-size: 0.75rem;
+  margin-top: 3px;
+  text-align: left;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+}
diff --git a/src/components/Account/SignUp/SignUp.messages.js b/src/components/Account/SignUp/SignUp.messages.js
@@ -28,5 +28,17 @@ export default defineMessages({
   signMeUp: {
     id: 'cboard.components.SignUp.signMeUp',
     defaultMessage: 'Sign me up'
+  },
+  agreement: {
+    id: 'cboard.components.SignUp.agreement',
+    defaultMessage: 'I agree with the {terms} and the {privacy}'
+  },
+  termsAndConditions: {
+    id: 'cboard.components.SignUp.termsAndConditions',
+    defaultMessage: 'Terms'
+  },
+  privacy: {
+    id: 'cboard.components.SignUp.privacy',
+    defaultMessage: 'Privacy Policy'
   }
 });
diff --git a/src/components/Account/SignUp/validationSchema.js b/src/components/Account/SignUp/validationSchema.js
@@ -13,7 +13,10 @@ const validationSchema = yup.object().shape({
   email: yup
     .string()
     .email('Invalid email')
-    .required('Required')
+    .required('Required'),
+  isTermsAccepted: yup
+    .bool()
+    .oneOf([true], 'Accept Terms and Policy is required')
 });
 
 export default validationSchema;
diff --git a/src/components/Settings/Export/Export.component.js b/src/components/Settings/Export/Export.component.js
@@ -130,6 +130,7 @@ class Export extends React.Component {
                           <Link
                             href="https://www.cboard.io/help/#HowdoIimportaboardintoCboard"
                             target="_blank"
+                            rel="noopener noreferrer"
                           >
                             Cboard
                           </Link>
@@ -138,6 +139,7 @@ class Export extends React.Component {
                           <Link
                             href="https://www.openboardformat.org/"
                             target="_blank"
+                            rel="noopener noreferrer"
                           >
                             OpenBoard
                           </Link>

diff --git a/src/components/Settings/Import/Import.component.js b/src/components/Settings/Import/Import.component.js
@@ -75,6 +75,7 @@ class Import extends React.Component {
                           <Link
                             href="https://www.cboard.io/help/#HowdoIimportaboardintoCboard"
                             target="_blank"
+                            rel="noopener noreferrer"
                           >
                             Cboard
                           </Link>
@@ -83,6 +84,7 @@ class Import extends React.Component {
                           <Link
                             href="https://www.openboardformat.org/"
                             target="_blank"
+                            rel="noopener noreferrer"
                           >
                             OpenBoard
                           </Link>

diff --git a/src/components/WelcomeScreen/WelcomeScreen.container.js b/src/components/WelcomeScreen/WelcomeScreen.container.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '@material-ui/core/Button';
+import Link from '@material-ui/core/Link';
 import CloseIcon from '@material-ui/icons/Close';
 import IconButton from '../UI/IconButton';
 import {
@@ -145,6 +146,24 @@ export class WelcomeScreen extends Component {
               </Button>
             )}
           </footer>
+          <div className="WelcomeScreen__links">
+            <Link
+              href="https://www.cboard.io/privacy/"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="inherit"
+            >
+              <FormattedMessage {...messages.privacy} />
+            </Link>
+            <Link
+              href="https://www.cboard.io/terms-of-use/"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="inherit"
+            >
+              <FormattedMessage {...messages.terms} />
+            </Link>
+          </div>
         </div>
         <Login
           isDialogOpen={activeView === 'login'}

diff --git a/src/components/WelcomeScreen/WelcomeScreen.css b/src/components/WelcomeScreen/WelcomeScreen.css
@@ -47,7 +47,7 @@
   justify-content: space-between;
   width: calc(50% - 0.5em);
   min-width: 300px;
-  margin: 0 auto 8%;
+  margin: 0 auto 6%;
 }
 
 .WelcomeScreen__footer .WelcomeScreen__button {
@@ -66,6 +66,17 @@
   font-size: 1.1rem !important;
 }
 
+.WelcomeScreen__links {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 4px;
+}
+
+.WelcomeScreen__links > a {
+  font-size: 0.8rem;
+}
+
 .WelcomeScreen__button--google div > span,
 .WelcomeScreen__button--facebook div > span {
   display: inline-block;

diff --git a/src/components/WelcomeScreen/WelcomeScreen.messages.js b/src/components/WelcomeScreen/WelcomeScreen.messages.js
@@ -25,5 +25,13 @@ export default defineMessages({
     id: 'cboard.components.WelcomeScreen.googleLoginErrorAndroid',
     defaultMessage:
       'Sorry. An error occurred during authenticate process. Please try it again'
+  },
+  privacy: {
+    id: 'cboard.components.WelcomeScreen.privacy',
+    defaultMessage: 'Privacy Policy'
+  },
+  terms: {
+    id: 'cboard.components.WelcomeScreen.terms',
+    defaultMessage: 'Terms of service'
   }
 });
diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json
@@ -5,6 +5,8 @@
   "cboard.components.WelcomeScreen.google": "Sign in with Google",
   "cboard.components.WelcomeScreen.facebook": "Sign in with Facebook",
   "cboard.components.WelcomeScreen.googleLoginErrorAndroid": "Sorry. An error occurred during authenticate process. Please try it again",
+  "cboard.components.WelcomeScreen.terms": "Terms",
+  "cboard.components.WelcomeScreen.privacy": "Privacy Policy",
   "cboard.components.WelcomeScreenInformation.heading": "Welcome to Cboard",
   "cboard.components.WelcomeScreenInformation.text": "Cboard helps users with speech and language impairments to communicate with symbols and text-to-speech.",
   "cboard.components.AuthScreenInformation.heading": "Cboard",
@@ -22,6 +24,9 @@
   "cboard.components.SignUp.confirmYourPassword": "Confirm your password",
   "cboard.components.SignUp.cancel": "Cancel",
   "cboard.components.SignUp.signMeUp": "Sign me up",
+  "cboard.components.SignUp.agreement": "I agree with the {terms} and the {privacy}",
+  "cboard.components.SignUp.termsAndConditions": "Terms",
+  "cboard.components.SignUp.privacy": "Privacy Policy",
   "cboard.components.ChangePassword.password": "New Password",
   "cboard.components.ChangePassword.passwordRepeat": "Repeat New Password",
   "cboard.components.ChangePassword.send": "Send",