deleteUserModal style changed, deleteData is no longer included

webapp/components/DeleteData/DeleteData.vue

@@ -4,14 +4,14 @@
       <base-icon name="warning" />
       {{ $t('settings.deleteUserAccount.name') }}
     </h2>
-    <label v-show="!isAdmin">
+    <label>
       {{ $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name }) }}
     </label>
-    <ds-input v-show="!isAdmin" v-model="enableDeletionValue" />
+    <ds-input v-model="enableDeletionValue" />
     <p v-show="enableDeletionValue" class="notice">
       {{ $t('settings.deleteUserAccount.accountDescription') }}
     </p>
-    <label v-if="!isAdmin && currentUser.contributionsCount" class="checkbox">
+    <label v-if="currentUser.contributionsCount" class="checkbox">
       <input type="checkbox" v-model="deleteContributions" />
       {{
         $t('settings.deleteUserAccount.contributionsCount', {
@@ -19,7 +19,7 @@
         })
       }}
     </label>
-    <label v-if="!isAdmin && currentUser.commentedCount" class="checkbox">
+    <label v-if="currentUser.commentedCount" class="checkbox">
       <input type="checkbox" v-model="deleteComments" />
       {{
         $t('settings.deleteUserAccount.commentedCount', {
@@ -27,18 +27,10 @@
         })
       }}
     </label>
-    <h2 v-else>
-      {{ $t('settings.deleteUserAccount.infoAdmin') }}
-    </h2>
     <section class="warning">
-      <p v-if="!isAdmin">{{ $t('settings.deleteUserAccount.accountWarning') }}</p>
-      <p v-else>{{ $t('settings.deleteUserAccount.accountWarningAdmin') }}</p>
+      <p>{{ $t('settings.deleteUserAccount.accountWarning') }}</p>
     </section>
-    <ds-text v-show="isAdmin || currentUser.role === 'admin'" color="danger">
-      {{ $t('settings.deleteUserAccount.accountWarningIsAdmin') }}
-    </ds-text>
     <base-button
-      v-show="!isAdmin"
       icon="trash"
       danger
       filled
@@ -62,7 +54,6 @@ export default {
       deleteContributions: false,
       deleteComments: false,
       enableDeletionValue: null,
-      isAdmin: this.$store.getters['auth/isAdmin'],
     }
   },
   computed: {

webapp/components/DeleteUserModal/DeleteUserModal.vue

@@ -1,8 +1,35 @@
 <template>
   <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <!-- <p v-html="message" /> -->
-    <delete-data />
+    <div>
+      <ds-flex>
+        <ds-flex-item :width="{ base: '60px', md: '200px' }">
+          <ds-placeholder>
+            <div>
+              <ds-avatar :name="name" :image="avatar" size="x-large" />
+            </div>
+          </ds-placeholder>
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-placeholder>
+            <div>
+              <ds-text>Name:</ds-text>
+              <ds-text size="x-large">{{ name }}</ds-text>
+              <ds-text>Slug:</ds-text>
+              <ds-text size="x-large">{{ slug }}</ds-text>
+              <ds-text>Id:</ds-text>
+              <ds-text size="x-large">{{ id }}</ds-text>
+              <ds-text>contributionsCount:</ds-text>
+              <ds-text size="x-large">{{ contributionsCount }}</ds-text>
+              <ds-text>commentedCount:</ds-text>
+              <ds-text size="x-large">{{ commentedCount }}</ds-text>
+              <ds-text>createdAt:</ds-text>
+              <ds-text size="x-large">{{ createdAt }}</ds-text>
+            </div>
+          </ds-placeholder>
+        </ds-flex-item>
+      </ds-flex>
+    </div>
     <template slot="footer">
       <base-button class="cancel" @click="cancel">{{ $t('actions.cancel') }}</base-button>
       <base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
@@ -14,16 +41,16 @@
 
 <script>
 import gql from 'graphql-tag'
-import DeleteData from '~/components/DeleteData/DeleteData.vue'
 
 export default {
-  components: {
-    DeleteData,
-  },
   props: {
     slug: { type: String, required: true },
     id: { type: String, required: true },
     name: { type: String, required: true },
+    avatar: { type: String, required: true },
+    contributionsCount: { type: Number, required: true },
+    commentedCount: { type: Number, required: true },
+    createdAt: { type: String, required: true },
   },
   data() {
     return {
@@ -35,13 +62,11 @@ export default {
   },
   computed: {
     title() {
-      return this.$props.name + ' (' + this.$props.slug + ')'
+      return this.$t('settings.deleteUserAccount.name')
     },
   },
   methods: {
     cancel() {
-      // TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
-      // await this.modalData.buttons.cancel.callback()
       this.isOpen = false
       setTimeout(() => {
         this.$emit('close')
@@ -49,8 +74,6 @@ export default {
     },
     async confirm() {
       try {
-        // TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
-        // await this.modalData.buttons.confirm.callback()
         this.$apollo
           .mutate({
             mutation: gql`

webapp/components/Modal.vue

@@ -33,8 +33,12 @@
     <delete-user-modal
       v-if="open === 'delete'"
       :id="data.id"
-      :slug="data.slug"
       :name="data.name"
+      :slug="data.slug"
+      :avatar="data.avatar"
+      :contributionsCount="data.contributionsCount"
+      :commentedCount="data.commentedCount"
+      :createdAt="data.createdAt"
       @close="close"
     />
   </div>

webapp/pages/profile/_id/_slug.vue

@@ -442,8 +442,12 @@ export default {
         name: 'delete',
         data: {
           id: userdata.id,
-          slug: userdata.slug,
           name: userdata.name,
+          slug: userdata.slug,
+          avatar: userdata.avatar,
+          contributionsCount: userdata.contributionsCount,
+          commentedCount: userdata.commentedCount,
+          createdAt: userdata.createdAt,
         },
       })
     },