SaaS-lib/lib/saas/view/service/updatePassWord.vue

<!-- @format -->

<template>
  <div class="signUp ns-view">
    <a-layout>
      <a-layout-header class="home_header" style="position: relative">
        <img
          v-if="themeConfig.logoUrl"
          :src="themeConfig.logoUrl"
          style="width: 192px; height: 48px; object-fit: contain" />
        <ns-icon v-else name="login" style="width: auto; height: 40px" />
      </a-layout-header>
      <a-layout-content>
        <div class="content">
          <h1>{{ title }}</h1>
          <div class="lg_card">
            <h2>{{ themeConfig.webSiteTitle ? themeConfig.webSiteTitle : subTitle }}</h2>
            <div class="form">
              <ns-form
                style="width: 100%; margin: auto"
                ref="formOneRef"
                formLayout="修改"
                :schemas="formSchema"
                :model="data" />
              <div class="step-box">
                <a-button @click="navigateBack">取消</a-button>
                <a-button @click="submit" type="primary" :disabled="!formOneRef?.validateResult"
                  >确认修改</a-button
                >
              </div>
            </div>
          </div>
        </div>
      </a-layout-content>
      <a class="toLogin" @click="toLogin" v-show="step === 0">登录已有豪恩账号 ></a>
      <!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { http } from '/nerv-lib/util/http';
  import { Cookies } from '/nerv-lib/util/cookie';
  import { authorizationService } from '/nerv-base/store/modules/authorization-service';
  import { NsMessage } from '/nerv-lib/component/message';
  import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
  import { storeToRefs } from 'pinia';
  import { useNavigate } from '/nerv-lib/use/use-navigate';
  export default defineComponent({
    name: 'UpdatePassWord',
    setup() {
      const router = useRouter();
      const imageUrl = ref('/asset/image/login/logo.png');
      const title = ref('修改密码');
      const subTitle = ref('sass平台');
      const { uuid } = router.currentRoute.value.query;
      const formOneRef = ref();
      const configStore = appConfigStore();

      const { getThemeConfig: themeConfig } = storeToRefs(configStore);
      if (configStore.updatePassWordInfo.title) {
        title.value = configStore.updatePassWordInfo.title;
        subTitle.value = configStore.updatePassWordInfo.subtitle;
      }
      let data = reactive({});
      const authorizationStore = authorizationService();
      const { navigateBackV2: navigateBack } = useNavigate();
      const formSchema = reactive([
        {
          field: 'oldPassword',
          label: '原密码',
          component: 'NsInputPassword',
          componentProps: {
            autocomplete: 'new-password',
            placeholder: '请输入原密码',
          },
          rules: [
            {
              required: true,
              message: '原密码不能为空',
              trigger: 'blur',
            },
          ],
        },

        {
          field: 'newPassword',
          label: '新密码',
          component: 'NsInputPassword',
          componentProps: {
            autocomplete: 'new-password',
            placeholder: '密码不少于6位，支持字母、数字',
            onchange: () => {
              data.confirmPassword = '';
            },
          },
          rules: [
            {
              required: true,
              message: '新密码不能为空',
              trigger: 'change',
            },
            {
              validator: async (rule, value) => {
                if (!value) {
                  return;
                }
                if (!/^([a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-z\d!@#$%^&*]{5,17}$/.test(value)) {
                  let strArray = value.split('');
                  if (strArray.indexOf(' ') !== -1) {
                    return Promise.reject('不能包含空格');
                  } else {
                    if (/[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/.test(value)) {
                      return Promise.reject('不支持中文');
                    } else {
                      return Promise.reject(
                        '需同时包含数字,字母及特殊字符(!@#$%^&*)，且只能以字母开头，长度为6-18个字符',
                      );
                    }
                  }
                }
              },
              trigger: 'change',
            },
          ],
        },
        {
          field: 'confirmPassword',
          label: '确认密码',
          component: 'NsInputPassword',
          viewOnly: true,
          componentProps: {
            autocomplete: 'new-password',
            placeholder: '请再次输入密码',
          },
          rules: [
            {
              required: true,
              message: '不能为空',
              trigger: 'change',
            },
            {
              trigger: 'change',
              validator: async (rule, value) => {
                if (!value) {
                  return;
                }
                if (value !== data.newPassword) {
                  return Promise.reject('两次密码不一致');
                }
              },
            },
          ],
        },
      ]);

      const loading = ref<boolean>(false);

      // const title = ref<string>('修改密码');

      const submit = (): void => {
        formOneRef.value.triggerSubmit().then((data) => {
          loading.value = true;
          async function update() {
            try {
              const res = await http.post(configStore.updatePassWordInfo?.api, data);
              if (res.success) {
                NsMessage.success('修改成功，需重新登陆', 1, () => {
                  Cookies.remove(`${import.meta.env.VITE_PUBLIC_PATH}-nervsid`);
                  sessionStorage.clear();
                  router.push('/login');
                  authorizationStore.clearAuthorization();
                });
              }
              loading.value = false;
            } catch (err) {
              loading.value = false;
            }
          }
          update();
        });
      };
      return {
        themeConfig,
        submit,
        formSchema,
        data,
        subTitle,
        formOneRef,
        imageUrl,
        router,
        uuid,
        navigateBack,
        title,
        loading,
      };
    },
    created() {
      const _this = this;
      window.sessionStorage.clear();
      document.onkeydown = function (e) {
        const key = window.event === undefined ? e.keyCode : window.event.keyCode;
        key === 13 ? _this.submit() : '';
      };
    },
    beforeUnmount() {
      document.onkeydown = function (e) {};
    },
  });
</script>

<style lang="less" scoped>
  .ns-form.ns-vertical-form {
    width: 80% !important;
  }
  .ns-form::after {
    background-color: #f0f2f5;
    display: none;
    margin: 0 16px;
    width: calc(100% - 32px);
  }
  .finalSubmitDiv {
    width: 100%;
    margin-top: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    .finalSubmit {
      width: 90px;
      height: 32px;
    }
  }

  :deep(.verifyImgCode .ant-form-item) {
    margin-bottom: 12px !important;
  }

  .signUp {
    height: 100%;
    overflow: hidden;
  }
  .content {
    width: 100%;
    height: 100%;
    padding-top: 40px;

    h1 {
      text-align: center;
      font-size: 24px;
      line-height: 44px;
      margin-bottom: 40px;
    }
    .lg_card {
      width: 80%;
      min-width: 800px;
      height: 70%;
      min-height: 400px;
      background: #fff;
      // box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%), 0 0 18px 0 rgb(0 0 0 / 8%);
      border-radius: 6px;
      margin: auto !important;
      // padding: 15px 35px 35px;
      .form {
        width: 50%;
        min-width: 400px;
        margin: auto;
        padding-top: 40px;
      }
      h2 {
        padding-top: 24px;
        padding-bottom: 24px;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid rgba(23, 46, 61, 0.15);
      }
    }
  }
  .toLogin {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #3aa7f2;
    display: block;
    margin-top: 40px;
    margin-bottom: 16px;
  }
  .icon {
    color: @primary-color;
    // background: #000;
    // min-height: 25px;
    // min-width: 25px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // border-radius: 50%;
  }
  .ant-layout-header {
    height: 64px !important;
    background: #fff;
    line-height: 64px;
    display: flex;
    align-items: center;
  }

  .ant-layout-content {
    border-top: 1px solid #ecedef;
    width: 100%;
    display: flex;
    // align-items: center;
    justify-content: center;
    height: calc(100vh - 128px) !important;
  }

  .ant-layout-footer {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #8f8f8f;
  }

  .lg_card_title {
    width: 360px;
    margin: 60px auto 0;
    height: 48px;
    font-size: 20px;
    font-weight: bold;
    color: #172e3d;
    text-align: left;
    line-height: 20px;
    span {
      float: right;
      font-size: 14px;
      color: #808d96;
      font-weight: lighter;
      strong {
        color: #1d2d3d;
        font-weight: 400;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: #ff1744;
        }
      }
    }
  }
  :deep(.ant-form-item) {
    margin-bottom: 24px;
  }
  :deep(#app .ant-form-item-label > label) {
    color: #606060;
  }
  :deep(.lg_card .ant-col-5) {
    width: 30%;
    flex: 0 0 30%;
    text-align: right;
  }
  :deep(.ant-layout-content) {
    margin: 0;
  }
  .success-box {
    width: 100%;
    text-align: center;
    padding: 50px 0 4px;
    h3 {
      margin-top: 30px;
      font-weight: bold;
      margin-bottom: 24px;
    }
    h3,
    span {
      color: #ff4919;
    }
    p {
      margin: auto;
      font-size: 14px;
      text-align: left;
      color: #1d2d3d;
      width: 50%;
      white-space: nowrap;
    }
  }
  :deep(.step-box) {
    width: 80%;
    display: flex;
    justify-content: flex-end;

    // margin-right: 50px;
    position: relative;
    left: 20px;
    button {
      margin-left: 16px;
    }
  }
  :deep(.ant-steps-item-title::after) {
    background: transparent !important;
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: #ecedef;
  }
  :deep(
      .ant-steps-item-process
        > .ant-steps-item-container
        > .ant-steps-item-content
        > .ant-steps-item-title::after
    ) {
    border-top-color: #ff4919;
  }

  :deep(.ant-layout-header) {
    max-height: 64px !important;
    min-height: 64px !important;
  }

  :deep(.ant-layout-footer) {
    max-height: 64px !important;
    min-height: 64px !important;
    height: 64px !important;
  }
  .home_header {
    height: 64px;
    display: flex;
    align-items: center;
    // img {
    //   height: 32px !important;
    //   width: 220px !important;
    //   transform: translateY(0px) translateX(0px);
    // }
  }
  :deep(.ant-layout) {
    height: 100%;
    width: 100%;
  }
</style>