update login

frontend/src/views/Login.vue

@@ -5,36 +5,34 @@ import { useMainStore } from "@/stores/main";
 import { useDisplay } from "vuetify";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
-import { googleTokenLogin } from "vue3-google-login";
+import router from "@/router";
 import { saveLocalToken } from "@/utils";
+import { googleTokenLogin, decodeCredential } from "vue3-google-login";
 import Navbar from "@/components/Navbar.vue";
-import { decodeCredential } from "vue3-google-login";
+import type { CallbackTypes } from "vue3-google-login";
 
-const callback = (response: any) => {
-  // This callback will be triggered when the user selects or login to
-  // his Google account from the popup
+const callback: CallbackTypes.CredentialCallback = (response: any) => {
   console.log("Handle the response", response);
-  const userData = decodeCredential(response.credential);
+  const userData: any = decodeCredential(response.credential);
   console.log("Handle the userData", userData);
+  mainStore.googleLogin(userData.email, "google");
 };
 
-const GOOGLE_CLIENT_ID =
-  "136107811725-n71808u8t465f1afhpe2e5j7mn606nd8.apps.googleusercontent.com";
-
-const data = ref();
-
-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 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);
@@ -139,9 +137,16 @@ onMounted(() => {
               <span></span>
             </section>
 
-            <GoogleLogin :callback="callback" prompt auto-login class="mt-5" />
+            <div class="w-100 mx-auto mt-5" style="max-width: 280px">
+              <GoogleLogin
+                :callback="callback"
+                prompt
+                popup-type="TOKEN"
+                class="w-100"
+              />
+            </div>
 
-            <v-btn
+            <!-- <v-btn
               class="google-btn"
               type="button"
               @click="handleGoogleAccessTokenLogin"
@@ -149,12 +154,8 @@ onMounted(() => {
             >
               <img src="@/assets/img/google.png" alt="" />
               使用 Google 進行登入
-            </v-btn>
+            </v-btn> -->
           </div>
-
-          <!-- <button type="button" @click="handleGoogleAccessTokenLogin">
-            使用 Google 進行登入
-          </button> -->
         </v-form>
       </v-col>
     </v-row>