Situation-Awareness-Platform-Frontend/src/views/Mobile/Account/Login/Password/index.vue

<script setup lang="ts">
import GForm, { type FormListProps } from '@/components/Form';
import type { GLogoProps } from '@/components/LoginModal/types';
import GAuth from '@/components/LoginModal/widget/auth.vue';
import GAgreement from '@/components/LoginModal/widget/agreement.vue';
import { TransAssetsUrl } from '@/utils/asset';
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Button } from 'vue-devui/button';
import { useFormInteraction } from '@/utils/hooks/useForm';
import { toLogin } from '@/api/user';

const IconSource = (import.meta as any).glob('@/assets/imgs/icon/login-modal/*svg', { eager: true });
const IconH = TransAssetsUrl(IconSource, 'logo-gitee');
const IconC = TransAssetsUrl(IconSource, 'logo-csdn');
const IconG = TransAssetsUrl(IconSource, 'logo-github');
const IconM = TransAssetsUrl(IconSource, 'logo-mobile');

const route = useRoute();
const router = useRouter();

const Form = ref<FormListProps[]>([
  {
    type: 'input',
    key: 'username',
    label: '用户名/邮箱',
    required: true
  },
  {
    type: 'input',
    key: 'password',
    label: '密码',
    required: true,
    props: {
      'show-password': true,
      'autocomplete': true,
      'maxlength': 30
    }
  }
]);

const logos = reactive<GLogoProps[]>([
  {
    src: IconM,
    alt: 'mobile'
  },
  {
    src: IconC,
    alt: 'csdn'
  },
  {
    src: IconH,
    alt: 'gitee'
  },
  {
    src: IconG,
    alt: 'github'
  }
]);

const {
  errorMsg,
  disabled,
  extraErrors,
  status,
  FormRef,
  AgreementWarn,
  PasswordInputSpacing,
  loading,
  handleSubmit,
  handleFormChange,
  handleFormInput,
  handleAuthLogin,
  handleDisplay,
  saveUserInfo
} = useFormInteraction(Form);

const handleConfirm = async() => {
  handleSubmit(async(res: any) => {
    const result = await toLogin(res);
    if (!result.error) {
      // const { user_id, mask, mobile, iam_id } = result.data.data;
      extraErrors.requestInfo = '';
      // if (!iam_id) {
      //   redirectBind({
      //     user_id,
      //     mask,
      //     mobile: mobile || res?.mobile
      //   });
      // } else {
      saveUserInfo(result.data.data, route.query.returnUrl);
      // }
    } else {
      extraErrors.requestInfo = result.error.error_message;
    }
  });
};
</script>

<template>
  <div class="bg-white h-[100%]">
    <div class="gm-login-password">
      <div class="text-G900 text-[17px] tracking-[.5px] font-bold leading-[20px] my-[20px]">
        欢迎登录Gitcode
      </div>
      <GForm
        :DataList="Form"
        ref="FormRef"
        :show-label="false"
        @change="handleFormChange"
        @complete="handleFormInput"
        layout="vertical"
        size="lg"
        message-type="none"
      >
        <template #submit>
          <div class="gm-login-password-info h-[21px]">
            <div class="gm-login-password-info-left">
              {{ errorMsg }}
            </div>
            <div
              class="gm-login-password-info-right"
              @click.stop="router.replace('/resetPassword')"
            >
              忘记密码?
            </div>
          </div>
          <Button
            color="primary"
            variant="solid"
            @click="handleConfirm"
            :disabled="disabled"
            :loading="loading"
            size="lg"
            class="w-[100%] mt-[24px]"
          >
            登 录
          </Button>
          <Button
            @click="router.replace('/register')"
            size="lg"
            class="w-[100%] my-[14px]"
          >
            注 册
          </Button>
        </template>
      </GForm>
      <div class="mt-[36px]">
        <GAuth :logos="logos" @auth="type => handleAuthLogin(type, () => {}, route.query.returnUrl as string )" />
        <div :class="['gm-login-password-args', AgreementWarn ? 'shaking-box' : '']">
          <GAgreement v-model="status" @declares="handleDisplay" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.gm-login-password {
  .devui-input--error {
    // border-color: inherit;
    background-color: inherit;
  }
  .devui-input__inner {
    font-size: 14px;
  }
  .devui-form__label {
    height: 0;
  }
  .devui-form__label--vertical {
    padding: 0;
  }
  input[type="password"] {
    letter-spacing: v-bind(PasswordInputSpacing);
  }
  .devui-form__item--vertical {
    margin-bottom: 12px;
    &:nth-of-type(2) {
      margin-bottom: 8px;
    }
  }
  .devui-checkbox--sm {
    margin: auto;
  }
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2px;
    div {
      font-size: 14px;
      line-height: 20px;
      height: 20px;
    }
    &-left {
      color: #F2050D;
      max-width: 230px;
      min-width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-right {
      cursor: pointer;
      text-align: right;
      color: var(--color-G700);
    }
  }
  &-args {
    span {
        display: inline-block;
        font-size: 12px;
      }
  }
  .shaking-box {
    animation: shaking 0.25s ease-in-out;
  }
  @keyframes shaking {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-10px);
    }
    75% {
      transform: translateX(10px);
    }
  }
  @apply box-border p-[32px] m-auto
        sm:w-[414px] w-[100%];
}
.g-footer-box {
    background-color: white;
 }
</style>