diff --git a/client/src/client-only-routes/ShowSettings.js b/client/src/client-only-routes/ShowSettings.js
index fd9c43e229..6029b13e69 100644
--- a/client/src/client-only-routes/ShowSettings.js
+++ b/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}
/>
+
diff --git a/client/src/components/settings/DangerZone.js b/client/src/components/settings/DangerZone.js
new file mode 100644
index 0000000000..df4fdf3db0
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ Please be careful! Changes in this section are permanent.
+
+
+ this.toggleResetModal()}>
+ Reset all of my progress
+
+
+ this.toggleDeleteModal()}>
+ Delete my account
+
+
+
+ this.toggleResetModal()}
+ show={this.state.reset} />
+ this.toggleDeleteModal()}
+ show={this.state.delete} />
+
+
+ );
+ }
+}
+
+DangerZone.displayName = 'DangerZone';
+DangerZone.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(DangerZone);
\ No newline at end of file
diff --git a/client/src/components/settings/DeleteModal.js b/client/src/components/settings/DeleteModal.js
new file mode 100644
index 0000000000..64c77ee6b1
--- /dev/null
+++ b/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 (
+
+
+ Delete My Account
+
+
+
+ This will really delete all your data, including all your progress
+ and account information.
+
+
+ We won't be able to recover any of it for you later,
+ even if you change your mind.
+
+
+ If there's something we could do better, send us an email instead and
+ we'll do our best:
+
+ team@freecodecamp.org
+
+
+
+
+ Nevermind, I don't want to delete my account
+
+
+
+ I am 100% certain. Delete everything related to this account
+
+
+
+ Close
+
+
+ );
+}
+
+DeleteModal.displayName = 'DeleteModal';
+DeleteModal.propTypes = propTypes;
+
+export default DeleteModal;
\ No newline at end of file
diff --git a/client/src/components/settings/ResetModal.js b/client/src/components/settings/ResetModal.js
new file mode 100644
index 0000000000..9dd22f54b7
--- /dev/null
+++ b/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 (
+
+
+ Reset My Progress
+
+
+
+ This will really delete all of your progress, points, completed
+ challenges, our records of your projects, any certifications you have,
+ everything.
+
+
+ We won't be able to recover any of it for you later, even if you
+ change your mind.
+
+
+
+ Nevermind, I don't want to delete all of my progress
+
+
+
+ Reset everything. I want to start from the beginning
+
+
+
+ Close
+
+
+ );
+}
+
+ResetModal.displayName = 'ResetModal';
+ResetModal.propTypes = propTypes;
+
+export default ResetModal;
\ No newline at end of file
diff --git a/client/src/components/settings/danger-zone.css b/client/src/components/settings/danger-zone.css
new file mode 100644
index 0000000000..40b4434326
--- /dev/null
+++ b/client/src/components/settings/danger-zone.css
@@ -0,0 +1,4 @@
+.btn-danger {
+ background-color: #fff;
+ color: #f11e00;
+}
\ No newline at end of file
diff --git a/client/src/redux/settings/index.js b/client/src/redux/settings/index.js
index ae1d796804..7722681317 100644
--- a/client/src/redux/settings/index.js
+++ b/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(