From 12ae165ed9b3289c86109cca5cb969a746d3ff27 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Thu, 30 Jul 2020 08:40:26 +0800
Subject: [PATCH 1/4] add captcha

---
 src/components/lib/AjaxTable.vue |  2 +-
 src/components/lib/captcha.vue   | 48 ++++++++++++++++++++++++++++++++
 src/components/problem/list.vue  |  2 +-
 src/components/user/register.vue | 19 ++++++++++---
 src/sfconfig.js                  |  3 +-
 src/store/captcha.js             | 18 ++++++++++++
 src/store/store.js               |  4 ++-
 7 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 src/components/lib/captcha.vue
 create mode 100644 src/store/captcha.js

diff --git a/src/components/lib/AjaxTable.vue b/src/components/lib/AjaxTable.vue
index e7be4caf..a90821d8 100644
--- a/src/components/lib/AjaxTable.vue
+++ b/src/components/lib/AjaxTable.vue
@@ -44,7 +44,7 @@ export default {
           this.loading = false;
         })
         .catch(err => {
-          this.$SegmentMessage.error(this, '[Ajax Table] Request Failed.');
+          this.$SegmentMessage.error(this, '[Ajax Table] Request Failed');
           console.log(err);
         });
     }
diff --git a/src/components/lib/captcha.vue b/src/components/lib/captcha.vue
new file mode 100644
index 00000000..02f0ddde
--- /dev/null
+++ b/src/components/lib/captcha.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="captcha">
+    <el-input v-model="captcha_answer" placeholder="Solve Captcha"></el-input>
+    <img class="captcha-img" v-if="loaded" @click="refresh_captcha();" :src="img_url" />
+  </div>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'captcha',
+  data() {
+    return {
+      img_url: null,
+      captcha_answer: '',
+      loaded: false
+    };
+  },
+  watch: {
+    captcha_answer(val) {
+      this.$store.commit('setAnswer', {
+        val: val
+      });
+    }
+  },
+  methods: {
+    refresh_captcha() {
+      this.img_url = apiurl('/captcha/' + this.$store.state.captcha.captchaKey + '?sfid=' + String(Math.random()));
+    }
+  },
+  mounted() {
+    this.$store.commit('newCaptcha');
+    this.img_url = apiurl('/captcha/' + this.$store.state.captcha.captchaKey + '?sfid=' + String(Math.random()));
+    this.loaded = true;
+  }
+};
+</script>
+
+<style scoped>
+.captcha {
+  display: flex;
+}
+
+.captcha-img {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index 8a287bac..33c3cdd7 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -67,7 +67,7 @@ export default {
         this.data_count = data.res;
       })
       .catch(err => {
-        this.$SegmentMessage.error(this, '[Problem List] Get List Length Failed.');
+        this.$SegmentMessage.error(this, '[Problem List] Get List Length Failed');
         console.log(err);
       });
   }
diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index 7b880e9d..ff17d0ac 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -18,6 +18,8 @@
         <el-form-item prop="email">
           <el-input type="email" v-model="ldata.email"></el-input>
         </el-form-item>
+        <div class="icon-lable form-required"><i class="el-icon-check" /> Captcha</div>
+        <captcha class="margin-bottom" />
         <el-form-item>
           <el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Register</el-button>
           <el-button v-on:click="$store.state.user.showregister = false;">Cancel</el-button>
@@ -30,6 +32,7 @@
 
 <script>
 import apiurl from './../../apiurl';
