update

src/views/CourseDetail.vue

@@ -31,14 +31,14 @@ const breadcrumbs = reactive([
 ]);
 
 // 取得資料
-(async function getData() {
+(async () => {
   try {
     const response = await axios.get(
       `https://cmm.ai:8088/api/get_class_name?class_name_id=${courseId}`
     );
     course.data = response.data.classes[0];
     groupSort.value = course.data.group_sort;
-    console.log('groupSort.value',groupSort.value);
+    console.log("groupSort.value", groupSort.value);
     console.log("courseData", course.data);
 
     if (course.data.group_id === 1) {
@@ -112,8 +112,8 @@ function handleRandom(arr, length) {
 }
 
 const dynamicCols = computed(() => {
-    return groupSort.value === "pinkoi" ? "5" : "8";
-  });
+  return groupSort.value === "pinkoi" ? "5" : "8";
+});
 </script>
 
 <template>
@@ -131,7 +131,12 @@ const dynamicCols = computed(() => {
         <h2>{{ course.data.name }}</h2>
       </v-col>
       <v-col :cols="dynamicCols" class="pa-0 d-flex justify-center">
-        <img :src="course.data.cover_img" alt="" class="cover-img" :class="{ 'small' : groupSort === 'pinkoi' }" />
+        <img
+          :src="course.data.cover_img"
+          alt=""
+          class="cover-img"
+          :class="{ small: groupSort === 'pinkoi' }"
+        />
       </v-col>
       <v-col cols="12">
         <div class="info">

src/views/Login.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import axios from "axios";
 import Navbar from "@/components/Navbar.vue";
 
@@ -42,6 +42,90 @@ const handleSignIn = async (response) => {
   }
 };
 
+let isLoading = ref(false);
+let userLogin = reactive({
+  account: "",
+  password: "",
+});
+
+// 登入
+function login() {
+  console.log("userLogin", userLogin);
+}
+
+let userRegister = reactive({
+  email: "",
+  username: "",
+  password: "",
+  re_password: "",
+});
+
+// 註冊
+async function register() {
+  const formData = new FormData();
+  for (const key in userRegister) {
+    formData.append(key, userRegister[key]);
+  }
+
+  try {
+    isLoading.value = true;
+    const response = await axios.post("https://cmm.ai:8088/api/add", formData);
+    console.log("response", response);
+    if (response.data.msg) {
+      alertText.value = response.data.msg;
+      validateState.value = true;
+      alertClose(3000);
+    }
+    isLoading.value = false;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+// 檢查欄位是否為空
+function checkEmptyFields() {
+  for (const key in userRegister) {
+    if (userRegister[key] === "") {
+      return false;
+    }
+  }
+  return true;
+}
+
+let validateState = ref(false);
+let alertText = ref("");
+const emailRegex = /^(?:\s*|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/;
+
+// 檢查註冊欄位
+function validateRegister() {
+  const isValid = checkEmptyFields();
+  if (!isValid) {
+    return;
+  }
+
+  if (!emailRegex.test(userRegister.email)) {
+    alertText.value = "請檢查 E-mail 格式";
+    validateState.value = true;
+    alertClose(1500);
+    return;
+  }
+
+  if (userRegister.password !== userRegister.re_password) {
+    alertText.value = "密碼與確認密碼不相符";
+    validateState.value = true;
+    alertClose(1500);
+    return;
+  }
+
+  register();
+}
+
+function alertClose(second) {
+  setTimeout(() => {
+    validateState.value = false;
+  }, second);
+}
+
 onMounted(() => {
   const script = document.createElement("script");
   script.src = "https://accounts.google.com/gsi/client";
@@ -120,6 +204,7 @@ console.log("JWT 過期時間：", formattedExpiration);
 
           <v-form @submit.prevent>
             <v-text-field
+              v-model="userLogin.account"
               label="帳號"
               :rules="[(v) => !!v || '請輸入您的帳號']"
               prepend-inner-icon="mdi-account"
@@ -127,6 +212,7 @@ console.log("JWT 過期時間：", formattedExpiration);
               density="compact"
             ></v-text-field>
             <v-text-field
+              v-model="userLogin.password"
               label="密碼"
               :rules="[(v) => !!v || '請輸入您的密碼']"
               prepend-inner-icon="mdi-lock"
@@ -145,9 +231,18 @@ console.log("JWT 過期時間：", formattedExpiration);
         </div>
       </v-window-item>
       <v-window-item :value="2">
-        <div class="px-15 pt-10">
+        <div class="d-flex flex-column align-center px-15 pt-10">
           <v-form @submit.prevent>
             <v-text-field
+              v-model="userRegister.email"
+              label="信箱"
+              :rules="[(v) => !!v || '請輸入您的信箱']"
+              prepend-inner-icon="mdi-email"
+              variant="solo"
+              density="compact"
+            ></v-text-field>
+            <v-text-field
+              v-model="userRegister.username"
               label="帳號"
               :rules="[(v) => !!v || '請輸入您的帳號']"
               prepend-inner-icon="mdi-account"
@@ -155,21 +250,38 @@ console.log("JWT 過期時間：", formattedExpiration);
               density="compact"
             ></v-text-field>
             <v-text-field
+              v-model="userRegister.password"
               label="密碼"
               :rules="[(v) => !!v || '請輸入您的密碼']"
               prepend-inner-icon="mdi-lock"
               variant="solo"
               density="compact"
+              type="password"
+            ></v-text-field>
+            <v-text-field
+              v-model="userRegister.re_password"
+              label="確認密碼"
+              :rules="[(v) => !!v || '請輸入確認密碼']"
+              prepend-inner-icon="mdi-lock-check"
+              variant="solo"
+              density="compact"
+              type="password"
             ></v-text-field>
             <v-btn
+              block
               type="submit"
               size="large"
               color="primary"
-              @click="register()"
-              block
+              @click="validateRegister()"
+              :loading="isLoading"
               >註冊</v-btn
             >
           </v-form>
+          <div class="alert" v-if="validateState">
+            <v-alert border="start" border-color="primary" elevation="2">
+              {{ alertText }}
+            </v-alert>
+          </div>
         </div>
       </v-window-item>
     </v-window>
@@ -199,6 +311,9 @@ console.log("JWT 過期時間：", formattedExpiration);
     padding-bottom: 20px;
     font-size: 28px;
   }
+  .v-form {
+    width: 100%;
+  }
   .tab {
     button {
       margin: 0 20px;
@@ -239,5 +354,16 @@ console.log("JWT 過期時間：", formattedExpiration);
       }
     }
   }
+
+  .alert {
+    top: 50%;
+    position: absolute;
+    z-index: 1;
+    .v-alert {
+      color: var(--main-color);
+      background-color: #fff;
+      letter-spacing: 1px;
+    }
+  }
 }
 </style>