refactor: login page

src/components/Attachment/AttachmentSelectDrawer.vue

@@ -150,7 +150,7 @@ export default {
       this.queryParam.sort = this.pagination.sort
       attachmentApi
         .query(this.queryParam)
-        .then(response => {
+        .then((response) => {
           this.attachments = response.data.data.content
           this.pagination.total = response.data.data.total
         })

src/components/Editor/MarkdownEditor.vue

@@ -47,7 +47,7 @@ export default {
     handleAttachmentUpload(pos, $file) {
       var formdata = new FormData()
       formdata.append('file', $file)
-      attachmentApi.upload(formdata).then(response => {
+      attachmentApi.upload(formdata).then((response) => {
         var responseObject = response.data
         var HaloEditor = this.$refs.md
         HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))

src/components/Ellipsis/Ellipsis.vue

@@ -29,27 +29,23 @@ export default {
   },
   methods: {
     getStrDom(str, fullLength) {
-      return (
-        <span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
-      )
+      return <span>{cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '')}</span>
     },
     getTooltip(fullStr, fullLength) {
       return (
         <Tooltip>
-          <template slot="title">{ fullStr }</template>
-          { this.getStrDom(fullStr, fullLength) }
+          <template slot="title">{fullStr}</template>
+          {this.getStrDom(fullStr, fullLength)}
         </Tooltip>
       )
     }
   },
   render() {
     const { tooltip, length } = this.$props
-    const str = this.$slots.default.map(vNode => vNode.text).join('')
+    const str = this.$slots.default.map((vNode) => vNode.text).join('')
     const fullLength = getStrFullLength(str)
     const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
-    return (
-      strDom
-    )
+    return strDom
   }
 }
 </script>

src/components/FooterToolbar/index.less

@@ -1,6 +1,6 @@
-@import "../index";
+@import '../index';
 
-@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
+@footer-toolbar-prefix-cls: ~'@{ant-pro-prefix}-footer-toolbar';
 
 .@{footer-toolbar-prefix-cls} {
   position: fixed;
@@ -16,8 +16,8 @@
   z-index: 1000;
 
   &:after {
-    content: "";
+    content: '';
     display: block;
     clear: both;
   }
-}
+}

src/components/Login/LoginForm.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <a-form-model
+      ref="loginForm"
+      :model="form.model"
+      :rules="form.rules"
+      layout="vertical"
+      @keyup.enter.native="handleLogin"
+    >
+      <a-form-model-item
+        v-if="!form.needAuthCode"
+        class="animated fadeInUp"
+        :style="{'animation-delay': '0.1s'}"
+        prop="username"
+      >
+        <a-input
+          placeholder="用户名/邮箱"
+          v-model="form.model.username"
+        >
+          <a-icon
+            slot="prefix"
+            type="user"
+            style="color: rgba(0,0,0,.25)"
+          />
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item
+        v-if="!form.needAuthCode"
+        class="animated fadeInUp"
+        :style="{'animation-delay': '0.2s'}"
+        prop="password"
+      >
+        <a-input
+          v-model="form.model.password"
+          type="password"
+          placeholder="密码"
+        >
+          <a-icon
+            slot="prefix"
+            type="lock"
+            style="color: rgba(0,0,0,.25)"
+          />
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item
+        v-if="form.needAuthCode"
+        class="animated fadeInUp"
+        :style="{'animation-delay': '0.1s'}"
+        prop="authcode"
+      >
+        <a-input
+          placeholder="两步验证码"
+          v-model="form.model.authcode"
+          :maxLength="6"
+        >
+          <a-icon
+            slot="prefix"
+            type="safety-certificate"
+            style="color: rgba(0,0,0,.25)"
+          />
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item
+        class="animated fadeInUp"
+        :style="{'animation-delay': '0.3s'}"
+      >
+        <a-button
+          :loading="form.logging"
+          type="primary"
+          :block="true"
+          @click="handleLoginClick"
+        >{{ buttonName }}</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+<script>
+import adminApi from '@/api/admin'
+import { mapActions } from 'vuex'
+export default {
+  name: 'LoginForm',
+  data() {
+    const authcodeValidate = (rule, value, callback) => {
+      if (!value && this.form.needAuthCode) {
+        callback(new Error('* 请输入两步验证码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      form: {
+        model: {
+          authcode: null,
+          password: null,
+          username: null
+        },
+        rules: {
+          username: [{ required: true, message: '* 用户名/邮箱不能为空', trigger: ['change'] }],
+          password: [{ required: true, message: '* 密码不能为空', trigger: ['change'] }],
+          authcode: [{ validator: authcodeValidate, trigger: ['change'] }]
+        },
+        needAuthCode: false,
+        logging: false
+      }
+    }
+  },
+  computed: {
+    buttonName() {
+      return this.form.needAuthCode ? '验证' : '登录'
+    }
+  },
+  methods: {
+    ...mapActions(['login', 'refreshUserCache', 'refreshOptionsCache']),
+    handleLoginClick() {
+      const _this = this
+      _this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          _this.form.logging = true
+          if (_this.form.needAuthCode && _this.form.model.authcode) {
+            _this.handleLogin()
+          } else {
+            adminApi
+              .loginPreCheck(this.form.model.username, this.form.model.password)
+              .then((response) => {
+                const data = response.data.data
+                if (data && data.needMFACode) {
+                  _this.form.needAuthCode = true
+                  _this.form.model.authcode = null
+                } else {
+                  _this.handleLogin()
+                }
+              })
+              .finally(() => {
+                setTimeout(() => {
+                  _this.form.logging = false
+                }, 300)
+              })
+          }
+        }
+      })
+    },
+    handleLogin() {
+      const _this = this
+      _this.form.logging = true
+      _this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          _this
+            .login(_this.form.model)
+            .then((response) => {
+              _this.$emit('success')
+            })
+            .finally(() => {
+              setTimeout(() => {
+                _this.form.logging = false
+              }, 300)
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

src/components/Menu/SideMenu.vue

@@ -6,7 +6,7 @@
     v-model="collapsed"
     :trigger="null"
   >
-    <logo/>
+    <logo />
     <s-menu
       :collapsed="collapsed"
       :menu="menus"

src/components/Menu/menu.js

@@ -103,7 +103,7 @@ export default {
     },
     renderMenuItem(menu) {
       const target = menu.meta.target || null
-      const CustomTag = target && 'a' || 'router-link'
+      const CustomTag = (target && 'a') || 'router-link'
       const props = { to: { name: menu.name } }
       const attrs = { href: menu.path, target: menu.meta.target }
       return (
@@ -135,10 +135,8 @@ export default {
         return null
       }
       const props = {}
-      typeof (icon) === 'object' ? props.component = icon : props.type = icon
-      return (
-        <Icon {... { props } }/>
-      )
+      typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
+      return <Icon {...{ props }} />
     }
   },
   render() {
@@ -162,6 +160,6 @@ export default {
       return this.renderItem(item)
     })
 
-    return (<Menu {...dynamicProps}>{menuTree}</Menu>)
+    return <Menu {...dynamicProps}>{menuTree}</Menu>
   }
 }