pukaad-ui-lib 1.239.0 → 1.241.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.239.0",
+  "version": "1.241.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue

@@ -15,13 +15,15 @@
           {{ props.label }}
           <span v-if="props.required" class="text-destructive">*</span>
         </div>
-        <div
+        <Button
           v-if="!props.disabledForgotPassword"
-          class="font-body-medium text-primary"
+          variant="text"
+          color="primary"
+          class="font-body-medium"
           @click="handleForgotPassword"
         >
           ลืมรหัสผ่าน
-        </div>
+        </Button>
       </ShadFormLabel>
     </template>
   </InputTextField>
@@ -46,6 +48,7 @@
 
 <script setup>
 import { ref, computed } from "vue";
+import Button from "../button.vue";
 const props = defineProps({
   new: { type: Boolean, required: false, default: false },
   disabledForgotPassword: { type: Boolean, required: false, default: false },

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/modal-2FA-generate.vue

@@ -1,20 +1,14 @@
 <template>
-  <Modal
-    width="550"
-    title="คำแนะนำการตั้งค่า"
-    title-position="center"
-    :loading="isLoading"
-    v-model="isOpen"
-  >
+  <Modal class="w-[512px]" title="คำแนะนำการตั้งค่า" :loading="isLoading" v-model="isOpen">
     <div class="flex flex-col gap-[16px]">
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
         <div>
           เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
         </div>
       </div>
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">
           2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
         </div>
         <div>
@@ -29,17 +23,14 @@
             <div class="font-body-large-prominent">
               {{ key }}
             </div>
-            <div
-              class="cursor-pointer text-primary font-body-large"
-              @click="copyToClipboard(key)"
-            >
+            <div class="cursor-pointer text-primary font-body-large" @click="copyToClipboard(key)">
               คัดลอกคีย์
             </div>
           </div>
         </div>
       </div>
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">
           3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
         </div>
         <div>
@@ -51,12 +42,7 @@
     </div>
 
     <template #footer>
-      <Button
-        color="primary"
-        full-width
-        :disabled="isDisabled"
-        @click="onComplete"
-      >
+      <Button color="primary" class="w-full" :disabled="isDisabled" @click="onComplete">
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -86,8 +72,8 @@ const isDisabled = ref(true);
 const twoFaGenerate = async () => {
   try {
     isLoading.value = true;
-    const { status, data } = await api("/me/two-fa-generate");
-    if (status !== "success") throw "Generate \u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08";
+    const { message, data } = await api("/me/two-fa-generate");
+    if (message?.title !== "\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08") throw "Generate \u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08";
     key.value = data.key;
     barcode2FA.value = data.qr_code;
     isDisabled.value = false;

package/dist/runtime/components/modal/modal-email-OTP.d.vue.ts

@@ -1,6 +1,16 @@
 export interface ModalEmailOTPProps {
     email?: string;
     confirmedText?: string;
+    /** Custom API path for requesting OTP. Defaults to /me/email-otp-request */
+    requestPath?: string;
+    /** Custom request body. When provided, used instead of { email }. */
+    requestBody?: Record<string, any>;
+    /** Custom API path for verifying OTP. Defaults to /me/email-otp-verify */
+    verifyPath?: string;
+    /** Extra body fields merged with { code } when verifying. Defaults to { email }. */
+    verifyBody?: Record<string, any>;
+    /** If provided, sets the initial countdown and skips auto-request on open. */
+    initialExpiredTime?: string;
 }
 type __VLS_Props = ModalEmailOTPProps;
 type __VLS_ModelProps = {
@@ -10,10 +20,10 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: () => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-email-OTP.vue

@@ -44,7 +44,12 @@ const { CountdownTime } = useCountDown();
 const emits = defineEmits(["complete"]);
 const props = defineProps({
   email: { type: String, required: false },
-  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
+  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
+  requestPath: { type: String, required: false },
+  requestBody: { type: Object, required: false },
+  verifyPath: { type: String, required: false },
+  verifyBody: { type: Object, required: false },
+  initialExpiredTime: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{
   default: false
@@ -64,16 +69,15 @@ const maskedEmail = computed(() => {
 });
 const onVerifyOTP = async () => {
   try {
-    await api("/me/email-otp-verify", {
+    const path = props.verifyPath ?? "/me/email-otp-verify";
+    const body = props.verifyBody ? { ...props.verifyBody, code: valueOTP.value } : { code: valueOTP.value, email: props.email };
+    const response = await api(path, {
       method: "POST",
-      body: {
-        code: valueOTP.value,
-        email: props.email
-      }
+      body
     });
     valueOTP.value = "";
     isOpen.value = false;
-    emits("complete");
+    emits("complete", response?.data);
   } catch (e) {
     $toast.error("OTP \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07");
   }
@@ -81,16 +85,13 @@ const onVerifyOTP = async () => {
 const handleSendEmail = async () => {
   try {
     isLoading.value = true;
-    if (!props.email) throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 email");
-    const response = await api(
-      "/me/email-otp-request",
-      {
-        method: "POST",
-        body: {
-          email: props.email
-        }
-      }
-    );
+    const path = props.requestPath ?? "/me/email-otp-request";
+    const body = props.requestBody ?? { email: props.email };
+    if (!props.requestBody && !props.email) throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 email");
+    const response = await api(path, {
+      method: "POST",
+      body
+    });
     timeExp.value = response.data.expired_time;
   } catch (err) {
     $toast.error("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07 !");
@@ -101,7 +102,11 @@ const handleSendEmail = async () => {
 watch(isOpen, (v) => {
   if (v) {
     valueOTP.value = "";
-    handleSendEmail();
+    if (props.initialExpiredTime) {
+      timeExp.value = props.initialExpiredTime;
+    } else {
+      handleSendEmail();
+    }
   } else {
     timeExp.value = "";
   }

package/dist/runtime/components/modal/modal-email-OTP.vue.d.ts

@@ -1,6 +1,16 @@
 export interface ModalEmailOTPProps {
     email?: string;
     confirmedText?: string;
+    /** Custom API path for requesting OTP. Defaults to /me/email-otp-request */
+    requestPath?: string;
+    /** Custom request body. When provided, used instead of { email }. */
+    requestBody?: Record<string, any>;
+    /** Custom API path for verifying OTP. Defaults to /me/email-otp-verify */
+    verifyPath?: string;
+    /** Extra body fields merged with { code } when verifying. Defaults to { email }. */
+    verifyBody?: Record<string, any>;
+    /** If provided, sets the initial countdown and skips auto-request on open. */
+    initialExpiredTime?: string;
 }
 type __VLS_Props = ModalEmailOTPProps;
 type __VLS_ModelProps = {
@@ -10,10 +20,10 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: () => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-forgot-password.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    complete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-forgot-password.vue

@@ -0,0 +1,146 @@
+<template>
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    v-bind="modalProps[modal.key]"
+    v-model="modalStates[modal.key]"
+    @complete="(data) => handleComplete(modal.key, data)"
+    @close="isOpen = false"
+  />
+</template>
+
+<script setup>
+import { reactive, ref, computed, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+import ModalUserAccountSearch from "@/runtime/components/modal/modal-user-account-search.vue";
+import ModalPhoneOTP from "@/runtime/components/modal/modal-phone-OTP.vue";
+import ModalEmailOTP from "@/runtime/components/modal/modal-email-OTP.vue";
+import ModalPasswordNew from "@/runtime/components/modal/modal-password-new.vue";
+const { $toast } = useNuxtApp();
+const api = useApi();
+const emit = defineEmits(["complete"]);
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const phone = ref("");
+const maskedPhone = ref("");
+const maskedEmail = ref(null);
+const method = ref("sms");
+const expiredTime = ref("");
+const resetToken = ref("");
+const isLoading = ref(false);
+const modals = [
+  { key: "accountSearch", component: ModalUserAccountSearch },
+  { key: "phoneOTP", component: ModalPhoneOTP },
+  { key: "emailOTP", component: ModalEmailOTP },
+  { key: "passwordNew", component: ModalPasswordNew }
+];
+const modalStates = reactive(
+  Object.fromEntries(modals.map((m) => [m.key, false]))
+);
+const modalProps = computed(() => ({
+  accountSearch: {
+    confirmedText: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19"
+  },
+  phoneOTP: {
+    phone: phone.value,
+    phoneLabel: maskedPhone.value,
+    confirmedText: "\u0E16\u0E31\u0E14\u0E44\u0E1B"
+  },
+  emailOTP: {
+    email: maskedEmail.value ?? "",
+    requestPath: "/auth/forgot-password/send-otp",
+    requestBody: { phone: phone.value, method: "email" },
+    verifyPath: "/auth/forgot-password/verify-otp",
+    verifyBody: { phone: phone.value },
+    initialExpiredTime: expiredTime.value,
+    confirmedText: "\u0E16\u0E31\u0E14\u0E44\u0E1B"
+  },
+  passwordNew: {
+    resetToken: resetToken.value,
+    disabledForceLogout: false,
+    title: "\u0E15\u0E31\u0E49\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E43\u0E2B\u0E21\u0E48",
+    confirmText: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19"
+  }
+}));
+const handleComplete = async (key, data) => {
+  if (key === "accountSearch") {
+    const result = data;
+    phone.value = result.phone;
+    method.value = result.method;
+    maskedPhone.value = result.maskedPhone;
+    maskedEmail.value = result.maskedEmail;
+    await callSendOTP();
+    return;
+  }
+  if (key === "phoneOTP") {
+    await callVerifyOTP(data);
+    return;
+  }
+  if (key === "emailOTP") {
+    const token = data?.reset_token;
+    if (!token) {
+      $toast?.error?.("\u0E44\u0E21\u0E48\u0E1E\u0E1A reset token");
+      return;
+    }
+    resetToken.value = token;
+    modalStates.passwordNew = true;
+    return;
+  }
+  if (key === "passwordNew") {
+    isOpen.value = false;
+    $toast?.success?.("\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+    emit("complete");
+    return;
+  }
+};
+const callSendOTP = async () => {
+  isLoading.value = true;
+  try {
+    const res = await api("/auth/forgot-password/send-otp", {
+      method: "POST",
+      body: { phone: phone.value, method: method.value }
+    });
+    expiredTime.value = res.data.expired_time;
+    if (method.value === "sms") {
+      modalStates.phoneOTP = true;
+    } else {
+      modalStates.emailOTP = true;
+    }
+  } catch (e) {
+    const msg = e?.data?.message?.description || e?.data?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E2A\u0E48\u0E07 OTP";
+    $toast?.error?.(msg);
+  } finally {
+    isLoading.value = false;
+  }
+};
+const callVerifyOTP = async (code) => {
+  isLoading.value = true;
+  try {
+    const res = await api("/auth/forgot-password/verify-otp", {
+      method: "POST",
+      body: { phone: phone.value, code }
+    });
+    resetToken.value = res.data.reset_token;
+    modalStates.passwordNew = true;
+  } catch (e) {
+    const msg = e?.data?.message?.description || e?.data?.message || "OTP \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E21\u0E14\u0E2D\u0E32\u0E22\u0E38";
+    $toast?.error?.(msg);
+  } finally {
+    isLoading.value = false;
+  }
+};
+watch(isOpen, (v) => {
+  if (v) {
+    phone.value = "";
+    maskedPhone.value = "";
+    maskedEmail.value = null;
+    method.value = "sms";
+    expiredTime.value = "";
+    resetToken.value = "";
+    modalStates.accountSearch = true;
+  } else {
+    modals.forEach((m) => modalStates[m.key] = false);
+  }
+});
+</script>

package/dist/runtime/components/modal/modal-forgot-password.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    complete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-new.d.vue.ts

@@ -2,6 +2,8 @@ interface Props {
     title?: string;
     confirmText?: string;
     loginToken?: string;
+    /** When provided, uses forgot-password reset endpoint instead of password/create */
+    resetToken?: string;
     disabledForceLogout?: boolean;
 }
 type __VLS_Props = Props;
@@ -14,13 +16,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
     complete: (data: {
         secId: string;
-    }) => any;
+    } | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((data: {
         secId: string;
-    }) => any) | undefined;
+    } | null) => any) | undefined;
 }>, {
     title: string;
     confirmText: string;

package/dist/runtime/components/modal/modal-password-new.vue

@@ -5,21 +5,23 @@
     v-model="isOpen"
     @close="emit('close')"
     @submit="handleSubmit"
+    width="425px"
   >
-    <InputPassword
-      disabled-forgot-password
-      new
-      required
-      label="รหัสผ่าน"
-      placeholder="กรอกรหัสผ่าน"
-      v-model="password"
-    />
-    <InputCheckbox
-      v-if="!props.disabledForceLogout"
-      label="ออกจากระบบ Pukaad ในอุปกรณ์อื่นๆทั้งหมด"
-      v-model="logoutAll"
-    />
-
+    <div class="flex flex-col gap-2">
+      <InputPassword
+        disabled-forgot-password
+        new
+        required
+        label="รหัสผ่าน"
+        placeholder="กรอกรหัสผ่าน"
+        v-model="password"
+      />
+      <InputCheckbox
+        v-if="!props.disabledForceLogout"
+        label="ออกจากระบบ Pukaad ในอุปกรณ์อื่นๆทั้งหมด"
+        v-model="logoutAll"
+      />
+    </div>
     <template #footer="{ meta }">
       <Button
         type="submit"
@@ -36,15 +38,18 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
 const props = defineProps({
   title: { type: String, required: false, default: "\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E43\u0E2B\u0E21\u0E48" },
   confirmText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
   loginToken: { type: String, required: false },
+  resetToken: { type: String, required: false },
   disabledForceLogout: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["complete", "close"]);
 const { $toast } = useNuxtApp();
 const config = useRuntimeConfig();
+const api = useApi();
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const loading = ref(false);
 const password = ref("");
@@ -59,6 +64,27 @@ watch(isOpen, (open) => {
   }
 });
 const handleSubmit = async () => {
+  if (props.resetToken) {
+    loading.value = true;
+    try {
+      await api("/auth/forgot-password/reset-password", {
+        method: "POST",
+        body: {
+          reset_token: props.resetToken,
+          new_password: password.value,
+          logout_all: logoutAll.value
+        }
+      });
+      emit("complete", null);
+      isOpen.value = false;
+    } catch (e) {
+      const msg = e?.data?.message?.description || e?.data?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D";
+      $toast?.error?.(msg);
+    } finally {
+      loading.value = false;
+    }
+    return;
+  }
   if (!props.loginToken) {
     $toast?.error?.("\u0E44\u0E21\u0E48\u0E1E\u0E1A login token");
     return;

package/dist/runtime/components/modal/modal-password-new.vue.d.ts

@@ -2,6 +2,8 @@ interface Props {
     title?: string;
     confirmText?: string;
     loginToken?: string;
+    /** When provided, uses forgot-password reset endpoint instead of password/create */
+    resetToken?: string;
     disabledForceLogout?: boolean;
 }
 type __VLS_Props = Props;
@@ -14,13 +16,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
     complete: (data: {
         secId: string;
-    }) => any;
+    } | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((data: {
         secId: string;
-    }) => any) | undefined;
+    } | null) => any) | undefined;
 }>, {
     title: string;
     confirmText: string;