From 8726494340cfa53a9d947cafed670bb6f00769a9 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sat, 14 Apr 2018 15:22:45 -0400
Subject: [PATCH] feat: admin - contribute

---
 client/components/admin.vue                  |  7 +-
 client/components/admin/admin-contribute.vue | 60 ++++++++++++++
 client/components/admin/admin-dashboard.vue  |  2 +-
 client/components/login.vue                  | 87 ++++++++++++--------
 4 files changed, 119 insertions(+), 37 deletions(-)
 create mode 100644 client/components/admin/admin-contribute.vue

diff --git a/client/components/admin.vue b/client/components/admin.vue
index 59ea4986..a6166e60 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -62,6 +62,10 @@
         v-list-tile(to='/dev')
           v-list-tile-action: v-icon weekend
           v-list-tile-title Developer Tools
+        v-divider.my-2
+        v-list-tile(to='/contribute')
+          v-list-tile-action: v-icon favorite
+          v-list-tile-title Contribute to Wiki.js
 
     v-content
       transition(name='admin-router')
@@ -108,7 +112,8 @@ const router = new VueRouter({
     { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-api.vue') },
     { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-system.vue') },
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
-    { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev.vue') }
+    { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev.vue') },
+    { path: '/contribute', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-contribute.vue') }
   ]
 })
 
diff --git a/client/components/admin/admin-contribute.vue b/client/components/admin/admin-contribute.vue
new file mode 100644
index 00000000..9cbf6c91
--- /dev/null
+++ b/client/components/admin/admin-contribute.vue
@@ -0,0 +1,60 @@
+<template lang='pug'>
+  v-card(flat)
+    v-card(color='grey lighten-5')
+      .pa-3.pt-4
+        .headline.primary--text Contribute
+        .subheading.grey--text Help support Wiki.js development and operations
+
+      v-card.pa-3
+        .body-1.pl-3 Wiki.js is a #[strong free and open-source software] brought to you with #[v-icon(color='red') favorite] by #[a(href='https://requarks.io', target='_blank') requarks.io] and #[a(href='https://github.com/Requarks/wiki/graphs/contributors', target='_blank') contributors].
+        .body-1.pt-3.pl-3 We need your help to keep improving the software and run the various associated services (e.g. hosting and networking).
+        v-divider
+        v-subheader Fund our work
+        .body-1.pl-3 Wiki.js is part of the Open Collective initiative. You can contribute financially by making a monthly or one-time donation:
+        v-card-actions.mt-3.ml-2
+          v-btn(depressed, color='primary', href='https://opencollective.com/wikijs')
+            v-icon(left) local_atm
+            | Make a donation
+        v-divider
+        v-subheader Contribute
+        .body-1.pl-3
+          ul
+            li Submit an idea or vote on a proposed one on the #[a(href='https://requests.requarks.io/wiki', target='_blank') feature requests board].
+            li Found a bug? Submit an issue on #[a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github].
+            li Help translate Wiki.js in your language. Let us know on #[a(href='https://gitter.im/Requarks/wiki', target='_blank') Gitter].
+        v-divider
+        v-subheader Spread the word
+        .body-1.pl-3
+          ul
+            li Talk to your friends and colleagues about how awesome Wiki.js is!
+            li Follow us on #[a(href='https://twitter.com/requarks', target='_blank') Twitter].
+
+</template>
+
+<script>
+import IconGithubCircle from 'mdi/github-circle'
+
+export default {
+  components: {
+    IconGithubCircle
+  },
+  data() {
+    return {
+      tab: '0',
+      telemetry: true
+    }
+  },
+  methods: {
+    resetClientID() {
+
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+ul {
+  margin-left: 1rem;
+  list-style-type: square;
+}
+</style>
diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue
index c38a3252..464141f8 100644
--- a/client/components/admin/admin-dashboard.vue
+++ b/client/components/admin/admin-dashboard.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .headline.primary--text Dashboard
-        .subheading.grey--text Coming soon
+        .subheading.grey--text Wiki.js v2 ALPHA Build - NOT FOR PRODUCTION USE
 </template>
 
 <script>
diff --git a/client/components/login.vue b/client/components/login.vue
index 31e0a538..6540ef95 100644
--- a/client/components/login.vue
+++ b/client/components/login.vue
@@ -35,12 +35,24 @@
       .login-copyright
         span {{ $t('footer.poweredBy') }}
         a(href='https://wiki.js.org', rel='external', title='Wiki.js') Wiki.js
+
+    v-snackbar(
+      :color='notification.style'
+      bottom,
+      right,
+      multi-line,
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
 </template>
 
 <script>
 /* global siteConfig */
 
 import _ from 'lodash'
+import { mapState } from 'vuex'
 
 import strategiesQuery from 'gql/login-query-strategies.gql'
 import loginMutation from 'gql/login-mutation-login.gql'
@@ -62,12 +74,16 @@ export default {
     }
   },
   computed: {
+    ...mapState(['notification']),
+    notificationState: {
+      get() { return this.notification.isActive },
+      set(newState) { this.$store.commit('updateNotificationState', newState) }
+    },
     siteTitle () {
       return siteConfig.title
     }
   },
   mounted () {
-    this.$store.commit('navigator/subtitleStatic', 'Login')
     this.refreshStrategies()
     this.$refs.iptEmail.focus()
   },
@@ -95,27 +111,27 @@ export default {
         this.isLoading = false
       }).catch(err => {
         console.error(err)
-        this.$store.dispatch('alert', {
-          style: 'error',
-          icon: 'gg-warning',
-          msg: err.message
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: err.message,
+          icon: 'warning'
         })
         this.isLoading = false
       })
     },
     login () {
       if (this.username.length < 2) {
-        this.$store.dispatch('alert', {
-          style: 'error',
-          icon: 'gg-warning',
-          msg: 'Enter a valid email / username.'
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: 'Enter a valid email / username.',
+          icon: 'warning'
         })
         this.$refs.iptEmail.focus()
       } else if (this.password.length < 2) {
-        this.$store.dispatch('alert', {
-          style: 'error',
-          icon: 'gg-warning',
-          msg: 'Enter a valid password.'
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: 'Enter a valid password.',
+          icon: 'warning'
         })
         this.$refs.iptPassword.focus()
       } else {
@@ -130,7 +146,7 @@ export default {
         }).then(resp => {
           if (_.has(resp, 'data.authentication.login')) {
             let respObj = _.get(resp, 'data.authentication.login', {})
-            if (respObj.operation.succeeded === true) {
+            if (respObj.responseResult.succeeded === true) {
               if (respObj.tfaRequired === true) {
                 this.screen = 'tfa'
                 this.securityCode = ''
@@ -139,25 +155,26 @@ export default {
                   this.$refs.iptTFA.focus()
                 })
               } else {
-                this.$store.dispatch('alert', {
+                this.$store.commit('showNotification', {
+                  message: 'Login successful!',
                   style: 'success',
-                  icon: 'gg-check',
-                  msg: 'Login successful!'
+                  icon: 'check'
                 })
+                window.location.replace('/') // TEMPORARY - USE RETURNURL
               }
               this.isLoading = false
             } else {
-              throw new Error(respObj.operation.message)
+              throw new Error(respObj.responseResult.message)
             }
           } else {
             throw new Error('Authentication is unavailable.')
           }
         }).catch(err => {
           console.error(err)
-          this.$store.dispatch('alert', {
-            style: 'error',
-            icon: 'gg-warning',
-            msg: err.message
+          this.$store.commit('showNotification', {
+            style: 'red',
+            message: err.message,
+            icon: 'warning'
           })
           this.isLoading = false
         })
@@ -165,10 +182,10 @@ export default {
     },
     verifySecurityCode () {
       if (this.securityCode.length !== 6) {
-        this.$store.dispatch('alert', {
-          style: 'error',
-          icon: 'gg-warning',
-          msg: 'Enter a valid security code.'
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: 'Enter a valid security code.',
+          icon: 'warning'
         })
         this.$refs.iptTFA.focus()
       } else {
@@ -182,25 +199,25 @@ export default {
         }).then(resp => {
           if (_.has(resp, 'data.authentication.loginTFA')) {
             let respObj = _.get(resp, 'data.authentication.loginTFA', {})
-            if (respObj.operation.succeeded === true) {
-              this.$store.dispatch('alert', {
+            if (respObj.responseResult.succeeded === true) {
+              this.$store.commit('showNotification', {
+                message: 'Login successful!',
                 style: 'success',
-                icon: 'gg-check',
-                msg: 'Login successful!'
+                icon: 'check'
               })
               this.isLoading = false
             } else {
-              throw new Error(respObj.operation.message)
+              throw new Error(respObj.responseResult.message)
             }
           } else {
             throw new Error('Authentication is unavailable.')
           }
         }).catch(err => {
           console.error(err)
-          this.$store.dispatch('alert', {
-            style: 'error',
-            icon: 'gg-warning',
-            msg: err.message
+          this.$store.commit('showNotification', {
+            style: 'red',
+            message: err.message,
+            icon: 'warning'
           })
           this.isLoading = false
         })