Client - admin can delete user account - #15

fittrackee_client/src/actions/user.js

@@ -134,12 +134,16 @@ export const deletePicture = () => dispatch =>
       throw error
     })
 
-export const deleteUser = username => dispatch =>
+export const deleteUser = (username, isAdmin = false) => dispatch =>
   FitTrackeeGenericApi.deleteData('users', username)
     .then(ret => {
       if (ret.status === 204) {
+        if (isAdmin) {
+          history.push('/admin/users')
+        } else {
           dispatch(logout())
           history.push('/')
+        }
       } else {
         ret.json().then(r => dispatch(setError(`${r.message}`)))
       }

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 }))
       },

fittrackee_client/src/locales/en/user.json

@@ -1,5 +1,6 @@
 {
   "Admin": "Admin",
+  "Are you sure you want to delete this account? All data will be deleted, this cannot be undone.": "Are you sure you want to delete this account? All data will be deleted, this cannot be undone.",
   "Are you sure you want to delete your account? All data will be deleted, this cannot be undone.": "Are you sure you want to delete your account? All data will be deleted, this cannot be undone.",
   "Bio": "Bio",
   "Birth Date": "Birth Date",

fittrackee_client/src/locales/fr/user.json

@@ -1,5 +1,6 @@
 {
   "Admin": "Admin",
+  "Are you sure you want to delete this account? All data will be deleted, this cannot be undone.": "Etes-vous sûr de vouloir supprimer ce compte ? Toutes les données seront définitivement effacés.",
   "Are you sure you want to delete your account? All data will be deleted, this cannot be undone.": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
   "Bio": "Bio",
   "Birth Date": "Date de naissance",