From 75df329a26e889857c06a160827fdf5c95473177 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 15 Mar 2021 18:44:48 -0500
Subject: [PATCH] Display user account in deletion modal

---
 app/soapbox/actions/moderation.js | 9 ++++++++-
 app/styles/components/modal.scss  | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/actions/moderation.js b/app/soapbox/actions/moderation.js
index 3cdf076df..2aa8896be 100644
--- a/app/soapbox/actions/moderation.js
+++ b/app/soapbox/actions/moderation.js
@@ -1,7 +1,9 @@
+import React from 'react';
 import { defineMessages } from 'react-intl';
 import { openModal } from 'soapbox/actions/modal';
 import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
 import snackbar from 'soapbox/actions/snackbar';
+import AccountContainer from 'soapbox/containers/account_container';
 
 const messages = defineMessages({
   deactivateUserPrompt: { id: 'confirmations.admin.deactivate_user.message', defaultMessage: 'You are about to deactivate @{acct}. Deactivating a user is a reversible action.' },
@@ -47,8 +49,13 @@ export function deleteUserModal(intl, accountId, afterConfirm = () => {}) {
     const acct = state.getIn(['accounts', accountId, 'acct']);
     const name = state.getIn(['accounts', accountId, 'username']);
 
+    const message = (<>
+      <AccountContainer id={accountId} />
+      {intl.formatMessage(messages.deleteUserPrompt, { acct })}
+    </>);
+
     dispatch(openModal('CONFIRM', {
-      message: intl.formatMessage(messages.deleteUserPrompt, { acct }),
+      message,
       confirm: intl.formatMessage(messages.deleteUserConfirm, { name }),
       onConfirm: () => {
         dispatch(deleteUsers([acct])).then(() => {
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 44f32c686..37c1bcf6e 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -604,6 +604,13 @@
       }
     }
   }
+
+  .account {
+    text-align: left;
+    background-color: var(--background-color);
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
 }
 
 .report-modal__target {