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