pukaad-ui-lib 1.240.0 → 1.242.0

package/dist/module.json

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

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 },
@@ -124,8 +127,8 @@ const defaultRules = (v) => {
   if (isNotNoSpace) return "\u0E2B\u0E49\u0E32\u0E21\u0E40\u0E27\u0E49\u0E19\u0E27\u0E23\u0E23\u0E04";
   return true;
 };
-const handleForgotPassword = () => {
-  console.log("forgot-password");
+const handleForgotPassword = (e) => {
+  emits("forgotPassword", e);
 };
 const inputTextFieldRef = ref();
 const setErrors = (errMsg) => {

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-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;

package/dist/runtime/components/modal/modal-user-account-search.d.vue.ts

@@ -1,3 +1,10 @@
+export interface ModalUserAccountSearchResult {
+    phone: string;
+    method: "sms" | "email";
+    maskedPhone: string;
+    maskedEmail: string | null;
+    hasEmail: boolean;
+}
 type __VLS_Props = {
     confirmedText?: string;
 };
@@ -6,11 +13,14 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    complete: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
+    "update:modelValue": (value: boolean) => any;
+} & {
+    close: () => any;
+    complete: (data: ModalUserAccountSearchResult) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
+    onComplete?: ((data: ModalUserAccountSearchResult) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-user-account-search.vue

@@ -1,44 +1,156 @@
 <template>
-  <Modal title="ค้นหาบัญชีของคุณ" v-model="modelValue">
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large text-2xl text-center px-[50px]">
+  <Modal
+    :title="step === 'search' ? '\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13' : '\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E34\u0E18\u0E35\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A'"
+    v-model="modelValue"
+    width="425px"
+    :loading="isLoading"
+  >
+    <!-- Step 1: phone + recaptcha -->
+    <div v-if="step === 'search'" class="flex flex-col gap-[24px]">
+      <p class="font-body-large">
         ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
-      </div>
+      </p>
       <InputPhone
         label="เบอร์โทรศัพท์"
         placeholder="กรอกเบอร์โทรศัพท์"
         v-model="phone"
-        full-width
       />
       <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
     </div>
+
+    <!-- Step 2: select OTP method -->
+    <div v-else-if="step === 'list'" class="flex flex-col">
+      <template v-for="(item, index) in accountItems" :key="index">
+        <div class="py-[12px] px-[16px]">
+          <InputRadio
+            :item="item.value"
+            label-position="left"
+            v-model="selectedMethod"
+          >
+            <template v-slot:[`label-${item.value}-text`]>
+              <div
+                class="flex flex-col w-full text-gray font-body-medium-prominent"
+              >
+                <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
+                <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
+                <div>{{ item.label }}</div>
+              </div>
+            </template>
+          </InputRadio>
+        </div>
+        <Divider v-if="index !== accountItems.length - 1" />
+      </template>
+    </div>
+
+    <!-- Footer slot (must be direct child of Modal) -->
     <template #footer>
       <Button
-        full-width
-        variant="primary"
-        :disabled="!phone || !recaptcha"
-        @click="onNext"
+        v-if="step === 'search'"
+        class="w-full"
+        color="primary"
+        :disabled="!phone || !recaptcha || isLoading"
+        @click="onSearchNext"
       >
-        {{ props.confirmedText }}
+        ถัดไป
       </Button>
+      <div v-else-if="step === 'list'" class="flex flex-col gap-[8px] w-full">
+        <Button
+          class="w-full"
+          color="primary"
+          :disabled="!selectedMethod"
+          @click="onListConfirm"
+        >
+          {{ props.confirmedText }}
+        </Button>
+        <Button variant="text" color="primary" class="w-full" @click="goBack"
+          >ไม่ใช่คุณใช่ไหม?</Button
+        >
+      </div>
     </template>
   </Modal>
 </template>
 
 <script setup>
-import { ref } from "vue";
-const emit = defineEmits(["complete"]);
+import { ref, computed, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+import Button from "../button.vue";
+const { $toast } = useNuxtApp();
+const api = useApi();
+const emit = defineEmits(["complete", "close"]);
 const props = defineProps({
   confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
 });
-const recaptchaRef = ref(null);
-const modelValue = defineModel({ type: Boolean, ...{
-  default: false
-} });
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+const step = ref("search");
+const isLoading = ref(false);
 const phone = ref("");
 const recaptcha = ref("");
-const onNext = () => {
-  emit("complete");
+const recaptchaRef = ref(null);
+const maskedPhone = ref("");
+const maskedEmail = ref(null);
+const hasEmail = ref(false);
+const selectedMethod = ref(null);
+const accountItems = computed(() => {
+  const items = [
+    { type: "phone", value: "sms", label: maskedPhone.value }
+  ];
+  if (hasEmail.value && maskedEmail.value) {
+    items.push({ type: "email", value: "email", label: maskedEmail.value });
+  }
+  return items;
+});
+const onSearchNext = async () => {
+  isLoading.value = true;
+  try {
+    const res = await api("/auth/forgot-password/find-account", {
+      method: "POST",
+      body: { phone: phone.value, token: recaptcha.value }
+    });
+    maskedPhone.value = res.data.masked_phone;
+    maskedEmail.value = res.data.masked_email;
+    hasEmail.value = res.data.has_email;
+    selectedMethod.value = null;
+    step.value = "list";
+  } catch (e) {
+    const msg = e?.data?.message?.description || e?.data?.message || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E19\u0E35\u0E49";
+    $toast?.error?.(msg);
+  } finally {
+    isLoading.value = false;
+  }
+};
+const onListConfirm = () => {
+  if (!selectedMethod.value) return;
+  emitComplete();
+};
+const emitComplete = () => {
+  emit("complete", {
+    phone: phone.value,
+    method: selectedMethod.value ?? "sms",
+    maskedPhone: maskedPhone.value,
+    maskedEmail: maskedEmail.value,
+    hasEmail: hasEmail.value
+  });
   modelValue.value = false;
 };
+const goBack = () => {
+  step.value = "search";
+  phone.value = "";
+  recaptcha.value = "";
+  selectedMethod.value = null;
+  maskedPhone.value = "";
+  maskedEmail.value = null;
+  hasEmail.value = false;
+};
+watch(modelValue, (v) => {
+  if (!v) {
+    step.value = "search";
+    phone.value = "";
+    recaptcha.value = "";
+    selectedMethod.value = null;
+    maskedPhone.value = "";
+    maskedEmail.value = null;
+    hasEmail.value = false;
+  }
+});
 </script>

package/dist/runtime/components/modal/modal-user-account-search.vue.d.ts

@@ -1,3 +1,10 @@
+export interface ModalUserAccountSearchResult {
+    phone: string;
+    method: "sms" | "email";
+    maskedPhone: string;
+    maskedEmail: string | null;
+    hasEmail: boolean;
+}
 type __VLS_Props = {
     confirmedText?: string;
 };
@@ -6,11 +13,14 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    complete: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
+    "update:modelValue": (value: boolean) => any;
+} & {
+    close: () => any;
+    complete: (data: ModalUserAccountSearchResult) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
+    onComplete?: ((data: ModalUserAccountSearchResult) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.240.0",
+  "version": "1.242.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",

package/dist/runtime/components/modal/modal-user-account-list.d.vue.ts

@@ -1,18 +0,0 @@
-import type { ModalUserAccountListProps, ModalUserAccountListItem } from "@/types/components/modal/modal-user-account-list";
-type __VLS_Props = ModalUserAccountListProps;
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-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: (value: ModalUserAccountListItem | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: ModalUserAccountListItem | null) => any) | undefined;
-}>, {
-    items: ModalUserAccountListItem[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/modal/modal-user-account-list.vue

@@ -1,51 +0,0 @@
-<template>
-  <Modal title="เลือกวิธีตรวจสอบ" v-model="modelValue">
-    <template v-for="(item, index) in props.items" :key="index">
-      <div class="py-[12px] px-[16px]">
-        <InputRadio :item="item.value" label-position="left" v-model="selected">
-          <template v-slot:[`label-${item.value}-text`]>
-            <div
-              class="flex flex-col w-full text-gray font-body-medium-prominent"
-            >
-              <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
-              <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
-              <div>{{ item.label }}</div>
-            </div>
-          </template>
-        </InputRadio>
-      </div>
-      <Divider v-if="index !== props.items.length - 1" />
-    </template>
-
-    <template #footer>
-      <Button
-        color="primary"
-        full-width
-        @click="onConfirm"
-        :disabled="!selected"
-      >
-        ยืนยัน
-      </Button>
-    </template>
-  </Modal>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const emit = defineEmits(["complete"]);
-const props = defineProps({
-  items: { type: Array, required: false, default: () => [] }
-});
-const selected = ref(null);
-const modelValue = defineModel({ type: Boolean, ...{
-  default: false
-} });
-const onConfirm = () => {
-  const selectedItem = props.items.find(
-    (item) => item.value === selected.value
-  );
-  emit("complete", selectedItem ?? null);
-  modelValue.value = false;
-  selected.value = null;
-};
-</script>

package/dist/runtime/components/modal/modal-user-account-list.vue.d.ts

@@ -1,18 +0,0 @@
-import type { ModalUserAccountListProps, ModalUserAccountListItem } from "@/types/components/modal/modal-user-account-list";
-type __VLS_Props = ModalUserAccountListProps;
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-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: (value: ModalUserAccountListItem | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: ModalUserAccountListItem | null) => any) | undefined;
-}>, {
-    items: ModalUserAccountListItem[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;