Adding account deletion feature

Author: blackjackkent

package-lock.json

@@ -46,7 +46,7 @@
 		"jest-when": "^2.3.1",
 		"mini-css-extract-plugin": "^0.4.5",
 		"mkdirp": "^0.5.1",
-		"node-sass": "^4.10.0",
+		"node-sass": "^4.14.1",
 		"prettier": "^2.0.2",
 		"react-test-renderer": "^16.8.6",
 		"redux-saga-test-plan": "^3.7.0",
@@ -73,9 +73,9 @@
 		"dot-prop-immutable": "^1.5.0",
 		"history": "^4.7.2",
 		"immutable": "^4.0.0-rc.12",
-		"jquery": "^3.3.1",
+		"jquery": "^3.5.1",
 		"local-storage": "^1.4.2",
-		"lodash": "^4.17.11",
+		"lodash": "^4.17.20",
 		"promise": "^8.0.2",
 		"prop-types": "^15.6.2",
 		"query-string": "^6.2.0",
@@ -99,7 +99,7 @@
 		"simple-line-icons": "^2.4.1",
 		"styled-components": "^4.1.2",
 		"webpack": "^4.26.1",
-		"webpack-dev-server": "^3.2.1"
+		"webpack-dev-server": "^3.11.0"
 	},
 	"scripts": {
 		"start": "webpack-dev-server --history-api-fallback --config webpack.dev.js",

package.json

@@ -28,6 +28,7 @@ const propTypes = {
 	closeUpsertCharacterModal: PropTypes.func.isRequired,
 	closeUpsertPublicViewModal: PropTypes.func.isRequired,
 	closeUpsertThreadModal: PropTypes.func.isRequired,
+	closeDeleteAccountConfirmationModal: PropTypes.func.isRequired,
 	deletePublicView: PropTypes.func.isRequired,
 	isBulkUntrackThreadsModalOpen: PropTypes.bool.isRequired,
 	isBulkUpdateTagModalOpen: PropTypes.bool.isRequired,
@@ -38,6 +39,7 @@ const propTypes = {
 	isUpsertCharacterModalOpen: PropTypes.bool.isRequired,
 	isUpsertPublicViewModalOpen: PropTypes.bool.isRequired,
 	isUpsertThreadModalOpen: PropTypes.bool.isRequired,
+	isDeleteAccountConfirmationModalOpen: PropTypes.bool.isRequired,
 	sortedCharacters: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 	sortedTags: PropTypes.arrayOf(PropTypes.string).isRequired,
 	threadToEdit: PropTypes.shape({
@@ -48,6 +50,7 @@ const propTypes = {
 	upsertCharacter: PropTypes.func.isRequired,
 	upsertPublicView: PropTypes.func.isRequired,
 	upsertThread: PropTypes.func.isRequired,
+	submitUserAccountDeletion: PropTypes.func.isRequired,
 	tagToEdit: PropTypes.shape({
 		selectedTag: PropTypes.string,
 		updatedValue: PropTypes.string
@@ -71,6 +74,7 @@ function mapStateToProps(state) {
 		isDeletePublicViewModalOpen: ui.isDeletePublicViewModalOpen,
 		isBulkUpdateTagModalOpen: ui.isBulkUpdateTagModalOpen,
 		isBulkDeleteTagModalOpen: ui.isBulkDeleteTagModalOpen,
+		isDeleteAccountConfirmationModalOpen: ui.isDeleteAccountConfirmationModalOpen,
 		characterToEdit,
 		threadToEdit,
 		bulkThreadsToEdit,
@@ -97,6 +101,7 @@ const ModalContainer = (props) => {
 		closeUpsertCharacterModal,
 		closeUpsertPublicViewModal,
 		closeUpsertThreadModal,
+		closeDeleteAccountConfirmationModal,
 		deletePublicView,
 		isBulkUntrackThreadsModalOpen,
 		isBulkUpdateTagModalOpen,
@@ -107,6 +112,7 @@ const ModalContainer = (props) => {
 		isUpsertCharacterModalOpen,
 		isUpsertPublicViewModalOpen,
 		isUpsertThreadModalOpen,
+		isDeleteAccountConfirmationModalOpen,
 		sortedCharacters,
 		sortedTags,
 		threadToEdit,
@@ -116,7 +122,8 @@ const ModalContainer = (props) => {
 		upsertPublicView,
 		upsertThread,
 		viewToEdit,
-		tagToEdit
+		tagToEdit,
+		submitUserAccountDeletion
 	} = props;
 	return (
 		<div>
@@ -231,6 +238,22 @@ const ModalContainer = (props) => {
 					</span>
 				}
 			/>
+			<GenericConfirmationModal
+				isModalOpen={isDeleteAccountConfirmationModalOpen}
+				submitCallback={submitUserAccountDeletion}
+				submitButtonText="Confirm Deletion"
+				closeCallback={closeDeleteAccountConfirmationModal}
+				closeButtonText="Cancel"
+				data={null}
+				headerText="Really Delete Account?"
+				bodyText={
+					<span>
+						Are you sure  you want to delete your account? <strong>This action cannot be undone.</strong>{' '} 
+						You will be unable to access any tracked characters or threads in the future,{' '}
+						unless you create a new account and re-add them.
+					</span>
+				}
+			/>
 		</div>
 	);
 };
@@ -249,7 +272,9 @@ export default connect(mapStateToProps, {
 	closeUpsertCharacterModal: actions.closeUpsertCharacterModal,
 	closeUpsertPublicViewModal: actions.closeUpsertPublicViewModal,
 	closeUpsertThreadModal: actions.closeUpsertThreadModal,
+	closeDeleteAccountConfirmationModal: actions.closeDeleteAccountConfirmationModal,
 	deletePublicView: actions.deletePublicView,
+	submitUserAccountDeletion: actions.submitUserAccountDeletion,
 	untrackCharacter: actions.untrackCharacter,
 	untrackThread: actions.untrackThread,
 	upsertCharacter: actions.upsertCharacter,

src/display/shared/modals/ModalContainer.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ChangePasswordPane from './components/ChangePasswordPane';
 import UpdateAccountInfoPane from './components/UpdateAccountInfoPane';
+import DeleteAccountPane from './components/DeleteAccountPane';
 import * as actions from '../../../infrastructure/actions';
 import TabContent from '../../shared/styled/TabContent';
 import StaticTabNav from '../../shared/static/StaticTabNav';
@@ -14,6 +15,7 @@ const propTypes = {
 	user: PropTypes.shape({}).isRequired,
 	submitUserChangePassword: PropTypes.func.isRequired,
 	submitUserAccountInfo: PropTypes.func.isRequired,
+	openDeleteAccountConfirmationModal: PropTypes.func.isRequired,
 	match: PropTypes.shape({
 		url: PropTypes.string,
 		params: PropTypes.shape({
@@ -32,6 +34,10 @@ function mapStateToProps(state) {
 const Settings = (props) => {
 	const { user, submitUserChangePassword, submitUserAccountInfo, match } = props;
 	const options = Object.values(tabs.SETTINGS);
+	const onDeleteAccountClicked = (e) => {
+		e.preventDefault();
+		props.openDeleteAccountConfirmationModal();
+	}
 	return (
 		<div className="animated fadeIn static-container settings-container">
 			<Row>
@@ -54,6 +60,7 @@ const Settings = (props) => {
 							submitAccountInfoForm={submitUserAccountInfo}
 							user={user}
 						/>
+						<DeleteAccountPane onDeleteAccountClicked={onDeleteAccountClicked} />
 					</TabContent>
 				</Col>
 			</Row>
@@ -64,5 +71,6 @@ const Settings = (props) => {
 Settings.propTypes = propTypes;
 export default connect(mapStateToProps, {
 	submitUserChangePassword: actions.submitUserChangePassword,
-	submitUserAccountInfo: actions.submitUserAccountInfo
+	submitUserAccountInfo: actions.submitUserAccountInfo,
+	openDeleteAccountConfirmationModal: actions.openDeleteAccountConfirmationModal
 })(Settings);

src/display/views/settings/Settings.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TabPane, Button, CardHeader, CardBody } from 'reactstrap';
+import Card from '../../../shared/styled/Card';
+
+const propTypes = {
+	onDeleteAccountClicked: PropTypes.func.isRequired
+};
+const DeleteAccountPane = ({ onDeleteAccountClicked }) => {
+	return (
+		<TabPane tabId="delete-account">
+			<Card>
+				<CardHeader>
+					<i className="fas fa-trash-alt" /> Delete Account
+				</CardHeader>
+				<CardBody className="card-body text-center">
+					<Button type="submit" color="danger" onClick={onDeleteAccountClicked}>
+						Delete Account
+					</Button>
+				</CardBody>
+			</Card>
+		</TabPane>
+	);
+}
+DeleteAccountPane.propTypes = propTypes;
+export default DeleteAccountPane;

src/display/views/settings/components/DeleteAccountPane.js

@@ -11,6 +11,12 @@ export {
 	OPEN_DELETE_PUBLIC_VIEW_MODAL,
 	openDeletePublicViewModal
 } from './ui/deletePublicViewModal';
+export {
+	CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL,
+	closeDeleteAccountConfirmationModal,
+	OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL,
+	openDeleteAccountConfirmationModal
+} from './ui/deleteAccountConfirmationModal';
 export {
 	CLOSE_UNTRACK_CHARACTER_MODAL,
 	closeUntrackCharacterModal,
@@ -197,6 +203,14 @@ export {
 	submitUserChangePasswordFailure,
 	submitUserChangePasswordSuccess
 } from './user/submitUserChangePassword';
+export {
+	SUBMIT_USER_ACCOUNT_DELETION,
+	SUBMIT_USER_ACCOUNT_DELETION_FAILURE,
+	SUBMIT_USER_ACCOUNT_DELETION_SUCCESS,
+	submitUserAccountDeletion,
+	submitUserAccountDeletionFailure,
+	submitUserAccountDeletionSuccess
+} from './user/submitUserAccountDeletion';
 export {
 	SUBMIT_USER_FORGOT_PASSWORD_FAILURE,
 	SUBMIT_USER_FORGOT_PASSWORD_SUCCESS,

src/infrastructure/actions/index.js

@@ -0,0 +1,12 @@
+export const CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL = 'CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL';
+export function closeDeleteAccountConfirmationModal() {
+	return {
+		type: CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL
+	};
+}
+export const OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL = 'OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL';
+export function openDeleteAccountConfirmationModal() {
+	return {
+		type: OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL
+	};
+}

src/infrastructure/actions/ui/deleteAccountConfirmationModal.js

@@ -0,0 +1,28 @@
+import analytics from '../../constants/analytics';
+
+export const SUBMIT_USER_ACCOUNT_DELETION = 'SUBMIT_USER_ACCOUNT_DELETION';
+export function submitUserAccountDeletion() {
+	return {
+		type: SUBMIT_USER_ACCOUNT_DELETION,
+		analytics: {
+			func: analytics.funcs.EVENT,
+			event: {
+				category: analytics.categories.ACCOUNT,
+				action: 'Deleted account'
+			}
+		}
+	};
+}
+export const SUBMIT_USER_ACCOUNT_DELETION_FAILURE = 'SUBMIT_USER_ACCOUNT_DELETION_FAILURE';
+export function submitUserAccountDeletionFailure(data) {
+	return {
+		type: SUBMIT_USER_ACCOUNT_DELETION_FAILURE,
+		data
+	};
+}
+export const SUBMIT_USER_ACCOUNT_DELETION_SUCCESS = 'SUBMIT_USER_ACCOUNT_DELETION_SUCCESS';
+export function submitUserAccountDeletionSuccess() {
+	return {
+		type: SUBMIT_USER_ACCOUNT_DELETION_SUCCESS
+	};
+}

src/infrastructure/actions/user/submitUserAccountDeletion.js

@@ -25,6 +25,10 @@ export default {
 		CHANGE_USERNAME: {
 			href: '/settings/change-username',
 			name: 'Change Username/Email'
+		},
+		DELETE_ACCOUNT: {
+			href: '/settings/delete-account',
+			name: 'Delete Account'
 		}
 	},
 	TOOLS: {

src/infrastructure/constants/tabs.js

@@ -7,12 +7,14 @@ import {
 	CLOSE_UPSERT_CHARACTER_MODAL,
 	CLOSE_UPSERT_PUBLIC_VIEW_MODAL,
 	CLOSE_UPSERT_THREAD_MODAL,
+	CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL,
 	OPEN_BULK_UNTRACK_THREADS_MODAL,
 	OPEN_UNTRACK_CHARACTER_MODAL,
 	OPEN_UNTRACK_THREAD_MODAL,
 	OPEN_UPSERT_CHARACTER_MODAL,
 	OPEN_UPSERT_PUBLIC_VIEW_MODAL,
 	OPEN_UPSERT_THREAD_MODAL,
+	OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL,
 	SUBMIT_USER_LOGOUT,
 	TOGGLE_HEADER_PROFILE_DROPDOWN,
 	TOGGLE_HEADER_ADD_MENU_DROPDOWN,
@@ -54,6 +56,7 @@ const defaultState = {
 	isDeletePublicViewModalOpen: false,
 	isBulkUpdateTagModalOpen: false,
 	isBulkDeleteTagModalOpen: false,
+	isDeleteAccountConfirmationModalOpen: false,
 	useLightTheme: false
 };
 
@@ -142,6 +145,14 @@ function ui(state = defaultState, action) {
 			return Object.assign({}, state, {
 				isDeletePublicViewModalOpen: false
 			});
+		case OPEN_DELETE_ACCOUNT_CONFIRMATION_MODAL:
+			return Object.assign({}, state, {
+				isDeleteAccountConfirmationModalOpen: true
+			});
+		case CLOSE_DELETE_ACCOUNT_CONFIRMATION_MODAL:
+			return Object.assign({}, state, {
+				isDeleteAccountConfirmationModalOpen: false
+			});
 		case OPEN_BULK_UPDATE_TAG_MODAL:
 			return Object.assign({}, state, {
 				isBulkUpdateTagModalOpen: true