Merge branch 'captcha' into 'develop'

Captcha

See merge request pleroma/pleroma-fe!424

5 files changed, 32 insertions, 2 deletions

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index e5ead8bc..a6c79e87 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -11,7 +11,8 @@ const registration = {
       username: '',
       password: '',
       confirm: ''
-    }
+    },
+    captcha: {}
   }),
   validations: {
     user: {
@@ -29,6 +30,8 @@ const registration = {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
       this.$router.push('/main/all')
     }
+
+    this.setCaptcha()
   },
   computed: {
     token () { return this.$route.params.token },
@@ -41,10 +44,12 @@ const registration = {
     })
   },
   methods: {
-    ...mapActions(['signUp']),
+    ...mapActions(['signUp', 'getCaptcha']),
     async submit () {
       this.user.nickname = this.user.username
       this.user.token = this.token
+      this.user.captcha_solution = this.captcha.solution
+      this.user.captcha_token = this.captcha.token
 
       this.$v.$touch()
 
@@ -56,6 +61,9 @@ const registration = {
           console.warn('Registration failed: ' + error)
         }
       }
+    },
+    setCaptcha () {
+      this.getCaptcha().then(cpt => { this.captcha = cpt })
     }
   }
 }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 8cb1392b..f187e215 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -75,6 +75,19 @@
               </ul>
             </div>
 
+            <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
+              <template v-if="captcha.type == 'kocaptcha'">
+                <img v-bind:src="captcha.url" v-on:click="setCaptcha">
+
+                <sub>Click the image to get a new captcha</sub>
+                <label class='form--label' for='captcha-label'>CAPTCHA</label>
+
+                <input :disabled="isPending"
+                  v-model='captcha.solution'
+                  class='form-control' id='captcha-answer' type='text'>
+              </template>
+            </div>
+
             <div class='form-group' v-if='token' >
               <label for='token'>{{$t('registration.token')}}</label>
               <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
diff --git a/src/modules/users.js b/src/modules/users.js
index 25d1c81f..65b172bc 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -142,6 +142,10 @@ const users = {
         throw Error(errors)
       }
     },
+    async getCaptcha (store) {
+      return await store.rootState.api.backendInteractor.getCaptcha()
+    },
+
     logout (store) {
       store.commit('clearCurrentUser')
       store.commit('setToken', false)
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ae876b7f..b509c905 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -167,6 +167,8 @@ const register = (params) => {
   })
 }
 
+const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())
+
 const authHeaders = (accessToken) => {
   if (accessToken) {
     return { 'Authorization': `Bearer ${accessToken}` }
@@ -496,6 +498,7 @@ const apiService = {
   setUserMute,
   fetchMutes,
   register,
+  getCaptcha,
   updateAvatar,
   updateBg,
   updateProfile,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index c84373ac..cc72f607 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -71,6 +71,7 @@ const backendInteractorService = (credentials) => {
   const fetchMutes = () => apiService.fetchMutes({credentials})
   const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
 
+  const getCaptcha = () => apiService.getCaptcha()
   const register = (params) => apiService.register(params)
   const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
   const updateBg = ({params}) => apiService.updateBg({credentials, params})
@@ -100,6 +101,7 @@ const backendInteractorService = (credentials) => {
     setUserMute,
     fetchMutes,
     register,
+    getCaptcha,
     updateAvatar,
     updateBg,
     updateBanner,