Client - admin can delete user account - #15

fittrackee_client/src/components/App.css

@@ -316,6 +316,15 @@ label {
   content: " ✔";
 }
 
+.fa-as-link {
+  cursor:pointer;
+  color: #40578a;
+}
+
+.fa-as-link:hover {
+  color: #0056b3;
+}
+
 .fa-question-circle {
   color: #6c757d;
   margin-left: 3px;

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -11,7 +11,9 @@ import { apiUrl, getFileSize } from '../../utils'
 
 function ProfileDetail({
   appConfig,
+  displayModal,
   editable,
+  isDeletable,
   message,
   onDeletePicture,
   onUploadPicture,
@@ -46,6 +48,13 @@ function ProfileDetail({
                   >
                     <i className="fa fa-pencil-square-o" aria-hidden="true" />
                   </Link>
+                )}{' '}
+                {isDeletable && (
+                  <i
+                    className="fa fa-user-times fa-as-link"
+                    aria-hidden="true"
+                    onClick={() => displayModal(true)}
+                  />
                 )}
               </div>
               <div className="card-body">

fittrackee_client/src/components/User/UserProfile.jsx

@@ -2,10 +2,19 @@ import React from 'react'
 import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
+import CustomModal from '../Common/CustomModal'
 import ProfileDetail from './ProfileDetail'
 import { getOrUpdateData } from '../../actions'
+import { deleteUser } from '../../actions/user'
 
 class UserProfile extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      displayModal: false,
+    }
+  }
+
   componentDidMount() {
     this.props.loadUser(this.props.match.params.userName)
   }
@@ -16,14 +25,40 @@ class UserProfile extends React.Component {
     }
   }
 
+  displayModal(value) {
+    this.setState(prevState => ({
+      ...prevState,
+      displayModal: value,
+    }))
+  }
+
   render() {
-    const { t, currentUser, users } = this.props
+    const { t, currentUser, onDeleteUser, users } = this.props
+    const { displayModal } = this.state
     const [user] = users
+    const editable = user ? currentUser.username === user.username : false
     return (
       <div>
+        {displayModal && (
+          <CustomModal
+            title={t('common:Confirmation')}
+            text={t(
+              'user:Are you sure you want to delete this account? ' +
+                'All data will be deleted, this cannot be undone.'
+            )}
+            confirm={() => {
+              onDeleteUser(user.username)
+              this.displayModal(false)
+            }}
+            close={() => this.displayModal(false)}
+          />
+        )}
         {user && (
           <ProfileDetail
-            editable={currentUser.username === user.username}
+            editable={editable}
+            isDeletable={currentUser.admin && !editable}
+            onDeleteUser={onDeleteUser}
+            displayModal={e => this.displayModal(e)}
             t={t}
             user={user}
           />
@@ -40,6 +75,9 @@ export default withTranslation()(
       users: state.users.data,
     }),
     dispatch => ({
+      onDeleteUser: username => {
+        dispatch(deleteUser(username, true))
+      },
       loadUser: userName => {
         dispatch(getOrUpdateData('getData', 'users', { username: userName }))
       },