feat(honesty): Add honesty settings

client/src/client-only-routes/ShowSettings.js

@@ -18,12 +18,14 @@ import Privacy from '../components/settings/Privacy';
 import Email from '../components/settings/Email';
 import Internet from '../components/settings/Internet';
 import Portfolio from '../components/settings/Portfolio';
+import Honesty from '../components/settings/Honesty';
 
 const propTypes = {
   about: PropTypes.string,
   email: PropTypes.string,
   githubProfile: PropTypes.string,
   isEmailVerified: PropTypes.bool,
+  isHonest: PropTypes.bool,
   linkedin: PropTypes.string,
   location: PropTypes.string,
   name: PropTypes.string,
@@ -45,6 +47,7 @@ const propTypes = {
   toggleNightMode: PropTypes.func.isRequired,
   twitter: PropTypes.string,
   updateInternetSettings: PropTypes.func.isRequired,
+  updateIsHonest: PropTypes.func.isRequired,
   updatePortfolio: PropTypes.func.isRequired,
   updateQuincyEmail: PropTypes.func.isRequired,
   username: PropTypes.string,
@@ -62,6 +65,7 @@ const mapStateToProps = createSelector(
       email,
       sendQuincyEmail,
       isEmailVerified,
+      isHonest,
       picture,
       points,
       name,
@@ -77,6 +81,7 @@ const mapStateToProps = createSelector(
     email,
     sendQuincyEmail,
     isEmailVerified,
+    isHonest,
     showLoading,
     username,
     about,
@@ -99,6 +104,7 @@ const mapDispatchToProps = dispatch =>
       submitNewAbout,
       toggleNightMode: theme => updateUserFlag({ theme }),
       updateInternetSettings: updateUserFlag,
+      updateIsHonest: updateUserFlag,
       updatePortfolio: updateUserFlag,
       updateQuincyEmail: sendQuincyEmail => updateUserFlag({ sendQuincyEmail })
     },
@@ -109,6 +115,7 @@ function ShowSettings(props) {
   const {
     email,
     isEmailVerified,
+    isHonest,
     sendQuincyEmail,
     showLoading,
     username,
@@ -127,7 +134,8 @@ function ShowSettings(props) {
     website,
     updateInternetSettings,
     portfolio,
-    updatePortfolio
+    updatePortfolio,
+    updateIsHonest
   } = props;
 
   if (showLoading) {
@@ -200,9 +208,9 @@ function ShowSettings(props) {
         <Spacer />
         <Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
         <Spacer />
-        {/* <Honesty />
+        <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest}/>
         <Spacer />
-        <CertificationSettings />
+        {/* <CertificationSettings />
         <Spacer />
 <DangerZone /> */}
       </Grid>

client/src/components/settings/Honesty.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Panel } from '@freecodecamp/react-bootstrap';
+
+import FullWidthRow from '../helpers/FullWidthRow';
+import SectionHeader from './SectionHeader';
+import academicPolicy from '../../resources/honesty-policy';
+
+import './honesty.css';
+
+const propTypes = {
+  isHonest: PropTypes.bool,
+  policy: PropTypes.arrayOf(PropTypes.string),
+  updateIsHonest: PropTypes.func.isRequired
+};
+
+class Honesty extends Component {
+  handleAgreeClick = () => this.props.updateIsHonest({ isHonest: true });
+
+  renderAgreeButton = () => (
+    <Button block={true} bsStyle='primary' onClick={this.handleAgreeClick}>
+      Agree
+    </Button>
+  );
+
+  renderIsHonestAgreed = () => (
+    <Panel bsStyle='info' className='agreed btn'>
+      <p>You have accepted our Academic Honesty Policy.</p>
+    </Panel>
+  );
+
+  render() {
+    const { isHonest } = this.props;
+
+    return (
+      <section className='honesty-policy'>
+        <SectionHeader>Academic Honesty Policy</SectionHeader>
+        <FullWidthRow>
+          <Panel className='honesty-panel'>
+            {academicPolicy}
+            <br />
+            {isHonest ? this.renderIsHonestAgreed() : this.renderAgreeButton()}
+          </Panel>
+        </FullWidthRow>
+      </section>
+    );
+  }
+}
+
+Honesty.displayName = 'Honesty';
+Honesty.propTypes = propTypes;
+
+export default Honesty;

client/src/components/settings/honesty.css

@@ -0,0 +1,25 @@
+.honesty-panel p {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.honesty-panel {
+  padding-top: 15px;
+
+}
+
+.honesty-panel .agreed {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  background-color: rgba(0, 100, 0, 0.8);
+  color: #fff;
+  border-color: #006400;
+  margin-bottom: 0px;
+}
+
+.honesty-panel .agreed p {
+  margin-top: 0;
+  margin-bottom: 0;
+}

client/src/pages/academic-honesty.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 
+import honesty from '../resources/honesty-policy';
+
 import Layout from '../components/Layout';
 import Spacer from '../components/helpers/Spacer';
 import FullWidthRow from '../components/helpers/FullWidthRow';
@@ -17,46 +19,7 @@ function AcademicHonesty() {
           <Spacer />
           <h2 className='text-center'>Academic Honesty Policy</h2>
           <hr />
-          <p>
+          {honesty}
-            Before we issue our verified certification to a camper, he or she
-            must accept our Academic Honesty Pledge, which reads:
-          </p>
-          <p>
-            "I understand that plagiarism means copying someone else’s work and
-            presenting the work as if it were my own, without clearly
-            attributing the original author.
-          </p>
-          <p>
-            "I understand that plagiarism is an act of intellectual dishonesty,
-            and that people usually get kicked out of university or fired from
-            their jobs if they get caught plagiarizing.
-          </p>
-          <p>
-            "Aside from using open source libraries such as jQuery and
-            Bootstrap, and short snippets of code which are clearly attributed
-            to their original author, 100% of the code in my projects was
-            written by me, or along with another camper with whom I was pair
-            programming in real time.
-          </p>
-          <p>
-            "I pledge that I did not plagiarize any of my freeCodeCamp.org work.
-            I understand that freeCodeCamp.org’s team will audit my projects to
-            confirm this."
-          </p>
-          <p>
-            In the situations where we discover instances of unambiguous
-            plagiarism, we will replace the camper in question’s certification
-            with a message that "Upon review, this account has been flagged for
-            academic dishonesty."
-          </p>
-          <p>
-            As an academic institution that grants achievement-based
-            certifications, we take academic honesty very seriously. If you have
-            any questions about this policy, or suspect that someone has
-            violated it, you can email{' '}
-            <a href='mailto:team@freecodecamp.org'>team@freecodecamp.org</a>
-            &thinsp;and we will investigate.
-          </p>
         </FullWidthRow>
       </Grid>
     </Layout>

client/src/resources/honesty-policy.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+const policy = [
+  <p>
+    Before we issue our verified certification to a camper, he or she must
+    accept our Academic Honesty Pledge, which reads:
+  </p>,
+  <p>
+    "I understand that plagiarism means copying someone else’s work and
+    presenting the work as if it were my own, without clearly attributing the
+    original author.
+  </p>,
+  <p>
+    "I understand that plagiarism is an act of intellectual dishonesty, and that
+    people usually get kicked out of university or fired from their jobs if they
+    get caught plagiarizing.
+  </p>,
+  <p>
+    "Aside from using open source libraries such as jQuery and Bootstrap, and
+    short snippets of code which are clearly attributed to their original
+    author, 100% of the code in my projects was written by me, or along with
+    another camper with whom I was pair programming in real time.
+  </p>,
+  <p>
+    "I pledge that I did not plagiarize any of my freeCodeCamp.org work. I
+    understand that freeCodeCamp.org’s team will audit my projects to confirm
+    this."
+  </p>,
+  <p>
+    In the situations where we discover instances of unambiguous plagiarism, we
+    will replace the camper in question’s certification with a message that
+    "Upon review, this account has been flagged for academic dishonesty."
+  </p>,
+  <p>
+    As an academic institution that grants achievement-based certifications, we
+    take academic honesty very seriously. If you have any questions about this
+    policy, or suspect that someone has violated it, you can email{' '}
+    <a href='mailto:team@freecodecamp.org'>team@freecodecamp.org</a>
+    &thinsp;and we will investigate.
+  </p>
+].map((el, i) => ({...el, key: `honesty-${i}`}));
+
+export default policy;