pdf_tech_front_end/src/views/Settings.vue

<script>
import { post, put } from '../../utils/request'
import { country } from '../../utils/country.js'
import { userStore } from '@/store/userInfo'

export default {
  props: {
    getInfo: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      active: 0,
      country: [],
      ruleForm: {
        userName: '',
        email: '',
        area: ''
      },
      rules: {
        userName: [
          { required: true, message: 'User name is required', trigger: [''] }
        ],
        email: [],
        area: [{ required: true, message: 'Area is required', trigger: [''] }]
      },
      ruleFormPass: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rulesPass: {
        oldPassword: [
          { required: true, message: 'Please fill old password', trigger: [''] }
        ],
        newPassword: [
          { required: true, message: 'Please fill new password', trigger: [''] }
        ],
        confirmPassword: [
          {
            required: true,
            message: 'Confirm password is required',
            trigger: ['']
          }
        ]
      },
      generalLoading: false,
      role: ''
    }
  },
  methods: {
    changePassword() {
      this.$refs['ruleFormPass'].validate((valid) => {
        if (valid) {
          post('/pdf-tech/vppMember/updatePassword', {
            password: this.ruleFormPass.oldPassword,
            newPassword: this.ruleFormPass.newPassword,
            newPasswordConfirm: this.ruleFormPass.confirmPassword
          }).then((res) => {
            if (
              res.data.code === 200 &&
              res.data.msg === 'Password updated successfully'
            ) {
              this.$message({
                duration: 5000,
                message: 'Change Successfully',
                type: 'success'
              })
              this.$router.push('/login')
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Old Password error'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Old Password Incorrect'
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Different Password'
            ) {
              this.$message.error({
                message: "New password and confirm password don't match"
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Password must between 6-24 characters'
            ) {
              this.$message.error({
                message: 'The passwords must be 6-24 characters'
              })
            } else if (
              res.data.code === 302 &&
              res.data.msg === 'Please Create your Account first'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Please Create your Account first'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    changeInfo() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.generalLoading) return
          this.generalLoading = true
          put('/pdf-tech/vppSet/setGeneral', {
            userName: this.ruleForm.userName,
            area: this.ruleForm.area
          }).then((res) => {
            setTimeout(() => {
              this.generalLoading = false
            }, 2000)
            if (res.data.code === 200 && res.data.msg === 'success') {
              this.$message({
                duration: 5000,
                message: 'Change Success',
                type: 'success'
              })
              this.getInfo()
            } else if (
              res.data.code === 306 &&
              res.data.msg === '账号或者密码错误'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Old Password Incorrect'
              })
            } else if (
              res.data.code === 302 &&
              res.data.msg === 'Please Create your Account first'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Please Create your Account first'
              })
            }
          })
        } else {
          return false
        }
      })
    }
  },
  mounted() {
    this.country = country()
    this.ruleForm.email = userStore().user.email
    this.ruleForm.userName = userStore().user.userName
    this.ruleForm.area = userStore().user.area || ''
    this.role = userStore().user.role
  }
}
</script>

<template>
  <div>
    <h1 class="text-28px leading-40px mb-15px font-700">Settings</h1>
    <div class="flex">
      <span
        class="
          flex
          justify-center
          bg-[#C6C9CC]
          rounded-t-8px
          items-center
          font-bold
          w-200px
          h-32px
          hand
        "
        @click="active = 0"
        :class="active === 0 ? 'active' : ''"
        >General</span
      >
      <span
        class="
          flex
          justify-center
          bg-[#C6C9CC]
          rounded-t-8px
          items-center
          font-bold
          w-200px
          h-32px
          ml-8px
          hand
        "
        @click="active = 1"
        :class="active === 1 ? 'active' : ''"
        >Security</span
      >
    </div>
    <div class="bg-[#fff] card">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="100px"
        inline-message
        class="p-40px"
        v-show="active === 0"
      >
        <el-form-item label="Reseller Name" prop="userName" v-if="role === '4'">
          <div style="display: flex">
            <el-input
              v-model="ruleForm.userName"
              class="username"
              disabled="true"
              placeholder="Reseller Name"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="User Name" prop="userName" v-else>
          <div style="display: flex">
            <el-input
              v-model="ruleForm.userName"
              class="username"
              placeholder="User Name"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="Email" prop="email" class="w-600px">
          <div style="display: flex">
            <el-input
              v-model.trim="ruleForm.email"
              class="email"
              disabled
              placeholder="Email address confirmation"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="Country/Region">
          <select v-model="ruleForm.area" class="flex w-600px !h-40px" :class="{ '!text-[#232A40]': ruleForm.area !== '' }">
            <option value="" selected>Choose your country/region</option>
            <option
              v-for="(item, index) in country"
              :key="index"
              :value="item.name"
            >
              {{ item.name }}
            </option>
          </select>
        </el-form-item>
        <el-form-item>
          <button
            type="button"
            @click="changeInfo()"
            class="
              w-168px
              h-48px
              bg-[#1460F3]
              text-[#fff]
              rounded-8px
              font-bold
              hover:opacity-80
            "
          >
            Save the Change
          </button>
        </el-form-item>
      </el-form>
      <el-form
        :model="ruleFormPass"
        ref="ruleFormPass"
        :rules="rulesPass"
        label-position="top"
        label-width="100px"
        inline-message
        class="p-40px"
        v-show="active === 1"
      >
        <el-form-item prop="oldPassword">
          <span slot="label" class="font-bold"
            >Old Password<span class="text-[#FF5054]">*</span></span
          >
          <div style="display: flex">
            <el-input
              type="password"
              class="username"
              v-model.trim="ruleFormPass.oldPassword"
              placeholder="Please enter an old password "
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="newPassword">
          <span slot="label" class="font-bold"
            >New Password<span class="text-[#FF5054]">*</span></span
          >
          <div style="display: flex">
            <el-input
              type="password"
              class="username"
              v-model.trim="ruleFormPass.newPassword"
              placeholder="Please enter a new password "
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <span slot="label" class="font-bold"
            >Confirm Password<span class="text-[#FF5054]">*</span></span
          >
          <div style="display: flex">
            <el-input
              type="password"
              class="username"
              v-model.trim="ruleFormPass.confirmPassword"
              placeholder="Please confirm the new password "
            >
            </el-input>
          </div>
        </el-form-item>
        <router-link
          to="/forget-password"
          class="flex ml-8px leading-20px mb-10px text-[#1460F3]"
          >Forgot Your Password?</router-link
        >
        <el-form-item>
          <button
            type="button"
            @click="changePassword()"
            class="
              w-168px
              h-48px
              bg-[#1460F3]
              text-[#fff]
              rounded-8px
              font-bold
              hover:opacity-80
            "
          >
            Save the Change
          </button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hand {
  cursor: pointer;
}
.el-form-item::v-deep label {
  color: #232a40 !important;
}
.active {
  color: #1460f3;
  background-color: #fff;
}
.card {
  border-radius: 8px;
  border-top-left-radius: 0px;
}
.el-input::v-deep input {
  border: 0px !important;
  border-bottom: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
}
.username::v-deep input {
  border-radius: 0px !important;
}
.email::v-deep input {
  border: 0px !important;
}
.el-form-item::v-deep label::before {
  display: none;
}
.el-form-item::v-deep label {
  font-weight: 700;
  padding: 0;
  margin-left: 8px;
}
</style>