feat: add intro text to email sign up page (#39409)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

api-server/server/boot/settings.js

@@ -246,9 +246,7 @@ const updatePrivacyTerms = (req, res, next) => {
     }
     return res.status(200).json({
       type: 'success',
-      message:
-        'We have updated your preferences. ' +
-        'You can now continue using freeCodeCamp!'
+      message: `We have updated your preferences.`
     });
   });
 };

client/src/components/Intro/components/IntroDescription.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link, Spacer } from '../../helpers';
+import { Col } from '@freecodecamp/react-bootstrap';
+import { forumLocation } from '../../../../config/env.json';
+
+import '../intro.css';
+
+function IntroDescription() {
+  return (
+    <Col
+      className='intro-description'
+      md={8}
+      mdOffset={2}
+      sm={10}
+      smOffset={1}
+      xs={12}
+    >
+      <strong>Please slow down and read this.</strong>
+      <Spacer />
+      <p>freeCodeCamp is a proven path to your first software developer job.</p>
+      <p>
+        More than 40,000 people have gotten developer jobs after completing this
+        – including at big companies like Google and Microsoft.
+      </p>
+      <p>
+        If you are new to programming, we recommend you start at the beginning
+        and earn these certifications in order.
+      </p>
+      <p>
+        To earn each certification, build its 5 required projects and get all
+        their tests to pass.
+      </p>
+      <p>
+        You can add these certifications to your résumé or LinkedIn. But more
+        important than the certifications is the practice you get along the way.
+      </p>
+      <p>If you feel overwhelmed, that is normal. Programming is hard.</p>
+      <p>Practice is the key. Practice, practice, practice.</p>
+      <p>
+        And this curriculum will give you thousands of hours of hands-on
+        programming practice.
+      </p>
+      <p>
+        And if you want to learn more math and computer science theory, we also
+        have thousands of hours of video courses on{' '}
+        <Link className='inline' to='https://youtube.com/freecodecamp'>
+          freeCodeCamp's YouTube channel
+        </Link>
+        .
+      </p>
+      <p>
+        If you want to get a developer job or freelance clients, programming
+        skills will be just part of the puzzle. You also need to build your
+        personal network and your reputation as a developer.
+      </p>
+      <p>
+        You can do this on Twitter and GitHub, and also on{' '}
+        <Link className='inline' to={forumLocation}>
+          the freeCodeCamp forum
+        </Link>
+        .
+      </p>
+      <p>Happy coding.</p>
+    </Col>
+  );
+}
+
+IntroDescription.displayName = 'IntroDescription';
+
+export default IntroDescription;

client/src/components/Intro/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { forumLocation } from '../../../config/env.json';
 import { randomQuote } from '../../utils/get-words';
 import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
+import IntroDescription from './components/IntroDescription';
 
 import './intro.css';
 import Login from '../Header/components/Login';
