video-maker/frontend/src/views/Login.vue

<script setup lang="ts">
import { appName, openRegisration } from "@/env";
import { ref, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/main";
import { useDisplay } from "vuetify";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";
import router from "@/router";
import { saveLocalToken } from "@/utils";
import { googleTokenLogin, decodeCredential } from "vue3-google-login";
import Navbar from "@/components/Navbar.vue";
import type { CallbackTypes } from "vue3-google-login";

const callback: CallbackTypes.CredentialCallback = (response: any) => {
  console.log("Handle the response", response);
  const userData: any = decodeCredential(response.credential);
  console.log("Handle the userData", userData);
  mainStore.googleLogin(userData.email);
};

// const data = ref();
// const GOOGLE_CLIENT_ID =
//   "136107811725-n71808u8t465f1afhpe2e5j7mn606nd8.apps.googleusercontent.com";
// const handleGoogleAccessTokenLogin = () => {
//   googleTokenLogin({
//     clientId: GOOGLE_CLIENT_ID,
//   }).then((response: any) => {
//     console.log("Google response", response);
//     console.log("response.access_token", response.access_token);
//     data.value = response;
//     saveLocalToken(response.access_token);
//     mainStore.setToken(response.access_token);
//     mainStore.googleLogin(response.access_token);
//   });
// };

const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);

// variable
const email = ref("");
const password = ref("");
const { name } = useDisplay();
const { t } = useI18n();
let showPassword = ref(false);

// getter
const loginError = mainStoreRef.readLoginError;
const width = computed(() => {
  // name is reactive and
  // must use .value
  switch (name.value) {
    case "xs":
      return 12;
    case "sm":
      return 12;
    // case "md":
    //   return 6;
  }
  return 6;
});

// action
function submit() {
  mainStore.logIn(email.value, password.value);
}

// lifecycle
onMounted(() => {
  console.log("onMounted");
});
</script>

<template>
  <Navbar />
  <v-container fluid class="pa-0">
    <v-row align="center" no-gutters class="overflow-hidden">
      <v-col :cols="width">
        <section class="overflow-hidden banner-item">
          <img src="../assets/img/banner.png" alt="" />
          <h2>
            {{ t("describe_1") }}
            <br />
            {{ t("describe_2") }}
          </h2>
        </section>
      </v-col>
      <v-col :cols="width" class="px-6 my-8 my-md-0">
        <div class="form-title">
          <h3>{{ t("login") }}</h3>
          <span></span>
        </div>
        <v-form ref="form" class="login-form" lazy-validation>
          <v-text-field
            v-model="email"
            name="email"
            prepend-icon="person"
            :rules="[(v) => !!v || '請輸入您的帳號']"
            :label="$t('emailAddress')"
            required
          ></v-text-field>

          <v-text-field
            v-model="password"
            name="password"
            id="password"
            prepend-icon="key"
            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showPassword ? 'text' : 'password'"
            :label="$t('password')"
            hint="4-12 位數密碼"
            @click:append="showPassword = !showPassword"
            @keyup.enter="submit"
            required
          ></v-text-field>

          <p class="text-center">
            {{ t("haventAccount") }}
            <router-link to="/signup">{{ t("register") }}</router-link> /
            <router-link to="/recover-password">{{
              t("forgotPsd")
            }}</router-link>
          </p>

          <div class="d-flex flex-column">
            <v-btn
              rounded="pill"
              color="primary"
              @click.prevent="submit"
              class="login-btn"
            >
              {{ t("loginLink") }}
            </v-btn>

            <section class="line">
              <p>&ensp;快速登入&ensp;</p>
              <span></span>
            </section>

            <div class="w-100 mx-auto mt-5" style="max-width: 235px">
              <GoogleLogin
                :callback="callback"
                prompt
                popup-type="TOKEN"
                class="w-100"
              />
            </div>

            <!-- <v-btn
              class="google-btn"
              type="button"
              @click="handleGoogleAccessTokenLogin"
              rounded="pill"
            >
              <img src="@/assets/img/google.png" alt="" />
              使用 Google 進行登入
            </v-btn> -->
          </div>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss" scoped>
.line {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  position: relative;
  p {
    position: relative;
    z-index: 1;
    color: #888888;
    background-color: #fff;
  }
  span {
    display: block;
    border-top: 1px solid #888888;
    width: 280px;
    position: absolute;
    bottom: 12px;
  }
}
.google-btn {
  margin-top: 20px;
  background-color: #fff;
  img {
    width: 20px;
    margin-right: 10px;
  }
}
</style>