fixed ฟอร์มแจ้งปัญหาบังคับให้ระบุอีเมล

CLAUDE.md

@@ -0,0 +1,155 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is an HRMS (Human Resource Management System) check-in/check-out web application built for the Bangkok Metropolitan Administration (BMA). The application allows employees to record their work attendance using geolocation verification and camera features.
+
+**Tech Stack:**
+- Vue 3 with Composition API and TypeScript
+- Vite for build tooling
+- Quasar Framework for UI components
+- Pinia for state management
+- Vue Router for routing
+- Keycloak for authentication
+- ArcGIS API and Google Maps for location features
+- PWA capabilities with offline support
+- Docker deployment with nginx
+
+**Development Server:** Runs on port 3008
+
+## Common Commands
+
+```bash
+# Development
+npm run dev                    # Start dev server on port 3008
+
+# Building
+npm run build                  # Build for production
+npm run preview                # Preview production build on port 3008
+
+# Testing
+npm run test:unit              # Run unit tests with vitest
+npm run test:e2e               # Run e2e tests with cypress
+npm run test:e2e:dev           # Run cypress in dev mode
+
+# Code Quality
+npm run lint                   # Lint and auto-fix code
+npm run format                 # Format code with prettier
+npm run type-check             # TypeScript type checking
+
+# Docker
+docker buildx build --platform=linux/amd64 -f docker/Dockerfile . -t hrms-checkin:0.1
+```
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── api/               # API layer modules (checkin, history, message)
+├── components/        # Reusable Vue components
+├── composables/       # Vue composables (e.g., usePermissions)
+├── interface/         # TypeScript type definitions
+│   └── response/      # API response types
+├── plugins/           # Vue plugins (auth, http, keycloak)
+├── router/            # Vue Router configuration
+├── stores/            # Pinia stores for state management
+├── style/             # Global styles and Quasar variables
+├── utils/             # Utility functions
+└── views/             # Page-level Vue components
+```
+
+### Key Architecture Patterns
+
+**Authentication Flow:**
+- Uses Keycloak for SSO authentication
+- Tokens stored in cookies with `BMAHRISCKI_KEYCLOAK_IDENTITY` key
+- Auth state managed in `src/plugins/auth.ts`
+- Router guards enforce authentication on protected routes
+- 401 responses trigger automatic logout via axios interceptor
+
+**State Management:**
+- `stores/mixin.ts` - Global utilities (Thai date formatting, dialogs, loaders, error handling)
+- `stores/chekin.ts` - Check-in history and status management
+- `stores/privacy.ts` - Privacy consent management
+- `stores/positionKeycloak.ts` - User position/role data
+
+**API Layer:**
+- Base axios instance in `src/plugins/http.ts` with automatic token injection
+- API endpoints organized by feature in `src/api/`
+- Environment-specific API URLs configured in `src/api/index.ts`
+- Production API URL set via `VITE_API_URI_CONFIG` env variable
+
+**Routing:**
+- Main layout (`MainView`) wraps authenticated routes
+- Protected routes require `meta.Auth: true`
+- Auth check runs in router beforeEach guard
+- Public routes: `/login`, `/auth`, `/reset-password`, `/history`
+
+**Geolocation & Maps:**
+- ArcGIS JS API for advanced mapping features
+- Google Maps integration for location services
+- Camera integration for check-in photo verification
+- Privacy consent required before accessing camera/location
+
+**Date/Time Handling:**
+- Thai Buddhist calendar (BE) conversion (+543 years)
+- Thai month names (full and abbreviated)
+- `date-fns-tz` for timezone handling (Asia/Bangkok)
+- Fiscal year calculation (October start)
+
+### Component Conventions
+
+- Components use Quasar UI components (`q-btn`, `q-dialog`, etc.)
+- Thai language throughout the UI
+- Custom dialogs use `CustomDialog.vue` component
+- Loading states use Quasar's `QSpinnerCube`
+- Error dialogs prevent overlap with `activeErrorDialog` tracking
+
+### Localization
+
+- Quasar configured with Thai language (`quasar/lang/th`)
+- All UI text in Thai
+- Date formatting uses `date2Thai()` and `monthYear2Thai()` from mixin store
+- Status labels translated: ABSENT→'ขาดราชการ', NORMAL→'ปกติ', LATE→'สาย'
+
+### Environment Variables
+
+Required in `.env.production`:
+- `VITE_API_URI_CONFIG` - Production API base URL
+- `VITE_URL_SSO` - Keycloak SSO logout URL
+- `VITE_URL_USER` - User service URL for redirects
+
+### PWA Configuration
+
+- Auto-update registration with `vite-plugin-pwa`
+- Manifest: "HRMS-Checkin" / "HRMS Checkin"
+- Icons: 192x192 and 512x512 PNG
+- Service worker registered in `src/registerServiceWorker.ts`
+
+## Development Notes
+
+**When adding new features:**
+1. Create API functions in `src/api/`
+2. Define TypeScript interfaces in `src/interface/response/`
+3. Use Pinia stores for complex state, composables for reusable logic
+4. Follow Thai localization patterns for user-facing text
+5. Ensure privacy consent flow for camera/location features
+
+**When working with dates:**
+- Always use `date2Thai()` or `convertDateToAPI()` from mixin store
+- Dates stored in BE format (year + 543)
+- API expects `yyyy-MM-dd` or `yyyy-MM-dd HH:mm:ss` format
+
+**When handling errors:**
+- Use `messageError()` from mixin store for consistent error dialogs
+- 401 errors trigger automatic logout
+- Dialog overlap prevention built into error handling
+
+**When running tests:**
+- Unit tests use Vitest with jsdom environment
+- E2E tests use Cypress with baseUrl: `http://localhost:4173`
+- Test files follow pattern: `*.cy.{js,ts}` or `*.spec.{js,ts}`

