From e51b8bfacaf83adb8d9e80386a50e8095000de53 Mon Sep 17 00:00:00 2001 From: Hemakshi Sachdev Date: Thu, 21 Feb 2019 21:47:22 +0530 Subject: [PATCH] feat: added danger zone --- client/src/client-only-routes/ShowSettings.js | 2 + client/src/components/settings/DangerZone.js | 99 +++++++++++++++++++ client/src/components/settings/DeleteModal.js | 76 ++++++++++++++ client/src/components/settings/ResetModal.js | 70 +++++++++++++ .../src/components/settings/danger-zone.css | 4 + client/src/redux/settings/index.js | 12 ++- 6 files changed, 262 insertions(+), 1 deletion(-) create mode 100644 client/src/components/settings/DangerZone.js create mode 100644 client/src/components/settings/DeleteModal.js create mode 100644 client/src/components/settings/ResetModal.js create mode 100644 client/src/components/settings/danger-zone.css 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()} + 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 + +

+
+ + + + + + + + + ); +} + +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. +

+
+ + + + + + + + + ); +} + +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(