pdf_tech_front_end/src/views/Login.vue

<script>
import { post, get } from '../../utils/request'
import crypto from '@/crypto/crypto'
import Eyecolse from '@/components/icon/eye_colse.vue'
import Eyeopen from '@/components/icon/eye_open.vue'
import Error from '@/components/icon/error.vue'
import { userStore } from '@/store/userInfo'

export default {
  components: { Eyecolse, Eyeopen, Error },
  data() {
    return {
      passwordError: false,
      emailError: false,
      empty: true,
      teamIds: '',
      passwordType: false,
      remenber: false,
      ruleForm: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: 'Email Address is required',
            trigger: ['']
          },
          {
            type: 'email',
            message: 'Please enter a valid Email Address',
            trigger: ['']
          }
        ],
        password: [
          { required: true, message: 'Password is required', trigger: [''] }
        ]
      }
    }
  },
  mounted() {
    const isRemenber = localStorage.getItem('isRemenber')
    if (isRemenber) {
      this.ruleForm.email = localStorage.getItem('username') || ''
      this.ruleForm.password =
        crypto.get(localStorage.getItem('password')) || ''
      this.remenber = true
    }
    this.isdisable()
  },
  methods: {
    submit() {
      this.passwordError = false
      this.emailError = false
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          var formdata = new FormData()
          formdata.append('username', this.ruleForm.email)
          formdata.append('password', this.ruleForm.password)
          post('/pdf-tech/login', formdata).then(
            (res) => {
              if (res.data.code === 200 && res.data.msg === '获取授权码成功') {
                this.$message({
                  type: 'success',
                  duration: 5000,
                  message: 'Sign in Success'
                })
                get(
                  '/pdf-tech/auth/getToken?code=' +
                    res.data.result
                ).then((res) => {
                  this.$cookies.remove('accessToken')
                  this.$cookies.set('accessToken', res.data.result.accessToken)
                  setTimeout(() => {
                    if (this.$route.query.teamIds) {
                      this.teamIds = this.$route.query.teamIds.split(',')
                      var urlencoded = new URLSearchParams()
                      urlencoded.append('memberId', this.$route.query.memberId)
                      urlencoded.append('teamIds', this.teamIds)
                      urlencoded.append('action', this.$route.query.action)
                      urlencoded.append('code', this.$route.query.code)
                      post(
                        '/pdf-tech/vppTeam/enterTeam',
                        urlencoded
                      ).then((res) => {
                        this.getMemberInfo()
                      })
                    } else {
                      this.getMemberInfo()
                    }
                  })
                })
                localStorage.setItem('username', this.ruleForm.email)
                const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
                localStorage.setItem('password', SECRET_PWD)
                if (this.remenber) {
                  localStorage.setItem('isRemenber', 'true')
                } else {
                  localStorage.removeItem('isRemenber')
                }
                
              } else if (
                res.data.code === 306 &&
                res.data.msg === '账号或者密码错误'
              ) {
                this.passwordError = true
                this.ruleForm.password = ''
                this.$message.error({
                  duration: 5000,
                  message: 'Incorrect email or password'
                })
              } else if (
                res.data.code === 302 &&
                res.data.msg === 'Please Create your Account first'
              ) {
                this.emailError = true
                this.passwordError = true
                this.ruleForm.password = ''
                this.ruleForm.email = ''
                this.$message({
                  type: 'error',
                  duration: 5000,
                  message: 'Please Create your Account first'
                })
              }
            }
          )
        } else {
          return false
        }
      })
    },
    isdisable() {
      if (
        this.ruleForm.email.trim() !== '' ||
        this.ruleForm.password.trim() !== ''
      ) {
        this.empty = false
      } else {
        this.empty = true
      }
      if (this.ruleForm.email.trim() !== '') {
        this.emailError = false
      }
      if (this.ruleForm.password.trim() !== '') {
        this.passwordError = false
      }
    },
    getMemberInfo () {
      get('/pdf-tech/vppMember/getMemberInfo').then((res) => {
        if (res.data.code === 200 && res.data.msg == 'success') {
          userStore().setUserInfo(res.data.result)
          get(
            '/pdf-tech/vppLicenseCode/checkCompanyLicense?companyId='+res.data.result.companyId
          ).then((res)=>{
            if(!res.data.result){
              this.$router.push('/non-admin-user')
              return
            }
          })
        }
        if (
          res.data.result.role?.indexOf("2") !== -1 || res.data.result.role?.indexOf("1") !== -1
        ) {
          this.$router.push('/dashboard')
        } else {
          this.$router.push('/non-admin-user')
        }
      })
    }
  }
}
</script>

<template>
  <div class="bg w-full h-100vh flex justify-center items-center m-auto">
    <div class="w-404px h-auto rounded-8px p-24px bg-[#fff] loginBox">
      <h1 class="text-24px font-bold mb-24px">Sign in</h1>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="100px"
        inline-message
      >
        <el-form-item prop="email">
          <div class="flex items-center">
            <el-input
              v-model="ruleForm.email"
              @input="isdisable()"
              placeholder="Email address"
            />
            <Error
              class="w-14px h-14px block"
              :class="emailError ? 'block' : 'hidden'"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="flex items-center">
            <el-input
              v-model="ruleForm.password"
              placeholder="Password"
              @input="isdisable()"
              @keyup.enter.native="submit()"
              :type="passwordType ? '' : 'password'"
            >
            </el-input>
            <span
              v-show="ruleForm.password !== ''"
              class="show-password"
              :class="passwordType ? 'eye-open' : 'eye-close'"
              @click="passwordType = !passwordType"
            >
              <Eyeopen v-show="passwordType" />
              <Eyecolse v-show="!passwordType" />
            </span>
            <Error
              class="w-14px h-14px block"
              :class="passwordError ? 'block' : 'hidden'"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-between items-center !text-12px">
            <el-checkbox
              label="Keep me logged in"
              name="type"
              v-model="remenber"
            ></el-checkbox>
            <router-link to="/forget-password" class="text-[#1460F3]">
              Forgot Password?
            </router-link>
          </div>
        </el-form-item>
        <el-form-item>
          <button
            :disabled="empty"
            type="button"
            @click="submit()"
            :class="empty ? 'opacity-20' : 'hover:opacity-80'"
            class="w-full h-48px bg-[#1460F3] text-[#fff] rounded-8px"
          >
            Sign in
          </button>
        </el-form-item>
        <!-- <div class="flex justify-end">
          <router-link to="/sign-up" class="text-12px text-[#1460F3]">
            Create account
          </router-link>
        </div> -->
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background: #e7eaee url('@/assets/images/background.png') center center
    no-repeat;
}
.loginBox {
  box-shadow: 0px 0px 12px rgba(35, 97, 169, 0.05);
}
.el-checkbox ::v-deep .el-checkbox__label {
  font-size: 12px;
  line-height: 16px;
}
.el-input::v-deep input {
  border: 0px !important;
  padding-right: 30px;
  border-bottom: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
}
.show-password {
  display: inline-block;
  position: absolute;
  right: 13px;
  top: 13px;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
</style>