+import captcha from './../lib/captcha.vue';
 
 export default {
   name: 'UserRegister',
@@ -99,7 +102,9 @@ export default {
         .post(apiurl('/account'), {
           username: this.ldata.username,
           password: this.ldata.password,
-          email: this.ldata.email
+          email: this.ldata.email,
+          captcha_key: this.$store.state.captcha.captchaKey,
+          captcha_answer: this.$store.state.captcha.captchaAnswer
         })
         .then(() => {
           this.$store.state.user.showregister = false;
@@ -137,13 +142,19 @@ export default {
     reset() {
       this.$refs['register'].resetFields();
     }
+  },
+  components: {
+    captcha
   }
 };
 </script>
 
 <style scoped>
-.form-required::before {
-    content: "*";
-    color: #f56c6c;
+.form-required {
+    margin-bottom: 5px;
+}
+
+.margin-bottom {
+    margin-bottom: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/sfconfig.js b/src/sfconfig.js
index 9c5b4b40..f639bfed 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -9,5 +9,6 @@ export default {
     pedantic: false,
     smartLists: true,
     smartypants: false,
-  }
+  },
+  captchaKeyMax: 2000000000
 };
\ No newline at end of file
diff --git a/src/store/captcha.js b/src/store/captcha.js
new file mode 100644
index 00000000..b0b44e98
--- /dev/null
+++ b/src/store/captcha.js
@@ -0,0 +1,18 @@
+import sfconfig from './../sfconfig';
+
+const captchastore = {
+  state: {
+    captchaKey: null,
+    captchaAnswer: null
+  },
+  mutations: {
+    newCaptcha(state) {
+      state.captchaKey = Math.floor(Math.random() * sfconfig.captchaKeyMax) + 1;
+    },
+    setAnswer(state, data) {
+      state.captchaAnswer = data.val;
+    }
+  }
+};
+
+export default captchastore;
\ No newline at end of file
diff --git a/src/store/store.js b/src/store/store.js
index c6d04ae9..9d6f0e3d 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -4,9 +4,11 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 import userstore from './user';
+import captchastore from './captcha';
 
 export default new Vuex.Store({
   modules: {
-    user: userstore
+    user: userstore,
+    captcha: captchastore
   }
 });
\ No newline at end of file

From 965e5f8b1f19061968457fe7b48095937e810a0f Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Thu, 30 Jul 2020 09:34:00 +0800
Subject: [PATCH 2/4] add captcha err

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/user/register.vue | 3 +++
 src/sfconfig.js                  | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index ff17d0ac..f1e3f626 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -117,6 +117,9 @@ export default {
           if (err.request.status === 400) {
             // HTTP 400 Bad Request
             this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
+          } else if (err.request.status === 406){
+            // HTTP 406 Not Acceptable
+            this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
           } else if (err.request.status === 409) {
             // HTTP 409 Conflict
             this.$SegmentMessage.error(this, 'Username has been taken');
diff --git a/src/sfconfig.js b/src/sfconfig.js
index f639bfed..74cb0e4e 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -1,6 +1,6 @@
 export default {
   api: {
-    server: 'http://172.32.5.25:8000/api'
+    server: 'http://172.32.1.144:8000/api'
   },
   markdown: {
     gfm: true,

From 92821dd50c5605dfb7e72beb7dd3f7388ce3335d Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Thu, 30 Jul 2020 09:50:37 +0800
Subject: [PATCH 3/4] make captcha refresh when err

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/user/register.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index f1e3f626..8de7ea20 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -19,7 +19,7 @@
           <el-input type="email" v-model="ldata.email"></el-input>
         </el-form-item>
         <div class="icon-lable form-required"><i class="el-icon-check" /> Captcha</div>
-        <captcha class="margin-bottom" />
+        <captcha ref="captchaElement" class="margin-bottom" />
         <el-form-item>
           <el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Register</el-button>
           <el-button v-on:click="$store.state.user.showregister = false;">Cancel</el-button>
@@ -96,6 +96,9 @@ export default {
     };
   },
   methods: {
+    refresh_captcha() {
+      this.$refs.captchaElement.refresh_captcha();
+    },
     submit() {
       this.buttonLoading = true;
       this.$axios
@@ -130,6 +133,7 @@ export default {
             // Unknown error
             this.$SegmentMessage.error(this, 'Unknown error');
           }
+          this.refresh_captcha();
           this.buttonLoading = false;
         });
     },

From 68872d804c8c5e51aa26627a61625712e3531f5e Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Thu, 30 Jul 2020 11:04:57 +0800
Subject: [PATCH 4/4] style fix

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/lib/captcha.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/lib/captcha.vue b/src/components/lib/captcha.vue
index 02f0ddde..2594e795 100644
--- a/src/components/lib/captcha.vue
+++ b/src/components/lib/captcha.vue
@@ -39,10 +39,14 @@ export default {
 
 <style scoped>
 .captcha {
-  display: flex;
+    display: flex;
 }
 
 .captcha-img {
-  margin-left: 10px;
+    margin-left: 10px;
+}
+
+.captcha-img:hover {
+    cursor: pointer;
 }
 </style>