refactor: modal-delete-user -> vue component + localizations

client/js/components/anchor.vue

@@ -7,13 +7,13 @@
         transition(name='modal-content')
           .modal-content(v-show='isShown')
             header.is-blue
-              span Copy link to this section
+              span {{ $t('modal.anchortitle') }}
             section
               p.control.is-fullwidth
                 input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") {{ $t('modal.copyclipboard') }}
 </template>
 
 <script>
@@ -38,7 +38,7 @@
         this.$store.dispatch('alert', {
           style: 'blue',
           icon: 'clipboard',
-          msg: 'The URL has been copied to your clipboard.'
+          msg: this.$t('modal.anchorsuccess')
         })
         this.$store.dispatch('anchorClose')
       },
@@ -46,7 +46,7 @@
         this.$store.dispatch('alert', {
           style: 'red',
           icon: 'clipboard',
-          msg: 'Clipboard copy failed. Copy the URL manually.'
+          msg: this.$t('modal.anchorerror')
         })
         this.$refs.anchorURLinput.select()
       }

client/js/components/modal-create-page.vue

@@ -6,15 +6,15 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-light-blue Create New Document
+            header.is-light-blue {{ $t('modal.createpagetitle') }}
             section
-              label.label Enter the new document path:
+              label.label {{ $t('modal.createpagepath') }}
               p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
                 input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
-                span.help.is-red(v-show='isInvalid') This document path is invalid!
+                span.help.is-red(v-show='isInvalid') {{ $t('modal.createpageinvalid') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-light-blue(v-on:click='create') Create
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-light-blue(v-on:click='create') {{ $t('modal.create') }}
 </template>
 
 <script>

client/js/components/modal-delete-user.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
+      .modal-container
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
+            header.is-red
+              span {{ $t('modal.deleteusertitle') }}
+              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
+            section
+              span {{ $t('modal.deleteuserwarning') }}
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.abort') }}
+              a.button.is-red(v-on:click='deleteUser') {{ $t('modal.delete') }}
+</template>
+
+<script>
+  export default {
+    name: 'modal-delete-user',
+    props: ['currentUser'],
+    data () {
+      return {
+        isLoading: false
+      }
+    },
+    computed: {
+      isShown () {
+        return this.$store.state.modalDeleteUser.shown
+      }
+    },
+    methods: {
+      cancel: function () {
+        this.isLoading = false
+        this.$store.dispatch('modalDeleteUser/close')
+      },
+      discard: function () {
+        let self = this
+        this.isLoading = true
+        this.$http.delete('/admin/users/' + this.currentUser).then(resp => {
+          return resp.json()
+        }).then(resp => {
+          if (resp.ok) {
+            window.location.assign('/admin/users')
+          } else {
+            self.isLoading = false
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: resp.msg
+            })
+          }
+        }).catch(err => {
+          self.isLoading = false
+          self.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: 'Error: ' + err.body.msg
+          })
+        })
+      }
+    }
+  }
+</script>

client/js/components/modal-discard-page.vue

@@ -6,13 +6,13 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-orange Discard?
+            header.is-orange {{ $t('modal.discardpagetitle') }}
             section
-              span(v-if='mode === "create"') Are you sure you want to leave this page and loose anything you wrote so far?
-              span(v-else) Are you sure you want to leave this page and loose any modifications?
+              span(v-if='mode === "create"') {{ $t('modal.discardpagecreate') }}
+              span(v-else) {{ $t('modal.discardpageedit') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='stay') Stay on page
-              a.button.is-orange(v-on:click='discard') Discard
+              a.button.is-grey.is-outlined(v-on:click='stay') {{ $t('modal.discardpagestay') }}
+              a.button.is-orange(v-on:click='discard') {{ $t('modal.discard') }}
 </template>
 
 <script>

client/js/components/modal-move-page.vue

@@ -6,16 +6,16 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-indigo Move document
+            header.is-indigo {{ $t('modal.movepagetitle') }}
             section
-              label.label Enter the new document path:
+              label.label {{ $t('modal.movepagepath') }}
               p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-                input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
-                span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
-                span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+                input.input(type='text', v-bind:placeholder='$t("modal.movepageplaceholder")', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
+                span.help.is-red(v-show='isInvalid') {{ $t('modal.movepageinvalid') }}
+                span.note {{ $t('modal.movepagewarning') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-indigo(v-on:click='move') Move
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-indigo(v-on:click='move') {{ $t('modal.move') }}
 </template>
 
 <script>