Improved UI

- add buefy for slider and checkboxes
- update/translate text
- add warning
- transition

webapp/assets/styles/main.scss

@@ -10,7 +10,7 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
   &::before {
     @include border-radius($border-radius-x-large);
     box-shadow: inset 0 0 0 5px $color-danger;
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     width: 100%;
@@ -102,10 +102,10 @@ hr {
   height: 1px !important;
 }
 
-[class$=menu-trigger] {
+[class$='menu-trigger'] {
   user-select: none;
 }
-[class$=menu-popover] {
+[class$='menu-popover'] {
   display: inline-block;
 
   nav {
@@ -145,10 +145,11 @@ hr {
   }
 }
 
-[class$="menu-popover"] {
+[class$='menu-popover'] {
   min-width: 130px;
 
-  a, button {
+  a,
+  button {
     display: flex;
     align-content: center;
     align-items: center;

webapp/components/DeleteAccount/DeleteAccount.vue

@@ -2,57 +2,95 @@
   <div>
     <ds-card hover>
       <ds-space />
-      <ds-form v-model="formData">
+      <ds-flex>
-        <ds-flex>
+        <ds-flex-item width="5%" />
-          <ds-flex-item width="10%" />
+        <ds-flex-item>
-          <ds-flex-item>
+          <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+        </ds-flex-item>
-          </ds-flex-item>
+        <ds-flex-item width="80%">
-          <ds-flex-item width="80%">
+          <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
-            <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
+        </ds-flex-item>
-          </ds-flex-item>
+        <ds-container>
-          <ds-container>
+          <ds-space />
-            <ds-space />
+          <ds-heading tag="h4">{{ $t('settings.delete.accountDescription') }}</ds-heading>
-            <ds-heading tag="h3">
+        </ds-container>
-              This is a destructive action and to proceed you must choose to take this action by
+      </ds-flex>
-              selecting the 'I really want to delete my account' from the dropdown This cannot be
+      <ds-space />
-              undone, please consider your actions carefully!
+      <ds-container>
-            </ds-heading>
+        <transition name="slide-up">
-          </ds-container>
+          <div v-if="deleteEnabled">
-        </ds-flex>
+            <div class="field">
-        <ds-space />
+              <div class="control">
-        <ds-section>
+                <b-checkbox
+                  type="is-danger"
+                  :disabled="!currentUser.contributionsCount"
+                  v-model="formData.deleteContributions"
+                >
+                  {{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}
+                </b-checkbox>
+              </div>
+            </div>
+            <div class="field">
+              <div class="control">
+                <b-checkbox
+                  type="is-danger"
+                  :disabled="!currentUser.commentsCount"
+                  v-model="formData.deleteComments"
+                >
+                  {{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}
+                </b-checkbox>
+              </div>
+            </div>
+            <div class="message is-danger">
+              <div class="message-body" v-html="$t('settings.delete.accountWarning')"></div>
+            </div>
+          </div>
+        </transition>
+      </ds-container>
+      <template slot="footer">
+        <ds-container>
           <ds-flex>
-            <ds-flex-item width="50%">
+            <ds-flex-item width="40%">
-              <ds-select
+              <div class="columns is-mobile">
-                v-model="accept"
+                <div class="column">
-                :options="['', 'I really want to delete my account']"
+                  <b-switch type="is-danger" v-model="deleteEnabled"></b-switch>
-                @input="enableDeletion"
+                </div>
-                placeholder="Are you sure you want to delete your account?"
+              </div>
-              />
             </ds-flex-item>
-            <ds-flex-item width="10%" />
+            <ds-flex-item width="20%" />
             <ds-flex-item>
-              <ds-button icon="trash" danger :disabled="disabled">
+              <ds-button icon="trash" danger :disabled="isLoading || !deleteEnabled">
                 {{ $t('settings.delete.name') }}
               </ds-button>
             </ds-flex-item>
           </ds-flex>
-        </ds-section>
+        </ds-container>
-      </ds-form>
+      </template>
     </ds-card>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'DeleteAccount',
   data() {
     return {
-      formData: {},
+      formData: {
-      accept: null,
+        deleteContributions: false,
-      disabled: true,
+        deleteComments: false,
+      },
+      deleteEnabled: false,
+      isLoading: false,
+      countPosts: 0,
+      countComments: 0,
     }
   },
+  computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
+  },
   methods: {
     enableDeletion() {
       if (this.accept === 'I really want to delete my account') {

webapp/locales/en.json

@@ -74,7 +74,11 @@
       "name": "Download Data"
     },
     "delete": {
-      "name": "Delete my User Account"
+      "name": "Delete my User Account",
+      "countPosts": "Delete my {count} posts",
+      "countComments": "Delete my {count} comments",
+      "accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete those you have to mark them below.",
+      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts... after deleting your account!"
     },
     "organizations": {
       "name": "My Organizations"

webapp/nuxt.config.js

@@ -81,6 +81,7 @@ module.exports = {
     { src: '~/plugins/v-tooltip.js', ssr: false },
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
+    { src: '~/plugins/buefy.js' },
   ],
 
   router: {

webapp/package.json

@@ -57,6 +57,7 @@
     "accounting": "~0.4.1",
     "apollo-cache-inmemory": "~1.5.1",
     "apollo-client": "~2.6.1",
+    "buefy": "^0.7.7",
     "cookie-universal-nuxt": "~2.0.14",
     "cross-env": "~5.2.0",
     "date-fns": "2.0.0-alpha.29",

webapp/plugins/buefy.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+
+Vue.use(Buefy, {
+  defaultIconPack: 'fa',
+  defaultTooltipAnimated: true,
+  defaultTooltipType: 'is-black',
+  defaultToastDuration: 6000,
+  defaultSnackbarDuration: 5000,
+  defaultNoticeQueue: true,
+})

webapp/store/auth.js

@@ -79,6 +79,8 @@ export const actions = {
           role
           about
           locationName
+          contributionsCount
+          commentsCount
           socialMedia {
             id
             url

webapp/yarn.lock

@@ -2689,6 +2689,13 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+buefy@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.7.7.tgz#0e0dea84e776959bf2c23110541d67a94eaaa1de"
+  integrity sha512-UuPD+/749s6XzRL2INoJxykOygcBo1pVlLlSJ7wodY228LGOYsURXSkMrCxeemwhvWzSq/UJ+D8X9BkyIw6Tww==
+  dependencies:
+    bulma "0.7.5"
+
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
@@ -2723,6 +2730,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bulma@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
+  integrity sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==
+
 busboy@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.3.1.tgz#170899274c5bf38aae27d5c62b71268cd585fd1b"