Start DeleteAccount functionality

webapp/components/DeleteAccount/DeleteAccount.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <ds-card hover>
+      <ds-space />
+      <ds-form v-model="formData">
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item>
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+          </ds-flex-item>
+          <ds-flex-item width="80%">
+            <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
+          </ds-flex-item>
+          <ds-container>
+            <ds-space />
+            <ds-heading tag="h3">
+              This is a destructive action and to proceed you must choose to take this action by
+              selecting the 'I really want to delete my account' from the dropdown This cannot be
+              undone, please consider your actions carefully!
+            </ds-heading>
+          </ds-container>
+        </ds-flex>
+        <ds-space />
+        <ds-section>
+          <ds-flex>
+            <ds-flex-item width="50%">
+              <ds-select
+                v-model="accept"
+                :options="['', 'I really want to delete my account']"
+                @input="enableDeletion"
+                placeholder="Are you sure you want to delete your account?"
+              />
+            </ds-flex-item>
+            <ds-flex-item width="10%" />
+            <ds-flex-item>
+              <ds-button icon="trash" danger :disabled="disabled">
+                {{ $t('settings.delete.name') }}
+              </ds-button>
+            </ds-flex-item>
+          </ds-flex>
+        </ds-section>
+      </ds-form>
+    </ds-card>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DeleteAccount',
+  data() {
+    return {
+      formData: {},
+      accept: null,
+      disabled: true,
+    }
+  },
+  methods: {
+    enableDeletion() {
+      if (this.accept === 'I really want to delete my account') {
+        this.disabled = false
+      } else {
+        this.disabled = true
+      }
+    },
+  },
+}
+</script>
+<style lang="scss">
+.delete-warning-icon {
+  color: $color-danger;
+}
+</style>

webapp/locales/en.json

@@ -71,7 +71,7 @@
       "name": "Download Data"
     },
     "delete": {
-      "name": "Delete Account"
+      "name": "Delete my User Account"
     },
     "organizations": {
       "name": "My Organizations"

webapp/pages/settings.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <ds-heading tag="h1">
-      {{ $t('settings.name') }}
-    </ds-heading>
+    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -33,6 +31,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
+        {
+          name: this.$t('settings.delete.name'),
+          path: `/settings/delete-account`,
+        },
         // TODO implement
         /* {
           name: this.$t('settings.invites.name'),
@@ -44,10 +46,6 @@ export default {
           path: `/settings/data-download`
         }, */
         // TODO implement
-        /* {
-          name: this.$t('settings.delete.name'),
-          path: `/settings/delete-account`
-        }, */
         // TODO implement
         /* {
           name: this.$t('settings.organizations.name'),

webapp/pages/settings/delete-account.vue

@@ -1,15 +1,13 @@
 <template>
-  <ds-card :header="$t('settings.delete.name')">
-    <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  <delete-account />
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty.vue'
+import DeleteAccount from '~/components/DeleteAccount/DeleteAccount.vue'
 
 export default {
   components: {
-    HcEmpty,
+    DeleteAccount,
   },
 }
 </script>