src/components/DialogDebug.vue

@@ -305,6 +305,9 @@ function onClose() {
               </q-uploader>
             </div>
             <div class="col-12">
+              <div class="text-caption text-grey-8 q-mb-sm">
+                ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
+              </div>
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-6 col-lg-6">
                   <q-input
@@ -315,10 +318,11 @@ function onClose() {
                     class="inputgreen"
                     hide-bottom-space
                     :rules="[
-                      () =>
-                        !!formData.email ||
-                        !!formData.phone ||
-                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
+                      (val: string) => !!val || 'กรุณากรอกที่อยู่อีเมล',
+                      (val: string) => {
+                        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                        return emailPattern.test(val) || 'กรุณากรอกที่อยู่อีเมลในรูปแบบที่ถูกต้อง';
+                      }
                     ]"
                   />
                 </div>
@@ -330,12 +334,6 @@ function onClose() {
                     v-model="formData.phone"
                     class="inputgreen"
                     hide-bottom-space
-                    :rules="[
-                      () =>
-                        !!formData.email ||
-                        !!formData.phone ||
-                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
-                    ]"
                   />
                 </div>
               </div>

src/components/PopupPrivacy.vue

@@ -108,6 +108,7 @@ const checkIfScrollable = () => {
     transition-show="slide-up"
     transition-hide="slide-down"
     :maximized="$q.screen.lt.sm"
+    @show="checkIfScrollable"
   >
     <q-card class="privacy-card" style="max-width: 560px; max-height: 95vh">
       <!-- Header -->

src/views/HomeView.vue

@@ -187,6 +187,9 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
+const availableCameras = ref<any[]>([])
+const currentCameraIndex = ref<number>(0)
+const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
 const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
@@ -302,6 +305,16 @@ async function stopChecking() {
   }
 }
 
+function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
+  const lowerLabel = label.toLowerCase()
+  if (lowerLabel.includes('front') || lowerLabel.includes('user') || lowerLabel.includes('face')) {
+    return 'front'
+  } else if (lowerLabel.includes('back') || lowerLabel.includes('environment') || lowerLabel.includes('rear')) {
+    return 'back'
+  }
+  return 'unknown'
+}
+
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -315,7 +328,11 @@ async function openCamera() {
       await camera.value?.stop()
     } else {
       await camera.value?.start()
-      await changeCamera() // ต้องรอให้ start() เสร็จก่อน
+      const devices: any = await camera.value?.devices(['videoinput'])
+      if (devices) {
+        availableCameras.value = devices
+        await changeCamera()
+      }
     }
     cameraIsOn.value = !cameraIsOn.value
   } else {
@@ -329,10 +346,59 @@ async function openCamera() {
 }
 
 /** change camera device*/
-async function changeCamera() {
-  const devices: any = await camera.value?.devices(['videoinput'])
-  const device = await devices[0]
-  camera.value?.changeCamera(device.deviceId)
+async function changeCamera(targetCameraType?: 'front' | 'back') {
+  try {
+    const devices: any = await camera.value?.devices(['videoinput'])
+
+    if (!devices || devices.length === 0) {
+      console.warn('No cameras found')
+      return
+    }
+
+    availableCameras.value = devices
+
+    if (devices.length === 1 || !targetCameraType) {
+      const device = devices[0]
+      await camera.value?.changeCamera(device.deviceId)
+      currentCameraIndex.value = 0
+      currentCameraType.value = identifyCameraType(device.label || '')
+      return
+    }
+
+    const matchingCameras = devices.filter((device: any) =>
+      identifyCameraType(device.label || '') === targetCameraType
+    )
+
+    if (matchingCameras.length > 0) {
+      const targetDevice = matchingCameras[0]
+      await camera.value?.changeCamera(targetDevice.deviceId)
+      currentCameraIndex.value = devices.indexOf(targetDevice)
+      currentCameraType.value = targetCameraType
+    } else {
+      const nextIndex = (currentCameraIndex.value + 1) % devices.length
+      const nextDevice = devices[nextIndex]
+      await camera.value?.changeCamera(nextDevice.deviceId)
+      currentCameraIndex.value = nextIndex
+      currentCameraType.value = identifyCameraType(nextDevice.label || '')
+    }
+  } catch (error) {
+    console.error('Error switching camera:', error)
+  }
+}
+
+/** switch camera device*/
+async function switchCamera() {
+  if (availableCameras.value.length <= 1) {
+    return
+  }
+
+  // สลับแค่ระหว่างกล้อง 2 ตัวแรก (กล้องหน้าและหลังหลัก)
+  const targetIndex = currentCameraIndex.value === 0 ? 1 : 0
+  const targetDevice = availableCameras.value[targetIndex]
+
+  await camera.value?.changeCamera(targetDevice.deviceId)
+  currentCameraIndex.value = targetIndex
+  currentCameraType.value = identifyCameraType(targetDevice.label || '')
 }
 
 /** function ถ่ายรูป*/
@@ -759,6 +825,16 @@ watch(
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
+                          <q-btn
+                            v-if="availableCameras.length > 1 && img == null"
+                            round
+                            push
+                            icon="flip_camera_ios"
+                            size="sm"
+                            color="secondary"
+                            class="q-mr-sm"
+                            @click="switchCamera"
+                          />
                           <q-btn
                             v-if="img == null"
                             round
@@ -783,6 +859,16 @@ watch(
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
+                            <q-btn
+                              v-if="availableCameras.length > 1 && img == null"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
                             <q-btn
                               round
                               v-if="img == null"
@@ -1283,4 +1369,4 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
-</style>
+</style>