pukaad-ui-lib 1.254.0 → 1.256.0

package/dist/module.json

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

package/dist/runtime/components/input/input-profile-name.vue

@@ -1,14 +1,14 @@
 <template>
-  <InputTextField
-    ref="inputTextFieldRef"
-    v-bind="props"
-    :rules="props.rules || defaultRules"
-    v-model="modelValue"
-  >
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData || {}" />
-    </template>
-  </InputTextField>
+  <InputTextField
+    ref="inputTextFieldRef"
+    v-bind="props"
+    :rules="props.rules || defaultRules"
+    v-model="modelValue"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData || {}" />
+    </template>
+  </InputTextField>
 </template>
 
 <script setup>

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

@@ -45,6 +45,11 @@ const modalProps = computed(() => ({
   phoneOTP: {
     phone: phone.value,
     phoneLabel: maskedPhone.value,
+    requestPath: "/auth/forgot-password/send-otp",
+    requestBody: { phone: phone.value, method: "sms" },
+    verifyPath: "/auth/forgot-password/verify-otp",
+    verifyBody: { phone: phone.value },
+    initialExpiredTime: expiredTime.value,
     confirmedText: "\u0E16\u0E31\u0E14\u0E44\u0E1B"
   },
   emailOTP: {
@@ -74,7 +79,13 @@ const handleComplete = async (key, data) => {
     return;
   }
   if (key === "phoneOTP") {
-    await callVerifyOTP(data);
+    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 === "emailOTP") {
@@ -114,22 +125,6 @@ const callSendOTP = async () => {
     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 = "";

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

@@ -8,11 +8,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
 } & {
     close: () => any;
-    complete: (value: string) => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     phone: string;
     confirmedText: string;

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

@@ -13,6 +13,7 @@
         <InputOTP name="otp" columnGap="auto" v-model="valueOTP" :error="otpError" />
       </div>
 
+
       <div class="text-center font-body-large">
         <template v-if="countdown !== '00:00'">
           กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
@@ -26,7 +27,7 @@
     </div>
 
     <template #footer="{ meta }">
-      <Button type="submit" color="primary" :disabled="!meta.valid" class="w-full">
+      <Button type="submit" color="primary" :disabled="!meta.valid || isLoading" class="w-full">
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -35,12 +36,19 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
 import { useCountDown } from "../../composables/useCountDown";
 const emit = defineEmits(["complete", "close"]);
 const props = defineProps({
   phoneLabel: { type: String, required: false, default: "" },
   phone: { type: String, required: false, default: "" },
   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 },
   name: { type: String, required: false },
   type: { type: String, required: false },
   gap: { type: Number, required: false },
@@ -49,33 +57,77 @@ const props = defineProps({
   placeholder: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const { $toast } = useNuxtApp();
+const api = useApi();
 const textRef = ref("");
 const valueOTP = ref("");
 const otpError = ref("");
+const isLoading = ref(false);
 const { CountdownTime } = useCountDown();
 const expireAt = ref("");
 const countdown = CountdownTime(expireAt);
-const resetCountdown = () => {
-  expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+const handleSendOTP = async () => {
+  try {
+    isLoading.value = true;
+    const path = props.requestPath ?? "/me/phone-otp-request";
+    const body = props.requestBody ?? { phone: props.phone };
+    if (!props.requestBody && !props.phone) {
+      throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 phone");
+    }
+    const response = await api(path, {
+      method: "POST",
+      body
+    });
+    if (response?.data?.expired_time) {
+      expireAt.value = response.data.expired_time;
+    } else {
+      expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+    }
+    if (response?.data?.ref) {
+      textRef.value = response.data.ref;
+    }
+  } catch (err) {
+    const msg = err?.data?.message?.description || err?.data?.message || "\u0E1E\u0E1A\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 onResend = () => {
   valueOTP.value = "";
   otpError.value = "";
-  resetCountdown();
+  handleSendOTP();
 };
-const onVerifyOTP = () => {
-  if (valueOTP.value === "123456") {
+const onVerifyOTP = async () => {
+  try {
+    isLoading.value = true;
+    const path = props.verifyPath ?? "/me/phone-otp-verify";
+    const body = props.verifyBody ? { ...props.verifyBody, code: valueOTP.value } : { code: valueOTP.value, phone: props.phone };
+    const response = await api(path, {
+      method: "POST",
+      body
+    });
     otpError.value = "";
-    emit("complete", valueOTP.value);
+    emit("complete", response?.data || valueOTP.value);
     isOpen.value = false;
-  } else {
+  } catch (err) {
     otpError.value = "\u0E23\u0E2B\u0E31\u0E2A\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+  } finally {
+    isLoading.value = false;
   }
 };
 watch(isOpen, (value) => {
   textRef.value = "";
   valueOTP.value = "";
   otpError.value = "";
-  if (value) resetCountdown();
+  if (value) {
+    if (props.initialExpiredTime) {
+      expireAt.value = props.initialExpiredTime;
+    } else {
+      handleSendOTP();
+    }
+  } else {
+    expireAt.value = "";
+  }
 });
 </script>

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

@@ -8,11 +8,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
 } & {
     close: () => any;
-    complete: (value: string) => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     phone: string;
     confirmedText: string;

package/dist/runtime/components/modal/modal-secure.d.vue.ts

@@ -12,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((state: ModalSecureState) => any) | undefined;
 }>, {
+    phone: string;
     email: string;
     twoFaEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-secure.vue

@@ -1,7 +1,7 @@
 <template>
-  <component v-for="modal in modals" :key="modal.key" :is="modal.component" :email="props.email" mode="secure"
-    @complete="(data) => handleComplete(modal.key, data)" :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
-    @close="isOpen = false" v-model="modalStates[modal.key]" />
+  <component v-for="modal in modals" :key="modal.key" :is="modal.component" :email="props.email" :phone="props.phone"
+    mode="secure" @complete="(data) => handleComplete(modal.key, data)"
+    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'" @close="isOpen = false" v-model="modalStates[modal.key]" />
 </template>
 
 <script setup>
@@ -20,6 +20,7 @@ const emit = defineEmits(["complete"]);
 const props = defineProps({
   state: { type: String, required: true },
   email: { type: String, required: false, default: "" },
+  phone: { type: String, required: false, default: "" },
   twoFaEnabled: { type: Boolean, required: true, default: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{

package/dist/runtime/components/modal/modal-secure.vue.d.ts

@@ -12,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((state: ModalSecureState) => any) | undefined;
 }>, {
+    phone: string;
     email: string;
     twoFaEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal.vue

@@ -1,14 +1,8 @@
 <template>
   <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent
-      :class="props.class"
-      :disabled-close-btn="props.disabledCloseBtn"
-      :no-padding="props.disablePadding"
-      :disable-outside-pointer-events="false"
-      v-slot="{ meta }"
-      @submit="onSubmit"
-      @close="onClose"
-    >
+    <ShadDialogContent :class="props.class" :disabled-close-btn="props.disabledCloseBtn"
+      :no-padding="props.disablePadding" :disable-outside-pointer-events="false" v-slot="{ meta }" @submit="onSubmit"
+      @close="onClose">
       <Loading :loading="props.loading" :text="props.loadingText" />
       <ShadDialogHeader :class="props.disablePadding ? 'bg-background' : ''">
         <slot name="header">
@@ -24,12 +18,9 @@
           </ShadDialogDescription>
         </slot>
       </ShadDialogHeader>
-      <div
-        :class="props.contentMaxHeight ? '-mx-6 px-6' : void 0"
-        :style="
+      <div :class="props.contentMaxHeight ? '-mx-6 px-6' : void 0" :style="
   props.contentMaxHeight ? { maxHeight: `${props.contentMaxHeight}px`, overflowY: 'auto' } : void 0
-"
-      >
+">
         <slot name="default" :meta="meta" />
       </div>
       <ShadDialogFooter v-if="$slots.footer">

package/package.json

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