vue-ptc/src/pages/login/index.vue

<template>
  <div v-if="!showSurprise" class="p-login">
    <router-link class="nav-home" to="/">
      <i class="icon"></i><span class="text">HOME</span>
    </router-link>
    <div class="logo"></div>
    <div class="container">
      <div class="ptc-form">
        <div class="title">Sign in to PTC Care Plus</div>
        <div class="ptc-form-item">
          <input
            v-model="values.email"
            class="ptc-input"
            placeholder="email address"
          />
        </div>
        <div class="ptc-form-item">
          <input
            v-model="values.password"
            class="ptc-input"
            type="password"
            placeholder="password"
            @keydown="$event.keyCode === 13 && handleSubmit(handleLogin)"
          />
        </div>
        <div class="ptc-form-item" style="font-size: 0">
          <router-link class="tip primary" to="/password/reset"
            >Forgot password?</router-link
          >
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button" @click="handleSubmit(handleLogin)">
            SIGN IN
          </button>
        </div>
        <div class="ptc-form-item">
          <p class="tip">
            Don’t have an account?
            <router-link class="primary" to="/register">Create one</router-link>
          </p>
        </div>
      </div>
      <div class="alternative">
        <div class="delimiter">Or sign in with</div>
        <ul class="list">
          <li class="item" name="google"></li>
          <li class="item" name="facebook"></li>
          <li class="item" name="apple"></li>
        </ul>
      </div>
      <div class="policy">
        By clicking “Sign in” you agree to PTC’s
        <span class="primary">terms of use</span> and confirm that you’ve read
        and acknowledged PTC’s <span class="primary">privacy policy</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { login } from '@/service/user'
import useForm from '@/hooks/useForm'
import { string } from 'yup'
import { getUserInfo } from '@/store'
import Toast from '@/components/toast'

const router = useRouter()
const { from } = useRoute().query as any
const showSurprise = ref(false)
const { values, handleSubmit } = useForm<ApiUser.Login.Request>({
  schema: {
    email: string().required().email(),
    password: string().required(),
  },
})

async function handleLogin() {
  const { message } = await login(values as any)
  Toast(message)
  const { need_change } = await getUserInfo()
  router.replace(need_change ? '/password/change' : from || '/')
}
</script>

<style lang="scss">
.surprise {
  .ptc-form {
    padding: 96px 80px 0;
  }

  .title {
    line-height: 56px;
    font-size: 40px;
    font-weight: 600;
    color: #333;
  }
}
</style>