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/App.vue

@@ -1,22 +1,48 @@
 <template>
-  <router-view @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
+  <router-view :dependencies="loaded" @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'app',
+  computed: mapState(['recaptcha']),
+  data () {
+    return {
+      loaded: false
+    }
+  },
   mounted () {
-    // Remove loading animation.
-    let loading = document.getElementById('loading')
-    loading.classList.add('done')
+    if (this.recaptcha.length === 0) {
+      this.unload()
+      return
+    }
 
-    setTimeout(function () {
-      loading.parentNode.removeChild(loading)
-    }, 200)
+    let check = () => {
+      if (typeof window.grecaptcha === 'undefined') {
+        setTimeout(check, 100)
+        return
+      }
 
-    this.updateCSS()
+      this.unload()
+    }
+
+    check()
   },
   methods: {
+    unload () {
+      this.loaded = true
+      // Remove loading animation.
+      let loading = document.getElementById('loading')
+      loading.classList.add('done')
+
+      setTimeout(function () {
+        loading.parentNode.removeChild(loading)
+      }, 200)
+
+      this.updateCSS()
+    },
     updateCSS (global = false) {
       let css = this.$store.state.css
 

assets/src/css/login.css

@@ -29,6 +29,14 @@
   width: 90%;
 }
 
+#login.recaptcha form {
+  min-width: 304px;
+}
+
+#login #recaptcha {
+  margin: .5em 0 0;
+}
+
 #login input {
   width: 100%;
   width: 100%;

assets/src/router/index.js

@@ -51,14 +51,10 @@ const router = new Router({
           path: '/settings',
           name: 'Settings',
           component: Settings,
+          redirect: {
+            path: '/settings/profile'
+          },
           children: [
-            {
-              path: '/settings',
-              name: 'Settings',
-              redirect: {
-                path: '/settings/profile'
-              }
-            },
             {
               path: '/settings/profile',
               name: 'Profile Settings',

assets/src/store/index.js

@@ -17,6 +17,7 @@ const state = {
     window.CSS = null
     return css
   })(),
+  recaptcha: document.querySelector('meta[name="recaptcha"]').getAttribute('content'),
   staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'),
   baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
   noAuth: (document.querySelector('meta[name="noauth"]').getAttribute('content') === 'true'),

assets/src/utils/auth.js

@@ -31,8 +31,8 @@ function loggedIn () {
   })
 }
 
-function login (user, password) {
-  let data = {username: user, password: password}
+function login (user, password, captcha) {
+  let data = {username: user, password: password, recaptcha: captcha}
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('POST', `${store.state.baseURL}/api/auth/get`, true)

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 })
     }