From 9303bd5d36181d4516a31a4521a05d5003337a47 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sat, 15 Dec 2018 03:05:47 +0300
Subject: [PATCH 1/9] Base support for CAPTCHA (kocaptcha)

---
 src/components/registration/registration.js  | 12 +++++++++++-
 src/components/registration/registration.vue | 12 ++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index e5ead8bc..c4e96b3c 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,13 @@ const registration = {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
       this.$router.push('/main/all')
     }
+
+    fetch("/api/pleroma/captcha")
+      .then(resp => resp.json())
+      .then(resp => {
+        // TODO: check for errors
+        this.captcha = resp
+      })
   },
   computed: {
     token () { return this.$route.params.token },
@@ -45,6 +53,8 @@ const registration = {
     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()
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 8cb1392b..d4fb1ad0 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -75,6 +75,18 @@
               </ul>
             </div>
 
+            <div class="form-group" id="captcha-group">
+              <template v-if="captcha.type == 'kocaptcha'">
+                <img v-bind:src="captcha.url">
+
+                <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'>

From 92de235f4e15f7cd69e150e07d5251305a3c251c Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sat, 15 Dec 2018 03:06:21 +0300
Subject: [PATCH 2/9] Support disabling captcha

---
 src/components/registration/registration.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index d4fb1ad0..be0084dd 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -75,7 +75,7 @@
               </ul>
             </div>
 
-            <div class="form-group" id="captcha-group">
+            <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
               <template v-if="captcha.type == 'kocaptcha'">
                 <img v-bind:src="captcha.url">
 

From fc7cd6eaf6812656acf41b250358323a370dfdf3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 16 Dec 2018 02:02:49 +0300
Subject: [PATCH 3/9] small fix for overflowing tab-switcher

---
 src/components/tab_switcher/tab_switcher.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index fbd3321b..fa37349f 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -9,7 +9,6 @@
   .tabs {
     display: flex;
     position: relative;
-    justify-content: center;
     width: 100%;
     overflow-y: hidden;
     overflow-x: auto;

From a1d00b9398d711eb42f3bc5da70e5a6d48810154 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 16 Dec 2018 02:07:32 +0300
Subject: [PATCH 4/9] changed bottom-shadow hiding method to be more compatible
 with overflow

---
 src/components/tab_switcher/tab_switcher.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index fa37349f..26b1727a 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -13,7 +13,6 @@
     overflow-y: hidden;
     overflow-x: auto;
     padding-top: 5px;
-    height: 32px;
     box-sizing: border-box;
 
     &::after, &::before {
@@ -33,6 +32,7 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       padding: 5px 1em 99px;
+      margin-bottom: 5px - 99px - 1px;
       white-space: nowrap;
 
       &:not(.active) {

From 1b9a5a3efe783ca7cfe53116afc64756eb7a9f04 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 16 Dec 2018 02:35:42 +0300
Subject: [PATCH 5/9] more visual fixes

---
 src/components/tab_switcher/tab_switcher.jsx  | 12 +++--
 src/components/tab_switcher/tab_switcher.scss | 51 +++++++++++--------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 9e3dee04..2f362c4d 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -18,12 +18,18 @@ export default Vue.component('tab-switcher', {
     const tabs = this.$slots.default
           .filter(slot => slot.data)
           .map((slot, index) => {
-            const classes = ['tab']
+            const classesTab = ['tab']
+            const classesWrapper = ['tab-wrapper']
 
             if (index === this.active) {
-              classes.push('active')
+              classesTab.push('active')
+              classesWrapper.push('active')
             }
-            return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>)
+            return (
+              <div class={ classesWrapper.join(' ')}>
+                <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+              </div>
+            )
           });
     const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
       const active = index === this.active
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 26b1727a..428335c0 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -19,46 +19,57 @@
       display: block;
       content: '';
       flex: 1 1 auto;
-    }
-
-    .tab, &::after, &::before {
       border-bottom: 1px solid;
       border-bottom-color: $fallback--border;
       border-bottom-color: var(--border, $fallback--border);
     }
 
-    .tab {
+    .tab-wrapper {
+      height: 28px;
+      overflow: hidden;
       position: relative;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      padding: 5px 1em 99px;
-      margin-bottom: 5px - 99px - 1px;
-      white-space: nowrap;
+      display: flex;
+      flex: 0 0 auto;
 
-      &:not(.active) {
-        z-index: 4;
+      .tab {
+        width: 100%;
+        min-width: 1px;
+        position: relative;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding: 6px 1em;
+        padding-bottom: 99px;
+        margin-bottom: 6px - 99px;
+        white-space: nowrap;
 
-        &:hover {
-          z-index: 6;
+        &:not(.active) {
+          z-index: 4;
+
+          &:hover {
+            z-index: 6;
+          }
         }
 
+        &.active {
+          background: transparent;
+          z-index: 5;
+        }
+      }
+
+      &:not(.active) {
         &::after {
           content: '';
           position: absolute;
           left: 0;
           right: 0;
-          top: 26px;
+          bottom: 0;
+          z-index: 7;
           border-bottom: 1px solid;
           border-bottom-color: $fallback--border;
           border-bottom-color: var(--border, $fallback--border);
         }
       }
-
-      &.active {
-        background: transparent;
-        border-bottom: none;
-        z-index: 5;
-      }
     }
+
   }
 }

From a525df32c9bbba873ecca2939b013985c51d27bc Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sun, 16 Dec 2018 20:53:41 +0300
Subject: [PATCH 6/9] Separate captcha into the backendInteractor

---
 src/components/registration/registration.js              | 9 ++-------
 src/modules/users.js                                     | 4 ++++
 src/services/api/api.service.js                          | 3 +++
 .../backend_interactor_service.js                        | 2 ++
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index c4e96b3c..7a742b3d 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -31,12 +31,7 @@ const registration = {
       this.$router.push('/main/all')
     }
 
-    fetch("/api/pleroma/captcha")
-      .then(resp => resp.json())
-      .then(resp => {
-        // TODO: check for errors
-        this.captcha = resp
-      })
+    this.getCaptcha().then(cpt => this.captcha = cpt)
   },
   computed: {
     token () { return this.$route.params.token },
@@ -49,7 +44,7 @@ const registration = {
     })
   },
   methods: {
-    ...mapActions(['signUp']),
+    ...mapActions(['signUp', 'getCaptcha']),
     async submit () {
       this.user.nickname = this.user.username
       this.user.token = this.token
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,

From 3c9c8052f7c0f55940033a787e48578d38ab06ac Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sun, 16 Dec 2018 20:55:09 +0300
Subject: [PATCH 7/9] Fix style

---
 src/components/registration/registration.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 7a742b3d..0c65ac5d 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -31,7 +31,7 @@ const registration = {
       this.$router.push('/main/all')
     }
 
-    this.getCaptcha().then(cpt => this.captcha = cpt)
+    this.getCaptcha().then(cpt => { this.captcha = cpt })
   },
   computed: {
     token () { return this.$route.params.token },
@@ -48,8 +48,8 @@ const registration = {
     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.user.captcha_solution = this.captcha.solution
+      this.user.captcha_token = this.captcha.token
 
       this.$v.$touch()
 

From ab6f1904fae8fad7e4a5de89d6d613285283f28e Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sun, 16 Dec 2018 22:47:52 +0300
Subject: [PATCH 8/9] Add a way to get new captcha on click

---
 src/components/registration/registration.js  | 5 ++++-
 src/components/registration/registration.vue | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 0c65ac5d..6b79469c 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -31,7 +31,7 @@ const registration = {
       this.$router.push('/main/all')
     }
 
-    this.getCaptcha().then(cpt => { this.captcha = cpt })
+    this.setCaptcha()
   },
   computed: {
     token () { return this.$route.params.token },
@@ -61,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 be0084dd..f187e215 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -77,8 +77,9 @@
 
             <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
               <template v-if="captcha.type == 'kocaptcha'">
-                <img v-bind:src="captcha.url">
+                <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"

From d2984b9bc50a2565e8e83eaff36ce44239062e41 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@cock.li>
Date: Sun, 16 Dec 2018 22:55:11 +0300
Subject: [PATCH 9/9] Fix style

---
 src/components/registration/registration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 6b79469c..a6c79e87 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -62,7 +62,7 @@ const registration = {
         }
       }
     },
-    setCaptcha() {
+    setCaptcha () {
       this.getCaptcha().then(cpt => { this.captcha = cpt })
     }
   }