feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/components/common/FormInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file FormInput.vue
- * @description Reusable input component with label, error handling, and support for disabled/required states.
- * Now supports password visibility toggle.
+ * @description คอมโพเนนต์ช่องกรอกข้อมูล (Input) แบบนำกลับมาใช้ใหม่ได้ พร้อมรองรับข้อความป้ายกำกับ, จัดการข้อผิดพลาด และสถานะปิดใช้งาน/บังคับกรอก
+ * รองรับการสลับซ่อน/แสดงรหัสผ่าน
  */
 
 const props = defineProps<{
@@ -16,19 +16,19 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  /** Update v-model value */
+  /** อัปเดตค่า v-model (Update v-model value) */
   'update:modelValue': [value: string]
 }>()
 
-// Password visibility state
+// สถานะการซ่อน/แสดงรหัสผ่าน (Password visibility state)
 const showPassword = ref(false)
 
-// Toggle function
+// ฟังก์ชันสำหรับสลับสถานะ (Toggle function)
 const togglePassword = () => {
   showPassword.value = !showPassword.value
 }
 
-// Compute input type based on visibility state
+// คำนวณประเภทของช่องกรอกข้อมูล بناءً pada state (Compute input type based on visibility state)
 const inputType = computed(() => {
   if (props.type === 'password') {
     return showPassword.value ? 'text' : 'password'
@@ -59,7 +59,7 @@ const updateValue = (event: Event) => {
         @input="updateValue"
       >
       
-      <!-- Password Toggle Button -->
+      <!-- ปุ่มสลับซ่อน/แสดงรหัสผ่าน (Password Toggle Button) -->
       <button
         v-if="type === 'password'"
         type="button"
@@ -67,13 +67,13 @@ const updateValue = (event: Event) => {
         @click="togglePassword"
         tabindex="-1"
       >
-        <!-- Eye Icon (Show) -->
+        <!-- ไอคอนเปิดตา (แสดงรหัสผ่าน) (Eye Icon - Show) -->
         <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
           <circle cx="12" cy="12" r="3"/>
         </svg>
         
-        <!-- Eye Off Icon (Hide) -->
+        <!-- ไอคอนปิดตา (ซ่อนรหัสผ่าน) (Eye Off Icon - Hide) -->
         <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
           <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>