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

<template>
  <div ref="root" class="p-login">
    <a class="nav-home" href="/care/">
      <i class="icon"></i><span class="text">HOME</span>
    </a>
    <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 g_id_signin"
            name="google"
            data-type="icon"
            data-shape="circle"
            data-theme="filled_black"
            data-width="40"
          ></li>
          <li class="item" name="facebook" @click="FBLogin"></li>
          <li class="item" name="apple" @click="AppleLogin"></li>
        </ul>
      </div>
      <div class="policy">
        By clicking “Sign in” you agree to PTC’s
        <a class="primary" href="https://www.ptc.net.au/terms-and-conditions/"
          >terms of use</a
        >
        and confirm that you’ve read and acknowledged PTC’s
        <a class="primary" href="https://www.ptc.net.au/privacy-policy/"
          >privacy policy</a
        >
      </div>
    </div>
    <div
      id="g_id_onload"
      data-client_id="393349837160-3opoqoo9l0gk9uimu212gp9uvm72406m.apps.googleusercontent.com"
      data-login_uri="https://test.ptcrepair.com.au/api/user/google/callback"
      data-auto_prompt="false"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } 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'
import {
  FBLogin,
  AppleLogin,
  // renderGoogleLoginButton,
} from '@/utils/third-login'

const router = useRouter()
const { from } = useRoute().query as any
const { values, handleSubmit } = useForm<ApiUser.Login.Request>({
  schema: {
    email: string()
      .required()
      .email('Username or Password inserted are incorrect'),
    password: string().required(),
  },
})
const root = ref<HTMLElement>()

// onMounted(() => renderGoogleLoginButton(gSignin.value!))
onMounted(() => {
  const s = document.createElement('script')
  s.src = 'https://accounts.google.com/gsi/client'
  root.value!.appendChild(s)
})

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

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

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