.claude/agent-memory/hrms-checkin-expert/MEMORY.md

@@ -7,8 +7,3 @@
 ## Project Issues & Fixes
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
-- [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue
-- [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
-- [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
-- [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
-- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness

.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md

@@ -1,11 +0,0 @@
----
-name: front_camera_preview_alignment
-description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting
-type: project
----
-
-When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation.
-
-**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.”
-
-**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`.

.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md

@@ -1,11 +0,0 @@
----
-name: ios16-inline-camera-white-preview
-description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early
-type: project
----
-
-In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering.
-
-**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded.
-
-**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture.

.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md

@@ -1,11 +0,0 @@
----
-name: ios_native_camera_popup_control
-description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement.
-type: project
----
-
-In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform).  The hidden `<input type="file" capture="user">` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail.
-
-**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails."  iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable.  A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted.
-
-**How to apply:** `preferNativePhotoCapture` must start `false` on all devices.  Never seed it with `isIOSDevice`.  All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically.

.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md

@@ -1,11 +0,0 @@
----
-name: ios_native_photo_mirroring
-description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization
-type: project
----
-
-For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization.
-
-**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS.
-
-**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture.

.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md

@@ -1,11 +0,0 @@
----
-name: Active camera investigation scope
-description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use
-type: project
----
-
-Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue.
-
-**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow.
-
-**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`.

package.json

@@ -34,7 +34,6 @@
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
-    "socket.io-client": "^4.8.3",
     "vite-plugin-pwa": "^0.16.7",
     "vue": "^3.4.15",
     "vue-router": "^4.1.6",

src/App.vue

@@ -1,12 +1,3 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { useSocketStore } from '@/stores/socket'
-
-onMounted(() => {
-  useSocketStore()
-})
-</script>
-
 <template>
   <router-view />
 </template>

src/api/socket.ts

@@ -1,7 +0,0 @@
-import env from "./index";
-
-const socket = `${env.API_URI}/org-socket`;
-
-export default {
-  socket,
-};

src/app.config.ts

@@ -4,7 +4,6 @@
 import leave from '@/api/api.checkin'
 import history from '@/api/api.history'
 import message from '@/api/api.message'
-import socket from '@/api/socket'
 
 const API = {
   /**leave */
@@ -13,7 +12,6 @@ const API = {
   ...history,
   /**message */
   ...message,
-  ...socket,
 }
 
 export default {

src/components/AscGISMap.vue

@@ -163,19 +163,8 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
+    mapView.value.resize()
-    try {
+    mapView.value.requestRender?.()
-      if (typeof mapView.value.resize === 'function') {
-        mapView.value.resize()
-      }
-    } catch (error) {
-      console.warn('Map resize failed:', error)
-    }
-
-    if (typeof mapView.value.requestRender === 'function') {
-      mapView.value.requestRender?.()
-    }
-
     mapView.value
       .goTo(
         {
@@ -296,11 +285,7 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-
+    mapView.value.graphics.add(userGraphic)
-    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
-    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
-      mapView.value.graphics.add(userGraphic)
-    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -396,22 +381,12 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-
+        mapView.value.graphics.add(poiGraphic)
-        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
+        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-        if (mapView.value && !mapView.value.destroyed) {
+        mapView.value.goTo({
-          if (mapView.value.graphics) {
+          target: [userPoint, poiPoint],
-            mapView.value.graphics.add(poiGraphic)
+          zoom: zoomMap.value,
-          }
+        })
-          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-          if (typeof mapView.value.goTo === 'function') {
-            mapView.value.goTo({
-              target: [userPoint, poiPoint],
-              zoom: zoomMap.value,
-            }).catch(() => {
-              // Ignore goTo errors
-            })
-          }
-        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })

src/composables/usePermissions.ts

@@ -1,171 +1,52 @@
-import { onBeforeUnmount, ref } from 'vue'
+import { useQuasar } from 'quasar'
 import { usePrivacyStore } from '@/stores/privacy'
 
-type BrowserPermissionState = PermissionState | 'unsupported'
-
-type PermissionQueryName = 'camera' | 'geolocation'
-
 export function usePermissions() {
+  const $q = useQuasar()
   const privacyStore = usePrivacyStore()
-  const cameraPermissionState = ref<BrowserPermissionState>('prompt')
-  const locationPermissionState = ref<BrowserPermissionState>('prompt')
 
-  let cameraPermissionStatus: PermissionStatus | null = null
+  // const checkCameraPermission = (): boolean => {
-  let locationPermissionStatus: PermissionStatus | null = null
+  //   if (!privacyStore.isAccepted) {
+  //     privacyStore.modalPrivacy = true
+  //     $q.notify({
+  //       type: 'warning',
+  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง',
+  //       position: 'top',
+  //     })
+  //     return false
+  //   }
+  //   return true
+  // }
 
-  const isPermissionsApiSupported = () =>
+  // const checkLocationPermission = (): boolean => {
-    typeof navigator !== 'undefined' && 'permissions' in navigator
+  //   if (!privacyStore.isAccepted) {
-
+  //     privacyStore.modalPrivacy = true
-  const setPermissionState = (
+  //     $q.notify({
-    target: typeof cameraPermissionState | typeof locationPermissionState,
+  //       type: 'warning',
-    state: BrowserPermissionState
+  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
-  ) => {
+  //       position: 'top',
-    target.value = state
+  //     })
-  }
+  //     return false
-
+  //   }
-  const setPermissionChangeListener = (
+  //   return true
-    name: PermissionQueryName,
+  // }
-    status: PermissionStatus
-  ) => {
-    status.onchange = () => {
-      const target =
-        name === 'camera' ? cameraPermissionState : locationPermissionState
-      setPermissionState(target, status.state)
-    }
-  }
-
-  async function queryPermissionState(name: PermissionQueryName) {
-    if (!isPermissionsApiSupported()) {
-      return null
-    }
-
-    try {
-      return await navigator.permissions.query({ name } as PermissionDescriptor)
-    } catch (error) {
-      return null
-    }
-  }
-
-  async function syncPermissionState(name: PermissionQueryName) {
-    const target =
-      name === 'camera' ? cameraPermissionState : locationPermissionState
-    const previousStatus =
-      name === 'camera' ? cameraPermissionStatus : locationPermissionStatus
-
-    if (previousStatus) {
-      previousStatus.onchange = null
-    }
-
-    const status = await queryPermissionState(name)
-    if (!status) {
-      if (target.value === 'prompt') {
-        setPermissionState(target, 'unsupported')
-      }
-      return
-    }
-
-    if (name === 'camera') {
-      cameraPermissionStatus = status
-    } else {
-      locationPermissionStatus = status
-    }
-
-    setPermissionState(target, status.state)
-    setPermissionChangeListener(name, status)
-  }
-
-  async function syncPermissionStates() {
-    await Promise.all([
-      syncPermissionState('camera'),
-      syncPermissionState('geolocation'),
-    ])
-  }
 
   const checkPrivacyAccepted = (): boolean => {
     if (!privacyStore.isAccepted) {
       privacyStore.modalPrivacy = true
+      // $q.notify({
+      //   type: 'warning',
+      //   message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน',
+      //   position: 'center',
+      // })
       return false
     }
     return true
   }
 
-  async function requestCameraPermission() {
-    if (!checkPrivacyAccepted()) {
-      return false
-    }
-
-    if (cameraPermissionState.value === 'granted') {
-      return true
-    }
-
-    if (!navigator.mediaDevices?.getUserMedia) {
-      setPermissionState(cameraPermissionState, 'unsupported')
-      return false
-    }
-
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: { facingMode: 'user' },
-        audio: false,
-      })
-
-      stream.getTracks().forEach((track) => track.stop())
-      setPermissionState(cameraPermissionState, 'granted')
-      return true
-    } catch (error) {
-      setPermissionState(cameraPermissionState, 'denied')
-      return false
-    } finally {
-      await syncPermissionState('camera')
-    }
-  }
-
-  async function requestLocationPermission() {
-    if (!checkPrivacyAccepted()) {
-      return false
-    }
-
-    if (locationPermissionState.value === 'granted') {
-      return true
-    }
-
-    if (!navigator.geolocation) {
-      setPermissionState(locationPermissionState, 'unsupported')
-      return false
-    }
-
-    return new Promise<boolean>((resolve) => {
-      navigator.geolocation.getCurrentPosition(
-        async () => {
-          setPermissionState(locationPermissionState, 'granted')
-          await syncPermissionState('geolocation')
-          resolve(true)
-        },
-        async () => {
-          setPermissionState(locationPermissionState, 'denied')
-          await syncPermissionState('geolocation')
-          resolve(false)
-        }
-      )
-    })
-  }
-
-  onBeforeUnmount(() => {
-    if (cameraPermissionStatus) {
-      cameraPermissionStatus.onchange = null
-    }
-
-    if (locationPermissionStatus) {
-      locationPermissionStatus.onchange = null
-    }
-  })
-
   return {
-    cameraPermissionState,
+    // checkCameraPermission,
-    locationPermissionState,
+    // checkLocationPermission,
     checkPrivacyAccepted,
-    syncPermissionStates,
-    requestCameraPermission,
-    requestLocationPermission,
   }
 }

src/stores/socket.ts

@@ -1,101 +0,0 @@
-import { ref } from 'vue'
-import config from '@/app.config'
-import { getToken } from '@/plugins/auth'
-import { defineStore } from 'pinia'
-import { Notify } from 'quasar'
-import { io, Socket } from 'socket.io-client'
-interface sockeBackup {
-  message: string
-  success?: boolean
-}
-
-export const useSocketStore = defineStore('socket', () => {
-  let socket: Socket
-  const notificationCounter = ref(0);
-
-  async function init() {
-    socket = io(new URL(config.API.socket).origin, {
-      auth: { token: await getToken() },
-      path: '/api/v1/org-socket',
-    })
-
-    socket.on('socket-notification', (payload) => {
-      let body: sockeBackup = JSON.parse(payload)
-      notificationCounter.value++ 
-      notifyStatus(body.message, body.success)
-    })
-  }
-
-  function notifyStatus(message: string, success?: boolean) {
-    Notify.create({
-      group: false,
-      type: success === undefined || success ? 'positive' : 'negative',
-      message: `${message}`,
-      position: 'top',
-      classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้
-      timeout: success === undefined || success ? 3000 : 0,
-      actions:
-        success === undefined || success
-          ? []
-          : [
-              {
-                icon: 'close',
-                color: 'white',
-                round: true,
-              },
-            ],
-      progress: true,
-    })
-  }
-
-  function fnStyleNotiOrg() {
-    if (document.getElementById('notify-link-style')) return
-    const style = document.createElement('style')
-    style.id = 'notify-link-style'
-    style.textContent = `
-    .notify-link {
-      padding: 4px 8px;
-      border-radius: 4px;
-      text-decoration: none;
-      color: #fff;
-      border: 1px solid #fff;
-      transition: all 0.3s;
-      cursor: pointer;
-      margin:0 0 0 5px;
-    }
-    .notify-link:hover {
-      background-color: #ffffff;
-      color: #21BA45;
-    }
-  `
-    document.head.appendChild(style)
-  }
-  ;(window as any).resetOrgPage = (type: string) => {
-    localStorage.setItem('org_type', type)
-    window.location.reload()
-  }
-  function notifyStatusOrg(type: string, message: string, success?: boolean) {
-    fnStyleNotiOrg()
-    Notify.create({
-      message: `${message} <a href="#" onclick="window.resetOrgPage('${type}')" class="notify-link">${
-        type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน'
-      }</a>`,
-      html: true,
-      group: false,
-      type: success === undefined || success ? 'positive' : 'negative',
-      position: 'top',
-      timeout: 0,
-      actions: [
-        {
-          icon: 'close',
-          color: 'white',
-          round: true,
-        },
-      ],
-    })
-  }
-
-  init()
-
-  return { notificationCounter }
-})

src/style/quasar-variables.sass

@@ -69,30 +69,30 @@ div
 $separator-color: #EDEDED !default
 
 .bg-teal-1
-    background: #e0f2f1a6 !important
+  background: #e0f2f1a6 !important
   
 .table_ellipsis
-    max-width: 200px
+  max-width: 200px
-    white-space: nowrap
+  white-space: nowrap
-    overflow: hidden
+  overflow: hidden
-    text-overflow: ellipsis
+  text-overflow: ellipsis
 
 .table_ellipsis:hover
-    word-wrap: break-word
+  word-wrap: break-word
-    overflow: visible
+  overflow: visible
-    white-space: normal
+  white-space: normal
 
 .table_ellipsis2
-    max-width: 25vw
+  max-width: 25vw
-    white-space: nowrap
+  white-space: nowrap
-    overflow: hidden
+  overflow: hidden
-    text-overflow: ellipsis
+  text-overflow: ellipsis
 
 .table_ellipsis2:hover
-    word-wrap: break-word
+  word-wrap: break-word
-    overflow: visible
+  overflow: visible
-    white-space: normal
+  white-space: normal
-    transition: width 2s
+  transition: width 2s
 
 $muti-tab: #87d4cc
 .text-muti-tab
@@ -100,6 +100,7 @@ $muti-tab: #87d4cc
 .bg-muti-tab
     background: $muti-tab !important
 
+    
 /* editor */
 
 .q-editor
@@ -108,25 +109,26 @@ $muti-tab: #87d4cc
     font-weight: 400
     
 .q-editor h1, .q-menu h1
-    font-size: 1.5rem
+  font-size: 1.5rem
-    line-height: 2rem
+  line-height: 2rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
 
 .q-editor h2,  .q-menu h2
-    font-size: 1.25rem
+  font-size: 1.25rem
-    line-height: 1.5rem
+  line-height: 1.5rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
+
 
 .q-editor h3, .q-menu h3
-    font-size: 1.1rem
+  font-size: 1.1rem
-    line-height: 1.5rem
+  line-height: 1.5rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
 
 .q-editor p, .q-menu p
     margin: 0
@@ -134,7 +136,4 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-    color: #c8d3db
+  color: #c8d3db
-
-.custom-notification-top
-    margin-top: 180px !important

src/views/MapView.vue

@@ -133,19 +133,14 @@ const photoHeight = ref<number>(350)
 
 /** function เปิดกล้อง */
 async function openCamera() {
-  try {
+  // change camera device
-    // change camera device
+  if (cameraIsOn.value) {
-    if (cameraIsOn.value) {
+    camera.value?.stop()
-      camera.value?.stop()
+  } else {
-    } else {
+    await camera.value?.start()
-      await camera.value?.start()
+    changeCamera()
-      changeCamera()
-    }
-    cameraIsOn.value = !cameraIsOn.value
-  } catch (error) {
-    console.error('Error opening camera:', error)
-    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
+  cameraIsOn.value = !cameraIsOn.value
 }
 
 /** change camera device */
@@ -157,49 +152,25 @@ async function changeCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  try {
+  const imageBlob: any = await camera.value?.snapshot(
-    const imageBlob: any = await camera.value?.snapshot(
+    { width: photoWidth.value, height: photoHeight.value },
-      { width: photoWidth.value, height: photoHeight.value },
+    'image/png',
-      'image/jpeg',
+    0.5
-      0.8
+  )
-    )
+  const fileName = 'photo.png'
-    if (!imageBlob) {
+  //ไฟล์รูป
-      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  const file = new File([imageBlob], fileName, { type: 'image/png' })
-      return
+  fileImg.value = file
-    }
+  //แสดงรูป
-    const fileName = `photo_${Date.now()}.jpg`
+  camera.value?.stop()
-    //ไฟล์รูป
+  const url = URL.createObjectURL(imageBlob)
-    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+  img.value = url
-    fileImg.value = file
-
-    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-    }
-
-    //แสดงรูป
-    camera.value?.stop()
-    const url = URL.createObjectURL(imageBlob)
-    img.value = url
-  } catch (error) {
-    console.error('Error capturing photo:', error)
-    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
-  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-async function refreshPhoto() {
+function refreshPhoto() {
-  try {
+  img.value = undefined
-    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+  camera.value?.start()
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-      img.value = undefined
-    }
-    await camera.value?.start()
-  } catch (error) {
-    console.error('Error refreshing photo:', error)
-    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-  }
 }
 
 /** ref validate*/
@@ -364,8 +335,7 @@ onMounted(async () => {
                       :resolution="{ width: photoWidth, height: photoHeight }"
                       ref="camera"
                       :autoplay="false"
-                      :playsinline="true"
+                      :style="!img ? 'display: block' : 'display: none'"
-                      :facingMode="'user'"
                     />
 
                     <!-- แสดงรูปเมื่อกด capture -->
@@ -599,12 +569,4 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
-
-/* iOS-specific video fixes */
-.card-container video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  -webkit-object-fit: cover;
-}
 </style>

src/views/login.vue

@@ -20,7 +20,7 @@ const password = ref<string>('')
 async function onSubmit() {
   showLoader()
   const formdata = new URLSearchParams()
-  formdata.append('username', username.value.trim())
+  formdata.append('username', username.value)
   formdata.append('password', password.value)
 
   await axios