加入用户设置与邮件通知

frontend/src/i18n/zh.js

@@ -11,6 +11,7 @@ export default {
   'Schedules': '定时任务',
   'Deploys': '部署',
   'Sites': '网站',
+  'Setting': '设置',
 
   // 标签
   'Overview': '概览',
@@ -323,6 +324,7 @@ export default {
   'The schedule has been removed': '已删除定时任务',
   'The schedule has been added': '已添加定时任务',
   'The schedule has been saved': '已保存定时任务',
+  'Email format invalid': '邮箱地址格式不正确',
 
   // 登录
   'Sign in': '登录',
@@ -343,6 +345,16 @@ export default {
   'Role': '角色',
   'Edit User': '更改用户',
   'Users': '用户',
+  'Email': '邮箱',
+  'Optional': '可选',
+
+  // 设置
+  'Notification Trigger': '通知触发',
+  'On Task End': '当任务结束',
+  'On Task Error': '当任务发生错误',
+  'Never': '从不',
+
+  // 其他
   tagsView: {
     closeOthers: '关闭其他',
     close: '关闭',

frontend/src/router/index.js

@@ -210,6 +210,24 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '/setting',
+    component: Layout,
+    meta: {
+      title: 'Setting',
+      icon: 'fa fa-gear'
+    },
+    children: [
+      {
+        path: '',
+        component: () => import('../views/setting/Setting'),
+        meta: {
+          title: 'Setting',
+          icon: 'fa fa-gear'
+        }
+      }
+    ]
+  },
 
   { path: '*', redirect: '/404', hidden: true }
 ]

frontend/src/store/modules/user.js

@@ -91,6 +91,11 @@ const user = {
         })
     },
 
+    // 修改用户信息
+    postInfo ({ commit }, form) {
+      return request.post('/me', form)
+    },
+
     // 注册
     register ({ dispatch, commit, state }, userInfo) {
       return new Promise((resolve, reject) => {

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 () {