Merge pull request #140 from blackjackkent/AccountDeletion

blackjackkent · web-flow · commit 55a17e9f5deb · 2020-12-03T00:24:09.000-06:00
Adding account deletion feature
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/src/display/shared/modals/ModalContainer.js b/src/display/shared/modals/ModalContainer.js
@@ -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,23 @@ 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 +273,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,
diff --git a/src/display/shared/modals/__tests__/__snapshots__/ModalContainer.spec.js.snap b/src/display/shared/modals/__tests__/__snapshots__/ModalContainer.spec.js.snap
@@ -212,6 +212,22 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
     submitButtonText="Delete Tag"
     submitCallback={[MockFunction]}
   />
+  <GenericConfirmationModal
+    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>
+    }
+    closeButtonText="Cancel"
+    data={null}
+    headerText="Really Delete Account?"
+    submitButtonText="Confirm Deletion"
+  />
 </div>
 `;
 
@@ -427,5 +443,21 @@ exports[`rendering snapshots should render valid snapshot with missing character
     submitButtonText="Delete Tag"
     submitCallback={[MockFunction]}
   />
+  <GenericConfirmationModal
+    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>
+    }
+    closeButtonText="Cancel"
+    data={null}
+    headerText="Really Delete Account?"
+    submitButtonText="Confirm Deletion"
+  />
 </div>
 `;
diff --git a/src/display/views/settings/Settings.js b/src/display/views/settings/Settings.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);
diff --git a/src/display/views/settings/__tests__/__snapshots__/Settings.spec.js.snap b/src/display/views/settings/__tests__/__snapshots__/Settings.spec.js.snap
@@ -99,6 +99,9 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
             }
           }
         />
+        <DeleteAccountPane
+          onDeleteAccountClicked={[Function]}
+        />
       </Styled(TabContent)>
     </Col>
   </Row>
diff --git a/src/display/views/settings/components/DeleteAccountPane.js b/src/display/views/settings/components/DeleteAccountPane.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;
diff --git a/src/infrastructure/actions/index.js b/src/infrastructure/actions/index.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,
diff --git a/src/infrastructure/actions/ui/deleteAccountConfirmationModal.js b/src/infrastructure/actions/ui/deleteAccountConfirmationModal.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
+	};
+}
diff --git a/src/infrastructure/actions/user/submitUserAccountDeletion.js b/src/infrastructure/actions/user/submitUserAccountDeletion.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
+	};
+}
diff --git a/src/infrastructure/constants/__tests__/__snapshots__/tabs.spec.js.snap b/src/infrastructure/constants/__tests__/__snapshots__/tabs.spec.js.snap
@@ -29,6 +29,10 @@ Object {
       "href": "/settings/change-username",
       "name": "Change Username/Email",
     },
+    "DELETE_ACCOUNT": Object {
+      "href": "/settings/delete-account",
+      "name": "Delete Account",
+    },
   },
   "TOOLS": Object {
     "BROWSER_EXTENSIONS": Object {
diff --git a/src/infrastructure/constants/tabs.js b/src/infrastructure/constants/tabs.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: {
diff --git a/src/infrastructure/reducers/__tests__/ui.spec.js b/src/infrastructure/reducers/__tests__/ui.spec.js
@@ -16,6 +16,7 @@ const getState = (overrides) => ({
 	isUpsertPublicViewModalOpen: false,
 	isDeletePublicViewModalOpen: false,
 	isBulkUpdateTagModalOpen: false,
+	isDeleteAccountConfirmationModalOpen: false,
 	isBulkDeleteTagModalOpen: false,
 	useLightTheme: false,
 	...overrides
diff --git a/src/infrastructure/reducers/ui.js b/src/infrastructure/reducers/ui.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
diff --git a/src/infrastructure/sagas/index.js b/src/infrastructure/sagas/index.js
@@ -9,6 +9,7 @@ export { default as submitUserForgotPasswordSaga } from './user/submitUserForgot
 export { default as submitUserResetPasswordSaga } from './user/submitUserResetPasswordSaga';
 export { default as submitUserChangePasswordSaga } from './user/submitUserChangePasswordSaga';
 export { default as submitUserAccountInfoSaga } from './user/submitUserAccountInfoSaga';
+export { default as submitUserAccountDeletionSaga } from './user/submitUserAccountDeletionSaga';
 // UserSettings
 export { default as fetchUserSettingsSaga } from './userSettings/fetchUserSettingsSaga';
 export { default as updateUserSettingsSaga } from './userSettings/updateUserSettingsSaga';
diff --git a/src/infrastructure/sagas/user/submitUserAccountDeletionSaga.js b/src/infrastructure/sagas/user/submitUserAccountDeletionSaga.js
diff --git a/src/infrastructure/selectors/characters/__tests__/getCharactersSortedByIdentifer.spec.js b/src/infrastructure/selectors/characters/__tests__/getCharactersSortedByIdentifer.spec.js

Original file line number	Diff line number	Diff line change
@@ -99,6 +99,9 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`	`/>`
	`102`	`+ <DeleteAccountPane`
	`103`	`+ onDeleteAccountClicked={[Function]}`
	`104`	`+ />`
`102`	`105`	`</Styled(TabContent)>`
`103`	`106`	`</Col>`
`104`	`107`	`</Row>`