Support reset password.

2019-09-05 17:08:20 +08:00 · 2019-09-05 17:08:20 +08:00 · 600f9d682e
parent 4da73491b9
commit 600f9d682e
6 changed files with 345 additions and 40 deletions
--- a/src/api/admin.js
+++ b/src/api/admin.js
@ -59,6 +59,22 @@ adminApi.refreshToken = refreshToken => {
  })
 }

+adminApi.sendResetCode = param => {
+  return service({
+    url: `${baseUrl}/password/code`,
+    data: param,
+    method: 'post'
+  })
+}
+
+adminApi.resetPassword = param => {
+  return service({
+    url: `${baseUrl}/password/reset`,
+    data: param,
+    method: 'put'
+  })
+}
+
 adminApi.updateAdminAssets = () => {
  return service({
    url: `${baseUrl}/halo-admin`,
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@ -218,6 +218,12 @@ export const constantRouterMap = [
    meta: { title: '安装向导' },
    component: () => import('@/views/system/Installation')
  },
+  {
+    path: '/password/reset',
+    name: 'ResetPassword',
+    meta: { title: '重置密码' },
+    component: () => import('@/views/user/ResetPassword')
+  },
  {
    path: '/404',
    name: 'NotFound',
--- a/src/permission.js
+++ b/src/permission.js
@ -1,14 +1,19 @@
 import Vue from 'vue'
 import router from './router'
 import store from './store'
-import { setDocumentTitle, domTitle } from '@/utils/domUtil'
+import {
+  setDocumentTitle,
+  domTitle
+} from '@/utils/domUtil'

 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style

-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+NProgress.configure({
+  showSpinner: false
+}) // NProgress Configuration

-const whiteList = ['Login', 'Install', 'NotFound'] // no redirect whitelist
+const whiteList = ['Login', 'Install', 'NotFound', 'ResetPassword'] // no redirect whitelist

 router.beforeEach((to, from, next) => {
  NProgress.start()
@ -16,7 +21,9 @@ router.beforeEach((to, from, next) => {
  Vue.$log.debug('Token', store.getters.token)
  if (store.getters.token) {
    if (to.name === 'Login') {
-      next({ name: 'Dashboard' })
+      next({
+        name: 'Dashboard'
+      })
      NProgress.done()
      return
    }
@ -35,6 +42,11 @@ router.beforeEach((to, from, next) => {
    return
  }

-  next({ name: 'Login', query: { redirect: to.fullPath } })
+  next({
+    name: 'Login',
+    query: {
+      redirect: to.fullPath
+    }
+  })
  NProgress.done()
 })
--- a/src/utils/service.js
+++ b/src/utils/service.js
@ -8,7 +8,7 @@ import router from '@/router'
 import { isObject } from './util'

 const service = axios.create({
-  timeout: 5000,
+  timeout: 8000,
  withCredentials: true
 })

--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@ -1,9 +1,9 @@
 <template>
-  <div class="container">
-    <div class="loginLogo animated fadeInUp">
+  <div class="container-wrapper">
+    <div class="halo-logo animated fadeInUp">
      <span>Halo</span>
    </div>
-    <div class="loginBody animated">
+    <div class="animated">
      <a-form
        layout="vertical"
        @keyup.enter.native="handleLogin"
@ -39,17 +39,27 @@
            />
          </a-input>
        </a-form-item>
-        <a-row>
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.3s'}"
+        >
          <a-button
            type="primary"
            :block="true"
            @click="handleLogin"
-            class="animated fadeInUp"
-            :style="{'animation-delay': '0.3s'}"
          >登录</a-button>
-        </a-row>
+        </a-form-item>

        <a-row>
+          <router-link :to="{ name:'ResetPassword' }">
+            <a
+              class="tip animated fadeInRight"
+              v-if="resetPasswordButton"
+              href="javascript:void(0);"
+            >
+              找回密码
+            </a>
+          </router-link>
          <a
            @click="handleApiModifyModalOpen"
            class="tip animated fadeInUp"
@ -92,12 +102,21 @@ export default {
      password: null,
      apiModifyVisible: false,
      defaultApiBefore: window.location.protocol + '//',
-      apiUrl: window.location.host
+      apiUrl: window.location.host,
+      resetPasswordButton: false
    }
  },
  computed: {
    ...mapGetters({ defaultApiUrl: 'apiUrl' })
  },
+  created() {
+    const _this = this
+    document.addEventListener('keydown', function(e) {
+      if (e.keyCode === 72 && e.altKey && e.shiftKey) {
+        _this.toggleHidden()
+      }
+    })
+  },
  methods: {
    ...mapActions(['login', 'loadUser', 'loadOptions']),
    ...mapMutations({
@ -144,49 +163,53 @@ export default {
    handleApiUrlRestore() {
      this.restoreApiUrl()
      this.apiUrl = this.defaultApiUrl
+    },
+    toggleHidden() {
+      this.resetPasswordButton = !this.resetPasswordButton
    }
  }
 }
 </script>
-<style lang="less" scope>
+<style lang="less">
 body {
  height: 100%;
  background-color: #f5f5f5;
 }
-.container {
-  background: #f7f7f7;
+
+.container-wrapper {
+  background: #ffffff;
  position: absolute;
+  border-radius: 5px;
  top: 45%;
  left: 50%;
  margin: -160px 0 0 -160px;
  width: 320px;
-  padding: 16px 32px 32px 32px;
+  padding: 18px 28px 28px 28px;
  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
+
+  .halo-logo {
+    margin-bottom: 20px;
+    text-align: center;
+    span {
+      vertical-align: text-bottom;
+      font-size: 38px;
+      display: inline-block;
+      font-weight: 600;
+      color: #1790fe;
+      background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      small {
+        margin-left: 5px;
+        font-size: 35%;
+      }
+    }
+  }
  .tip {
    cursor: pointer;
-    margin-top: .5rem;
+    margin-left: 0.5rem;
    float: right;
  }
 }
-.loginLogo {
-  margin-bottom: 20px;
-  text-align: center;
-}
-.loginLogo span {
-  vertical-align: text-bottom;
-  font-size: 36px;
-  display: inline-block;
-  font-weight: 600;
-  color: #1790fe;
-  background-image: -webkit-gradient(
-    linear,
-    37.219838% 34.532506%,
-    36.425669% 93.178216%,
-    from(#36c8f5),
-    to(#1790fe),
-    color-stop(0.37, #1790fe)
-  );
-  -webkit-text-fill-color: transparent;
-  -webkit-background-clip: text;
-}
 </style>
--- a/src/views/user/ResetPassword.vue
+++ b/src/views/user/ResetPassword.vue
@ -0,0 +1,248 @@
+<template>
+  <div class="container-wrapper">
+    <div class="halo-logo animated fadeInUp">
+      <span>Halo<small>重置密码</small></span>
+    </div>
+    <div class="animated">
+      <a-form layout="vertical">
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.1s'}"
+        >
+          <a-input
+            placeholder="用户名"
+            v-model="resetParam.username"
+          >
+            <a-icon
+              slot="prefix"
+              type="user"
+              style="color: rgba(0,0,0,.25)"
+            />
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.2s'}"
+        >
+          <a-input
+            placeholder="邮箱"
+            v-model="resetParam.email"
+          >
+            <a-icon
+              slot="prefix"
+              type="mail"
+              style="color: rgba(0,0,0,.25)"
+            />
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.3s'}"
+        >
+          <a-input
+            v-model="resetParam.code"
+            type="password"
+            placeholder="验证码"
+          >
+            <a-icon
+              slot="prefix"
+              type="safety-certificate"
+              style="color: rgba(0,0,0,.25)"
+            />
+            <a
+              href="javascript:void(0);"
+              slot="addonAfter"
+              @click="handleSendCode"
+            >
+              获取
+            </a>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.4s'}"
+        >
+          <a-input
+            v-model="resetParam.password"
+            type="password"
+            placeholder="新密码"
+          >
+            <a-icon
+              slot="prefix"
+              type="lock"
+              style="color: rgba(0,0,0,.25)"
+            />
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.5s'}"
+        >
+          <a-input
+            v-model="resetParam.confirmPassword"
+            type="password"
+            placeholder="确认密码"
+          >
+            <a-icon
+              slot="prefix"
+              type="lock"
+              style="color: rgba(0,0,0,.25)"
+            />
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          class="animated fadeInUp"
+          :style="{'animation-delay': '0.6s'}"
+        >
+          <a-button
+            type="primary"
+            :block="true"
+            @click="handleResetPassword"
+          >重置密码</a-button>
+        </a-form-item>
+
+        <a-row>
+          <router-link :to="{ name:'Login' }">
+            <a
+              class="tip animated fadeInUp"
+              :style="{'animation-delay': '0.7s'}"
+            >
+              返回登陆
+            </a>
+          </router-link>
+        </a-row>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import adminApi from '@/api/admin'
+
+export default {
+  data() {
+    return {
+      resetParam: {
+        username: '',
+        email: '',
+        code: '',
+        password: '',
+        confirmPassword: ''
+      }
+    }
+  },
+  methods: {
+    handleSendCode() {
+      if (!this.resetParam.username) {
+        this.$notification['error']({
+          message: '提示',
+          description: '用户名不能为空！'
+        })
+        return
+      }
+      if (!this.resetParam.email) {
+        this.$notification['error']({
+          message: '提示',
+          description: '邮箱不能为空！'
+        })
+        return
+      }
+      adminApi.sendResetCode(this.resetParam).then(response => {
+        this.$message.info('邮件发送成功，五分钟内有效')
+      })
+    },
+    handleResetPassword() {
+      if (!this.resetParam.username) {
+        this.$notification['error']({
+          message: '提示',
+          description: '用户名不能为空！'
+        })
+        return
+      }
+      if (!this.resetParam.email) {
+        this.$notification['error']({
+          message: '提示',
+          description: '邮箱不能为空！'
+        })
+        return
+      }
+      if (!this.resetParam.code) {
+        this.$notification['error']({
+          message: '提示',
+          description: '验证码不能为空！'
+        })
+        return
+      }
+      if (!this.resetParam.password) {
+        this.$notification['error']({
+          message: '提示',
+          description: '新密码不能为空！'
+        })
+        return
+      }
+      if (!this.resetParam.confirmPassword) {
+        this.$notification['error']({
+          message: '提示',
+          description: '确认密码不能为空！'
+        })
+        return
+      }
+      if (this.resetParam.confirmPassword !== this.resetParam.password) {
+        this.$notification['error']({
+          message: '提示',
+          description: '确认密码和新密码不匹配！'
+        })
+        return
+      }
+      adminApi.resetPassword(this.resetParam).then(response => {
+        this.$message.info('密码重置成功！')
+        this.$router.push({ name: 'Login' })
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+body {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.container-wrapper {
+  background: #ffffff;
+  position: absolute;
+  border-radius: 5px;
+  top: 45%;
+  left: 50%;
+  margin: -160px 0 0 -160px;
+  width: 320px;
+  padding: 18px 28px 28px 28px;
+  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
+
+  .halo-logo {
+    margin-bottom: 20px;
+    text-align: center;
+    span {
+      vertical-align: text-bottom;
+      font-size: 38px;
+      display: inline-block;
+      font-weight: 600;
+      color: #1790fe;
+      background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      small {
+        margin-left: 5px;
+        font-size: 35%;
+      }
+    }
+  }
+  .tip {
+    cursor: pointer;
+    margin-left: 0.5rem;
+    float: right;
+  }
+}
+</style>