Account specs + better modal

components/Account/ActionsDialog/index.js

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  makeStyles,
+  Button,
+  DialogTitle,
+  Dialog,
+} from '@material-ui/core';
+
+import api from '../../../utils/api';
+import { useAuth } from '../../../src/contexts/auth';
+import SnackAlert from '../../shared/SnackAlert';
+
+const useStyles = makeStyles({
+  titleRoot: {
+    flex: '0 0 auto',
+    margin: '0',
+    padding: '16px 24px 0 24px',
+    fontWeight: '700',
+  },
+});
+
+function ActionsDialog({
+  open, onClose, id,
+}) {
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [successOpen, setSuccessOpen] = useState(false);
+  const classes = useStyles();
+  const { logout } = useAuth();
+
+  const handleDelete = () => {
+    api.delete('/user')
+      .then(() => {
+        setSuccessOpen(true);
+        setTimeout(() => { logout(); }, 1000);
+      })
+      .catch(() => {
+        setErrorOpen(true);
+      });
+  };
+
+  const handleSnackClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setSuccessOpen(false);
+    setErrorOpen(false);
+  };
+
+  return (
+    <Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} id={id}>
+      <SnackAlert
+        open={successOpen}
+        onClose={handleSnackClose}
+        severity="success"
+        message="Account has been deleted. Redirecting..."
+        id="modal-success-message"
+      />
+      <SnackAlert
+        open={errorOpen}
+        onClose={handleSnackClose}
+        severity="error"
+        message="Some error occurred. Please try again later."
+        id="modal-error-message"
+      />
+
+      <DialogTitle classes={{
+        root: classes.titleRoot,
+      }}
+      >
+        Are you sure?
+      </DialogTitle>
+
+      <div
+        style={{ padding: '0 24px 16px 24px' }}
+        className={classes.paper}
+      >
+        <p id="simple-modal-description">
+          This will permanently delete your account. All data will be lost forever.
+        </p>
+        <Button
+          variant="contained"
+          color="primary"
+          style={{ marginRight: '10px' }}
+          onClick={onClose}
+          id="cancel-button"
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={handleDelete}
+          style={{ backgroundColor: '#f32013', color: 'white' }}
+          id="delete-account-button"
+        >
+          Delete Account
+        </Button>
+
+      </div>
+    </Dialog>
+  );
+}
+
+ActionsDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+export default ActionsDialog;

components/shared/SnackAlert/index.js

@@ -3,14 +3,15 @@ import { Snackbar } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 
 function SnackAlert({
-  open, severity, message, onClose,
+  open, severity, message, onClose, id,
 }) {
   return (
     <Snackbar
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
       open={open}
       onClose={onClose}
       autoHideDuration={3000}
+      id={id}
     >
       <Alert severity={severity}>
         { message }
@@ -26,6 +27,7 @@ SnackAlert.propTypes = {
   onClose: PropTypes.func,
   severity: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 SnackAlert.defaultProps = {

pages/users/account.js

@@ -11,7 +11,7 @@ import {
 import { TextField, CheckboxWithLabel } from 'formik-material-ui';
 
 import Navbar from '../../components/shared/dashboard/Navbar';
-import DeleteAccountModal from '../../components/Account/Modal';
+import DeleteAccountModal from '../../components/Account/ActionsDialog';
 import emailValidator from '../../utils/emailValidator';
 import ProtectRoute from '../../utils/ProtectRoute';
 
@@ -95,12 +95,13 @@ function Account({ user }) {
   return (
     <ProtectRoute>
       <Navbar />
-      <DeleteAccountModal open={open} setOpen={setOpen} />
+      <DeleteAccountModal open={open} onClose={() => setOpen(false)} id="delete-account-modal" />
 
       <Formik
         initialValues={initialValues}
         validate={(values) => handleValidate(values)}
         onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
+        id="form"
       >
         {({
           values, submitForm, isSubmitting, resetForm,
@@ -122,6 +123,7 @@ function Account({ user }) {
                       label="Email"
                       value={values.email}
                       style={{ marginBottom: '10px' }}
+                      id="email-input"
                     />
 
                     <Field
@@ -132,6 +134,7 @@ function Account({ user }) {
                       name="currentPassword"
                       style={{ marginBottom: '10px' }}
                       value={values.currentPassword}
+                      id="password-input"
                     />
                     <Typography variant="caption" display="block" gutterBottom>
                       New Password:
@@ -144,6 +147,7 @@ function Account({ user }) {
                       name="newPassword"
                       value={values.newPassword}
                       style={{ marginBottom: '10px' }}
+                      id="new-password-input"
                     />
                     <Field
                       component={TextField}
@@ -153,6 +157,7 @@ function Account({ user }) {
                       name="confirmPassword"
                       value={values.confirmPassword}
                       style={{ marginBottom: '25px' }}
+                      id="new-password-confirmation-input"
                     />
 
                     <Typography variant="caption" display="block" gutterBottom>
@@ -166,6 +171,7 @@ function Account({ user }) {
                       Label={{
                         label: 'Email notification after each bridge event',
                       }}
+                      id="notifications-checkbox"
                     />
 
                     <Typography
@@ -180,6 +186,7 @@ function Account({ user }) {
                       variant="contained"
                       onClick={handleOpen}
                       style={{ backgroundColor: '#f32013', color: 'white' }}
+                      id="open-modal-button"
                     >
                       Delete Account
                     </Button>
@@ -211,8 +218,20 @@ function Account({ user }) {
           </Form>
         )}
       </Formik>
-      <SnackAlert open={successOpen} onClose={handleSnackClose} severity="success" message="Account info has been updated." />
-      <SnackAlert open={errorOpen} onClose={handleSnackClose} severity="error" message="Some error occurred. Please try again later." />
+      <SnackAlert
+        open={successOpen}
+        onClose={handleSnackClose}
+        severity="success"
+        message="Account info has been updated."
+        id="success-message"
+      />
+      <SnackAlert
+        open={errorOpen}
+        onClose={handleSnackClose}
+        severity="error"
+        message="Some error occurred. Please try again later."
+        id="error-message"
+      />
     </ProtectRoute>
   );
 }

specs/fixtures/user.json

@@ -1,4 +1,6 @@
 {
-  "email": "demo@demo.com",
-  "password": "password"
+  "user": {
+    "email": "demo@demo.com",
+    "notifications": true
+  }
 }