feat: added danger zone

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

@@ -26,6 +26,7 @@ import Internet from '../components/settings/Internet';
 import Portfolio from '../components/settings/Portfolio';
 import Honesty from '../components/settings/Honesty';
 import Certification from '../components/settings/Certification';
+import DangerZone from '../components/settings/DangerZone';
 import RedirectHome from '../components/RedirectHome';
 
 const propTypes = {
@@ -254,6 +255,7 @@ function ShowSettings(props) {
             verifyCert={verifyCert}
           />
           <Spacer />
+          <DangerZone />
         </main>
       </Grid>
     </Fragment>

client/src/components/settings/DangerZone.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Alert, Panel } from '@freecodecamp/react-bootstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
+import DeleteModal from './DeleteModal';
+
+import {deleteAccount, resetProgress } from '../../redux/settings';
+
+import './danger-zone.css';
+import ResetModal from './ResetModal';
+
+const propTypes = {
+  deleteAccount: PropTypes.func.isRequired,
+  resetProgress: PropTypes.func.isRequired
+};
+
+const mapStateToProps = () => ({});
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({
+    deleteAccount,
+    resetProgress
+  }, dispatch);
+
+class DangerZone extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reset: false,
+      delete: false
+    };
+  }
+
+  toggleResetModal = () => {
+    return this.setState(state => ({
+      ...state,
+      reset: !state.reset
+    }));
+  }
+
+  toggleDeleteModal = () => {
+    return this.setState(state => ({
+      ...state,
+      delete: !state.delete
+    }));
+  }
+
+  render() {
+    return (
+      <div className='danger-zone'>
+        <FullWidthRow>
+          <Panel>
+            <Spacer />
+            <Alert bsStyle='danger' className='alert-danger-zone'>
+              Please be careful! Changes in this section are permanent.
+            </Alert>
+            <FullWidthRow>
+              <Button
+                block={true}
+                bsSize='lg'
+                bsStyle='danger'
+                className='btn-danger'
+                type='button'
+                onClick={() => this.toggleResetModal()}>
+                Reset all of my progress
+              </Button>
+              <ButtonSpacer />
+              <Button
+                block={true}
+                bsSize='lg'
+                bsStyle='danger'
+                className='btn-danger'
+                type='button'
+                onClick={() => this.toggleDeleteModal()}>
+                Delete my account
+              </Button>
+            </FullWidthRow>
+          </Panel>
+          <ResetModal
+            onHide={() => this.toggleResetModal()}
+            show={this.state.reset} />
+          <DeleteModal
+            onHide={() => this.toggleDeleteModal()}
+            show={this.state.delete} />
+        </FullWidthRow>
+      </div>
+    );
+  }
+}
+
+DangerZone.displayName = 'DangerZone';
+DangerZone.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DangerZone);

client/src/components/settings/DeleteModal.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ButtonSpacer } from '../helpers';
+import { Button, Modal } from '@freecodecamp/react-bootstrap'
+
+import './DangerZone'
+
+const propTypes = {
+  delete: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired,
+  show: PropTypes.bool
+};
+
+function DeleteModal(props) {
+  const { show, onHide } = props;
+  return (
+    <Modal
+      aria-labelledby='modal-title'
+      autoFocus={true}
+      backdrop={true}
+      bsSize='lg'
+      keyboard={true}
+      onHide={onHide}
+      show={show}>
+      <Modal.Header closeButton={true}>
+        <Modal.Title id='modal-title'>Delete My Account</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          This will really delete all your data, including all your progress
+          and account information.
+        </p>
+        <p>
+          We won't be able to recover any of it for you later,
+          even if you change your mind.
+        </p>
+        <p>
+          If there's something we could do better, send us an email instead and
+          we'll do our best: &thinsp;
+          <a href='mailto:team@freecodecamp.org' title='team@freecodecamp.org'>
+            team@freecodecamp.org
+          </a>
+        </p>
+        <hr />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='primary'
+          className='btn-invert'
+          type='button'
+          onClick={props.onHide}>
+          Nevermind, I don't want to delete my account
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='danger'
+          className='btn-danger'
+          type='button'
+          onClick={props.delete}>
+          I am 100% certain. Delete everything related to this account
+        </Button>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+DeleteModal.displayName = 'DeleteModal';
+DeleteModal.propTypes = propTypes;
+
+export default DeleteModal;

client/src/components/settings/ResetModal.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ButtonSpacer } from '../helpers';
+import { Button, Modal } from '@freecodecamp/react-bootstrap'
+
+import './DangerZone'
+
+const propTypes = {
+  reset: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired,
+  show: PropTypes.bool
+};
+
+function ResetModal(props) {
+  const { show, onHide } = props;
+  return (
+    <Modal
+      aria-labelledby='modal-title'
+      autoFocus={true}
+      backdrop={true}
+      bsSize='lg'
+      keyboard={true}
+      onHide={onHide}
+      show={show}>
+      <Modal.Header closeButton={true}>
+        <Modal.Title id='modal-title'>Reset My Progress</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          This will really delete all of your progress, points, completed
+          challenges, our records of your projects, any certifications you have,
+          everything.
+        </p>
+        <p>
+          We won't be able to recover any of it for you later, even if you
+          change your mind.
+        </p>
+        <hr />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='primary'
+          className='btn-invert'
+          type='button'
+          onClick={props.onHide}>
+          Nevermind, I don't want to delete all of my progress
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='danger'
+          className='btn-danger'
+          type='button'
+          onClick={props.reset}>
+          Reset everything. I want to start from the beginning
+        </Button>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+ResetModal.displayName = 'ResetModal';
+ResetModal.propTypes = propTypes;
+
+export default ResetModal;

client/src/components/settings/danger-zone.css

@@ -0,0 +1,4 @@
+.btn-danger {
+  background-color: #fff;
+  color: #f11e00;
+}

client/src/redux/settings/index.js

@@ -28,7 +28,9 @@ export const types = createTypes(
     ...createAsyncTypes('updateMyEmail'),
     ...createAsyncTypes('updateUserFlag'),
     ...createAsyncTypes('submitProfileUI'),
-    ...createAsyncTypes('verifyCert')
+    ...createAsyncTypes('verifyCert'),
+    ...createAsyncTypes('resetProgress'),
+    ...createAsyncTypes('deleteAccount')
   ],
   ns
 );
@@ -88,6 +90,14 @@ export const verifyCertComplete = createAction(
 );
 export const verifyCertError = createAction(types.verifyCertError);
 
+export const resetProgress = createAction(types.resetProgress);
+export const resetProgressComplete = createAction(types.resetProgressComplete);
+export const resetProgressError = createAction(types.resetProgressError);
+
+export const deleteAccount = createAction(types.deleteAccount);
+export const deleteAccountComplete = createAction(types.deleteAccountComplete);
+export const deleteAccountError = createAction(types.deleteAccountError);
+
 export const usernameValidationSelector = state => state[ns].usernameValidation;
 
 export const reducer = handleActions(