Merge branch 'front-dev' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
 node_modules
 .DS_Store
 dist

frontend/index.html

@@ -9,7 +9,6 @@
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="expires" content="0">
-
   <title>Vite App</title>
 </head>
 

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "vue": "^3.2.45",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
+        "vue3-google-login": "^2.0.14",
         "vuetify": "^3.1.1"
       },
       "devDependencies": {
@@ -5686,6 +5687,14 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-google-login": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/vue3-google-login/-/vue3-google-login-2.0.14.tgz",
+      "integrity": "sha512-pgrFETY4TWgtAxTv3G7BkfoKUs8+zWB2WRc+jhGpy3fVtU1ll1vAdjGXiQfZ5XADfAJLZ2zNTDJp/0cPF3z7BQ==",
+      "peerDependencies": {
+        "vue": "^3.0.3"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.1.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
+    "vue3-google-login": "^2.0.14",
     "vuetify": "^3.1.1"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -20,7 +20,6 @@ const mainStoreRef = storeToRefs(mainStore);
 const loggedIn = mainStoreRef.readIsLoggedIn;
 //getter
 
-
 //lifecycle
 onMounted(() => {
   mainStore.checkLoggedIn();
@@ -55,10 +54,12 @@ a {
     }
   }
 
-  .login-btn {
+  .login-btn,
+  .google-btn {
+    width: 280px;
     display: flex;
     margin: 50px auto 0;
-    padding: 20px 40px;
+    padding: 25px 40px;
     font-size: 16px;
   }
 

frontend/src/views/Login.vue

@@ -5,8 +5,27 @@ 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 { saveLocalToken } from "@/utils";
 import Navbar from "@/components/Navbar.vue";
 
+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);
+  });
+};
+
 const mainStore = useMainStore();
 const mainStoreRef = storeToRefs(mainStore);
 
@@ -40,7 +59,7 @@ function submit() {
 
 // lifecycle
 onMounted(() => {
-  console.log('onMounted');
+  console.log("onMounted");
 });
 </script>
 
@@ -95,16 +114,67 @@ onMounted(() => {
             }}</router-link>
           </p>
 
-          <v-btn
-            rounded="pill"
-            color="primary"
-            @click.prevent="submit"
-            class="login-btn"
-          >
-            {{ t("loginLink") }}
-          </v-btn>
+          <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>
+
+            <v-btn
+              class="google-btn"
+              type="button"
+              @click="handleGoogleAccessTokenLogin"
+              rounded="pill"
+            >
+              <img src="@/assets/img/google.png" alt="" />
+              使用 Google 進行登入
+            </v-btn>
+          </div>
+
+          <!-- <button type="button" @click="handleGoogleAccessTokenLogin">
+            使用 Google 進行登入
+          </button> -->
         </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>

frontend/src/views/main/Upload.vue

@@ -108,7 +108,7 @@ async function Submit() {
           ></v-select> -->
         </v-form>
 
-        <v-expansion-panels class="anchor-list">
+        <!-- <v-expansion-panels class="anchor-list">
           <v-expansion-panel title="選擇主播">
             <v-expansion-panel-text class="p-0">
               <v-sheet class="mx-auto">
@@ -135,7 +135,7 @@ async function Submit() {
               </v-sheet>
             </v-expansion-panel-text>
           </v-expansion-panel>
-        </v-expansion-panels>
+        </v-expansion-panels> -->
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>

frontend/tsconfig.app.json

@@ -3,6 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
+    "allowJs": true,
     "composite": true,
     "baseUrl": ".",
     "paths": {