feat: Introduce useCourse and useAuth composables, and add new pages for user registration and dynamic course details.

Frontend-Learner/pages/auth/register.vue

@@ -20,7 +20,7 @@ const { errors, validate, clearFieldError } = useFormValidation();
 
 const isLoading = ref(false);
 
-// Reactive form state
+
 const registerForm = reactive({
   prefix: "นาย",
   username: "",
@@ -32,7 +32,7 @@ const registerForm = reactive({
   confirmPassword: "",
 });
 
-// Validation rules
+
 const registerRules = {
   username: { 
     rules: { 
@@ -197,11 +197,7 @@ const handleRegister = async () => {
       </p>
     </div>
 
-    <!-- Tabs Removed -->
-
-    <!-- REGISTER FORM -->
     <form @submit.prevent="handleRegister">
-        <!-- Username -->
       <FormInput
         :model-value="registerForm.username"
         label="ชื่อผู้ใช้"
@@ -211,7 +207,6 @@ const handleRegister = async () => {
         class="dark-form-input"
         @update:model-value="onUsernameInput"
       />
-       <!-- Email -->
        <FormInput
         :model-value="registerForm.email"
         label="อีเมล"
@@ -223,7 +218,6 @@ const handleRegister = async () => {
         @update:model-value="onEmailInput"
       />
 
-      <!-- Password Fields -->
       <FormInput
         :model-value="registerForm.password"
         label="รหัสผ่าน"
@@ -246,7 +240,6 @@ const handleRegister = async () => {
         @update:model-value="clearFieldError('confirmPassword')"
       />
       
-      <!-- Name Fields (Split Row) -->
       <div class="grid-12" style="gap: 16px; margin-bottom: 0">
         <div class="col-span-4">
           <label class="input-label text-gray-300">คำนำหน้า</label>
@@ -294,7 +287,6 @@ const handleRegister = async () => {
         @update:model-value="onPhoneInput"
       />
 
-      <!-- Submit Button -->
       <button
         type="submit"
         class="btn btn-primary w-full mb-4 mt-2"
@@ -305,7 +297,6 @@ const handleRegister = async () => {
         <span v-else>สร้างบัญชี</span>
       </button>
 
-      <!-- Toggle to Login -->
       <div class="text-center mt-6 text-sm">
         <span class="text-muted">มีบัญชีอยู่แล้ว? </span>
         <NuxtLink to="/auth/login" class="font-bold text-primary hover:underline">เข้าสู่ระบบ</NuxtLink>

Frontend-Learner/pages/course/[id].vue

@@ -14,14 +14,12 @@ const route = useRoute()
 const courseId = computed(() => parseInt(route.params.id as string))
 const { fetchCourseById, enrollCourse } = useCourse()
 
-// Fetch course data
 const { data: courseData, error, refresh } = await useAsyncData(`course-${courseId.value}`, () => fetchCourseById(courseId.value))
 
 const course = computed(() => {
   return courseData.value?.success ? courseData.value.data : null
 })
 
-// Enroll State
 const isEnrolling = ref(false)
 
 const handleEnroll = async () => {
@@ -43,7 +41,6 @@ const handleEnroll = async () => {
 }
 
 
-// Helper for localization
 const getLocalizedText = (text: string | { th: string; en: string } | undefined | null) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -60,7 +57,6 @@ useHead({
 <template>
   <div class="container mx-auto max-w-7xl px-4 py-8">
       
-      <!-- Back Button -->
       <NuxtLink to="/browse/discovery" class="inline-flex items-center gap-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors font-medium">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
@@ -70,9 +66,7 @@ useHead({
 
       <div v-if="course" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
         
-        <!-- Main Content (Left Column) -->
         <div class="lg:col-span-8">
-          <!-- Hero Video Placeholder / Thumbnail -->
           <div class="relative aspect-video bg-slate-900 rounded-2xl overflow-hidden shadow-lg mb-8 group cursor-pointer border border-slate-200 dark:border-slate-700">
              <div v-if="course.thumbnail_url" class="absolute inset-0">
                 <img :src="course.thumbnail_url" class="w-full h-full object-cover opacity-90 group-hover:opacity-75 transition-opacity" />
@@ -93,7 +87,6 @@ useHead({
             <p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p>
           </div>
 
-          <!-- Course Syllabus (Dynamic) -->
           <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-700/50">
              <h3 class="font-bold text-xl text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                 <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
@@ -129,7 +122,6 @@ useHead({
           </div>
         </div>
 
-        <!-- Sidebar (Right Column): Sticky CTA -->
         <div class="lg:col-span-4">
           <div class="sticky top-24 bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100 dark:border-slate-700/50">
             <div class="mb-8">
@@ -139,7 +131,6 @@ useHead({
               </div>
             </div>
 
-            <!-- Enroll Button -->
             <button 
                 @click="handleEnroll"
                 :disabled="isEnrolling"
@@ -164,10 +155,6 @@ useHead({
               </div>
             </div>
             
-             <!-- Share / Wishlist placeholder -->
-             <!-- <div class="mt-6 flex gap-3">
-                 <button class="flex-1 py-2 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-400 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">แชร์</button>
-             </div> -->
           </div>
         </div>