imatrix-ui 0.0.15 → 0.1.1-up

package/src/views/login/index.vue

@@ -1,203 +1,296 @@
-<template>
-  <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-      <h3 class="title">
-***管理系统
-</h3>
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
-      </el-form-item>
-      <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon icon-class="password" />
-        </span>
-        <el-input
-          v-model="loginForm.password"
-          :type="pwdType"
-          name="password"
-          auto-complete="on"
-          placeholder="password"
-          @keyup.enter.native="handleLogin"
-/>
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon icon-class="eye" />
-        </span>
-      </el-form-item>
-      <el-form-item>
-        <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          Sign in
-        </el-button>
-      </el-form-item>
-      <div class="tips">
-        <span style="margin-right:20px;">
-***公司
-</span>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { validUsername } from '../../utils/validate'
-export default {
-  name: 'Login',
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const validatePass = (rule, value, callback) => {
-      if (value.length < 1) {
-        callback(new Error('密码不能小于5位'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: 'huhongchun',
-        password: '123'
-      },
-      loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePass }]
-      },
-      loading: false,
-      pwdType: 'password',
-      redirect: undefined
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
-  created: function() {
-    // 子系统是嵌套在iframe中的，所以需要把整个页面都显示为登录页面，而不要只在iframe中显示登录页面
-    window.top.location.href = '/#/login'
-  },
-  methods: {
-    showPwd() {
-      if (this.pwdType === 'password') {
-        this.pwdType = ''
-      } else {
-        this.pwdType = 'password'
-      }
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('login', this.loginForm).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-          }).catch(() => {
-            this.loading = false
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-$bg:#2d3a4b;
-$light_gray:#eee;
-
-/* reset element-ui css */
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
-      &:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: #fff !important;
-      }
-    }
-  }
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-}
-
-</style>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
-.login-container {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background-color: $bg;
-  .login-form {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 520px;
-    max-width: 100%;
-    padding: 35px 35px 15px 35px;
-    margin: 120px auto;
-  }
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-    span {
-      &:first-of-type {
-        margin-right: 16px;
-      }
-    }
-  }
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
-  }
-  .title {
-    font-size: 26px;
-    font-weight: 400;
-    color: $light_gray;
-    margin: 0px auto 40px auto;
-    text-align: center;
-    font-weight: bold;
-  }
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-}
-</style>
+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <h3 class="title">***管理系统</h3>
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          v-model="loginForm.username"
+          name="username"
+          type="text"
+          auto-complete="on"
+          placeholder="username"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          v-model="loginForm.password"
+          :type="pwdType"
+          name="password"
+          auto-complete="on"
+          placeholder="password"
+          @keyup.enter="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon icon-class="eye" />
+        </span>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :loading="loading"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleLogin"
+        >
+          Sign in
+        </el-button>
+      </el-form-item>
+      <div class="tips">
+        <span style="margin-right: 20px"> ***公司 </span>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { ElMessage as Message } from 'element-plus'
+export default {
+  name: 'Login',
+  data() {
+    const checkValidCode = (rule, value, callback) => {
+      // console.log('value=', value, 'this.validCode=', this.validCode)
+      if (!value) {
+        callback(new Error('请输入验证码'))
+      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
+        // this.refreshCode = Math.random()
+        callback(new Error('验证码不正确'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: '',
+        validCode: '',
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: 'blur', message: '请输入用户名' },
+        ],
+        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+        validCode: [
+          { required: true, trigger: 'blur', validator: checkValidCode },
+        ],
+      },
+      loading: false,
+      pwdType: 'password',
+      redirect: undefined,
+      validCodeVisible: false,
+      // 刷新验证码
+      refreshCode: 0,
+      validCode: '',
+    }
+  },
+  watch: {
+    $route: {
+      deep: true,
+
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect
+        // console.log('login--redirect', this.redirect)
+        const errorCode = route.query && route.query.errorCode
+        if (errorCode === 'sso.1021') {
+          // 表示超过失败登录次数，需要显示验证码
+          this.validCodeVisible = true
+          this.loginForm.validCode = ''
+          this.refreshCode = Math.random()
+        }
+      },
+
+      immediate: true,
+    },
+  },
+  created: function () {
+    // 子系统是嵌套在iframe中的，所以需要把整个页面都显示为登录页面，而不要只在iframe中显示登录页面
+    window.top.location.href = process.env.BASE_URL + '#/login'
+  },
+  methods: {
+    showPwd() {
+      if (this.pwdType === 'password') {
+        this.pwdType = ''
+      } else {
+        this.pwdType = 'password'
+      }
+    },
+    login() {
+      // return new Promise((resolve, reject) => {
+      this.$store
+        .dispatch('login', this.loginForm)
+        .then(() => {
+          this.loading = false
+          this.$router.push({ path: this.redirect || '/' })
+          // resolve()
+        })
+        .catch((error) => {
+          this.loading = false
+          if (error.response.status === 401) {
+            // console.log('error.response login==', error.response)
+            const errorData = error.response.data
+
+            if (errorData.code === 'sso.1021') {
+              // 表示超过失败登录次数，需要显示验证码
+              this.validCodeVisible = true
+              Message({
+                message: errorData.message,
+                showClose: true,
+                type: 'error',
+                duration: 5 * 1000,
+              })
+            } else {
+              // 表示超过失败登录次数，需要锁定用户，显示提示信息
+              this.validCodeVisible = false
+              Message({
+                message: errorData.message,
+                showClose: true,
+                type: 'error',
+                duration: 5 * 1000,
+              })
+            }
+          }
+          // reject(error)
+        })
+      // })
+    },
+    handleLogin() {
+      if (!this.validCodeVisible) {
+        this.validCode = 'aaaa'
+      }
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.$store
+            .dispatch('isPasswordExpired', this.loginForm)
+            .then((message) => {
+              if (
+                typeof message !== 'undefined' &&
+                message !== null &&
+                message !== false
+              ) {
+                // 表示密码已过期，需要重置密码
+                this.$router.push({
+                  path:
+                    '/update-password?errorMessage=' +
+                    message +
+                    '&username=' +
+                    this.loginForm.username +
+                    '&redirect=' +
+                    (this.redirect || '/'),
+                })
+              } else {
+                this.login()
+              }
+            })
+            .catch((error) => {
+              this.loading = false
+              console.log('error isPasswordExpired', error)
+            })
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+$bg: #2d3a4b;
+$light_gray: #eee;
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: #fff !important;
+      }
+    }
+  }
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+.login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background-color: $bg;
+  .login-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 520px;
+    max-width: 100%;
+    padding: 35px 35px 15px 35px;
+    margin: 120px auto;
+  }
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+  .title {
+    font-size: 26px;
+    font-weight: 400;
+    color: $light_gray;
+    margin: 0px auto 40px auto;
+    text-align: center;
+    font-weight: bold;
+  }
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>