加入用户设置与邮件通知

frontend/src/views/login/index.vue

@@ -34,6 +34,14 @@
           @keyup.enter.native="onKeyEnter"
         />
       </el-form-item>
+      <el-form-item v-if="isSignUp" prop="email" style="margin-bottom: 28px;">
+        <el-input
+          v-model="loginForm.email"
+          name="email"
+          :placeholder="$t('Email')"
+          @keyup.enter.native="onKeyEnter"
+        />
+      </el-form-item>
       <el-form-item style="border: none">
         <el-button v-if="isSignUp" :loading="loading" type="primary" style="width:100%;"
                    @click.native.prevent="handleSignup">
@@ -104,7 +112,8 @@ export default {
       loginForm: {
         username: '',
         password: '',
-        confirmPassword: ''
+        confirmPassword: '',
+        email: ''
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],

frontend/src/views/setting/Setting.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="app-container">
+    <el-form :model="userInfo" class="setting-form" ref="setting-form" label-width="150px" :rules="rules"
+             inline-message>
+      <el-form-item prop="username" :label="$t('Username')">
+        <el-input v-model="userInfo.username" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="password" :label="$t('Password')">
+        <el-input v-model="userInfo.password" type="password" :placeholder="$t('Password')"></el-input>
+      </el-form-item>
+      <el-form-item prop="email" :label="$t('Email')">
+        <el-input v-model="userInfo.email" :placeholder="$t('Email')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('Notification Trigger')">
+        <el-radio-group v-model="userInfo.setting.notification_trigger">
+          <el-radio label="notification_trigger_on_task_end">
+            {{$t('On Task End')}}
+          </el-radio>
+          <el-radio label="notification_trigger_on_task_error">
+            {{$t('On Task Error')}}
+          </el-radio>
+          <el-radio label="notification_trigger_never">
+            {{$t('Never')}}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <div class="buttons">
+          <el-button type="success" @click="saveUserInfo">{{$t('Save')}}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Setting',
+  data () {
+    const validatePass = (rule, value, callback) => {
+      if (!value) return callback()
+      if (value.length < 5) {
+        callback(new Error(this.$t('Password length should be no shorter than 5')))
+      } else {
+        callback()
+      }
+    }
+    const validateEmail = (rule, value, callback) => {
+      if (!value) return callback()
+      if (!value.match(/.+@.+/i)) {
+        callback(new Error(this.$t('Email format invalid')))
+      } else {
+        callback()
+      }
+    }
+    return {
+      userInfo: { setting: {} },
+      rules: {
+        password: [{ trigger: 'blur', validator: validatePass }],
+        email: [{ trigger: 'blur', validator: validateEmail }]
+      }
+    }
+  },
+  methods: {
+    getUserInfo () {
+      const data = localStorage.getItem('user_info')
+      if (!data) return {}
+      this.userInfo = JSON.parse(data)
+      if (!this.userInfo.setting) this.userInfo.setting = {}
+    },
+    saveUserInfo () {
+      this.$refs['setting-form'].validate(async valid => {
+        if (!valid) return
+        const res = await this.$store.dispatch('user/postInfo', {
+          password: this.userInfo.password,
+          email: this.userInfo.email,
+          notification_trigger: this.userInfo.setting.notification_trigger
+        })
+        if (!res || res.error) {
+          this.$message.error(res.error)
+        } else {
+          this.$message.success(this.$t('Saved successfully'))
+        }
+      })
+    }
+  },
+  async created () {
+    await this.$store.dispatch('user/getInfo')
+    this.getUserInfo()
+  }
+}
+</script>
+
+<style scoped>
+  .setting-form {
+    width: 600px;
+  }
+
+  .setting-form .buttons {
+    text-align: right;
+  }
+</style>

frontend/src/views/user/UserList.vue

@@ -15,6 +15,9 @@
             <el-option value="normal" :label="$t('normal')"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item prop="email" :label="$t('Email')">
+          <el-input v-model="userForm.email" :placeholder="$t('Email')"/>
+        </el-form-item>
       </el-form>
       <template slot="footer">
         <el-button size="small" @click="dialogVisible=false">{{$t('Cancel')}}</el-button>
@@ -107,11 +110,20 @@ export default {
         callback()
       }
     }
+    const validateEmail = (rule, value, callback) => {
+      if (!value) return callback()
+      if (!value.match(/.+@.+/i)) {
+        callback(new Error(this.$t('Email format invalid')))
+      } else {
+        callback()
+      }
+    }
     return {
       dialogVisible: false,
       isAdd: false,
       rules: {
-        password: [{ validator: validatePass }]
+        password: [{ validator: validatePass }],
+        email: [{ validator: validateEmail }]
       }
     }
   },
@@ -205,6 +217,8 @@ export default {
       this.isAdd = true
       this.$store.commit('user/SET_USER_FORM', {})
       this.dialogVisible = true
+    },
+    onValidateEmail (value) {
     }
   },
   created () {