@@ -98,69 +98,16 @@ function Intro({
   } else {
     return (
       <>
-        <Row className='intro-description'>
+        <Row>
           <Col sm={10} smOffset={1} xs={12}>
             <Spacer />
             <h1 className='big-heading text-center'>
               Welcome to freeCodeCamp's curriculum.
             </h1>
           </Col>
-          <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-            <Spacer size={2} />
-            <strong>Please slow down and read this.</strong>
-            <Spacer />
-            <p>
-              freeCodeCamp is a proven path to your first software developer
-              job.
-            </p>
-            <p>
-              More than 40,000 people have gotten developer jobs after
-              completing this – including at big companies like Google and
-              Microsoft.
-            </p>
-            <p>
-              If you are new to programming, we recommend you start at the
-              beginning and earn these certifications in order.
-            </p>
-            <p>
-              To earn each certification, build its 5 required projects and get
-              all their tests to pass.
-            </p>
-            <p>
-              You can add these certifications to your résumé or LinkedIn. But
-              more important than the certifications is the practice you get
-              along the way.
-            </p>
-            <p>If you feel overwhelmed, that is normal. Programming is hard.</p>
-            <p>Practice is the key. Practice, practice, practice.</p>
-            <p>
-              And this curriculum will give you thousands of hours of hands-on
-              programming practice.
-            </p>
-            <p>
-              And if you want to learn more math and computer science theory, we
-              also have thousands of hours of video courses on{' '}
-              <Link className='inline' to='https://youtube.com/freecodecamp'>
-                freeCodeCamp's YouTube channel
-              </Link>
-              .
-            </p>
-            <p>
-              If you want to get a developer job or freelance clients,
-              programming skills will be just part of the puzzle. You also need
-              to build your personal network and your reputation as a developer.
-            </p>
-            <p>
-              You can do this on Twitter and GitHub, and also on{' '}
-              <Link className='inline' to={forumLocation}>
-                the freeCodeCamp forum
-              </Link>
-              .
-            </p>
-            <p>Happy coding.</p>
-            <Spacer />
-          </Col>
-
+          <Spacer size={2} />
+          <IntroDescription />
+          <Spacer />
           <Col sm={8} smOffset={2} xs={12}>
             <Login block={true}>
               Sign in to save your progress (it's free)

client/src/pages/email-sign-up.css

@@ -0,0 +1,12 @@
+.email-sign-up strong,
+.email-sign-up p {
+  font-family: 'Lato', sans-serif;
+  font-size: 1rem;
+}
+
+@media (min-width: 500px) {
+  .email-sign-up strong,
+  .email-sign-up p {
+    font-size: 1.22rem;
+  }
+}

client/src/pages/email-sign-up.js

@@ -3,23 +3,18 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import SectionHeader from '../components/settings/SectionHeader';
+import IntroDescription from '../components/Intro/components/IntroDescription';
 
-import {
-  Row,
-  Col,
-  Button,
-  FormGroup,
-  ControlLabel,
-  Grid,
-  Checkbox
-} from '@freecodecamp/react-bootstrap';
+import { Row, Col, Button, Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { createSelector } from 'reselect';
 
-import { ButtonSpacer } from '../components/helpers';
+import { ButtonSpacer, Spacer } from '../components/helpers';
 import { acceptTerms, userSelector } from '../redux';
 import createRedirect from '../components/createRedirect';
 
+import './email-sign-up.css';
+
 const propTypes = {
   acceptTerms: PropTypes.func.isRequired,
   acceptedPrivacyTerms: PropTypes.bool,
@@ -37,30 +32,6 @@ const mapDispatchToProps = dispatch =>
 const RedirectToLearn = createRedirect('/learn');
 
 class AcceptPrivacyTerms extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      quincyEmail: false
-    };
-    this.createHandleChange = this.createHandleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  createHandleChange(prop) {
-    return () =>
-      this.setState(prevState => ({
-        [prop]: !prevState[prop]
-      }));
-  }
-
-  handleSubmit(e) {
-    e.preventDefault();
-    const { quincyEmail } = this.state;
-
-    return this.props.acceptTerms(quincyEmail);
-  }
-
   componentWillUnmount() {
     // if a user navigates away from here we should set acceptedPrivacyTerms
     // to true (so they do not get pulled back) without changing their email
@@ -72,48 +43,67 @@ class AcceptPrivacyTerms extends Component {
     }
   }
 
+  onClick(isWeeklyEmailAccepted) {
+    this.props.acceptTerms(isWeeklyEmailAccepted);
+  }
+
   render() {
     const { acceptedPrivacyTerms } = this.props;
     if (acceptedPrivacyTerms) {
       return <RedirectToLearn />;
     }
-    const { quincyEmail } = this.state;
+
     return (
       <Fragment>
         <Helmet>
           <title>Email Sign Up | freeCodeCamp.org</title>
         </Helmet>
-        <Grid className='default-page-wrapper'>
+        <Grid className='default-page-wrapper email-sign-up'>
           <SectionHeader>Email Sign Up</SectionHeader>
           <Row>
-            <Col sm={8} smOffset={2} xs={12}>
-              <form onSubmit={this.handleSubmit}>
-                <FormGroup>
-                  <ControlLabel htmlFor='quincy-email'>
-                    Quincy's Emails
-                  </ControlLabel>
-                  <ButtonSpacer />
-                  <Checkbox
-                    checked={quincyEmail}
-                    id='quincy-email'
-                    inline={true}
-                    onChange={this.createHandleChange('quincyEmail')}
-                  >
-                    I want weekly emails from Quincy, freeCodeCamp.org's
-                    founder.
-                  </Checkbox>
-                </FormGroup>
-                <ButtonSpacer />
-                <Button
-                  block={true}
-                  bsSize='lg'
-                  bsStyle='primary'
-                  className='big-cta-btn'
-                  type='submit'
-                >
-                  Continue to freeCodeCamp.org
-                </Button>
-              </form>
+            <IntroDescription />
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <hr />
+            </Col>
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <strong>
+                - Quincy Larson, the teacher who founded freeCodeCamp.org
+              </strong>
+              <Spacer />
+              <p>
+                By the way, each Friday I send an email with 5 links about
+                programming and computer science. I send these to about 4
+                million people. Would you like me to send this to you, too?
+              </p>
+              <Spacer />
+            </Col>
+
+            <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
+              <Button
+                block={true}
+                bsSize='lg'
+                bsStyle='primary'
+                className='big-cta-btn'
+                onClick={() => this.onClick(true)}
+              >
+                Yes
+              </Button>
+              <ButtonSpacer />
+            </Col>
+            <Col md={4} sm={5} xs={12}>
+              <Button
+                block={true}
+                bsSize='lg'
+                bsStyle='primary'
+                className='big-cta-btn'
+                onClick={() => this.onClick(false)}
+              >
+                No thanks
+              </Button>
+              <ButtonSpacer />
+            </Col>
+            <Col xs={12}>
+              <Spacer />
             </Col>
           </Row>
         </Grid>