implement recaptcha on login

Former-commit-id: d7495b6fff4a99a8d155a3be87b15535a74a1305 [formerly 5b3a544447cca0d1cdcb6c87ca94f450a5493506] [formerly b4de1a4f5d4dd295c98366ede2b87bf2cb7918f9 [formerly 002f8066c794c9c440ec437743f6ddfa864f976b]]
Former-commit-id: c0e5d38111a99f8e3e71fb5db86e19b7ba44ec48 [formerly 1b5e454263ba64ced95c6d4b51f5f32e66f74758]
Former-commit-id: cfb17a53fc86d0071fba91503502444f5f10a0c7

assets/src/views/Login.vue

@@ -1,11 +1,12 @@
 <template>
-  <div id="login">
+  <div id="login" :class="{ recaptcha: recaptcha.length > 0 }">
     <form @submit="submit">
       <img src="../assets/logo.svg" alt="File Manager">
       <h1>File Manager</h1>
       <div v-if="wrong" class="wrong">{{ $t("login.wrongCredentials") }}</div>
       <input type="text" v-model="username" :placeholder="$t('login.username')">
       <input type="password" v-model="password" :placeholder="$t('login.password')">
+      <div v-if="recaptcha.length" id="recaptcha"></div>
       <input type="submit" :value="$t('login.submit')">
     </form>
   </div>
@@ -13,9 +14,12 @@
 
 <script>
 import auth from '@/utils/auth'
+import { mapState } from 'vuex'
 
 export default {
   name: 'login',
+  props: ['dependencies'],
+  computed: mapState(['recaptcha']),
   data: function () {
     return {
       wrong: false,
@@ -23,8 +27,23 @@ export default {
       password: ''
     }
   },
+  mounted () {
+    if (this.dependencies) this.setup()
+  },
+  watch: {
+    dependencies: function (val) {
+      if (val) this.setup()
+    }
+  },
   methods: {
-    submit: function (event) {
+    setup () {
+      if (this.recaptcha.length === 0) return
+
+      window.grecaptcha.render('recaptcha', {
+        sitekey: this.recaptcha
+      })
+    },
+    submit (event) {
       event.preventDefault()
       event.stopPropagation()
 
@@ -33,7 +52,17 @@ export default {
         redirect = '/files/'
       }
 
-      auth.login(this.username, this.password)
+      let captcha = ''
+      if (this.recaptcha.length > 0) {
+        captcha = window.grecaptcha.getResponse()
+
+        if (captcha === '') {
+          this.wrong = true
+          return
+        }
+      }
+
+      auth.login(this.username, this.password, captcha)
         .then(() => { this.$router.push({ path: redirect }) })
         .catch(() => { this.wrong = true })
     }