UI เปลี่ยนรหัสผ่าน

src/components/DialogHeader.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>

src/views/MainView.vue

@@ -12,6 +12,8 @@ import { useCounterMixin } from '@/stores/mixin'
 import type { notiType } from '@/interface/index/Main'
 import type { Noti } from '@/interface/response/Main'
 
+import DialogHeader from '@/components/DialogHeader.vue'
+
 const mixin = useCounterMixin()
 const { date2Thai, hideLoader, messageError, dialogRemove, success } = mixin
 const router = useRouter()
@@ -22,6 +24,7 @@ const configParam = {
   landingPageUrl: import.meta.env.VITE_URL_LANDING,
 }
 
+const modalReset = ref<boolean>(false) //ตัวแปร popup reset password
 const fullName = ref<string>('') //ชื่อผู้ใช้งาน
 const notiTrigger = ref<boolean>(false) // เปิด,ปิดรายการ
 const notiList = ref<notiType[]>([]) // รายการแจ้งเตือน
@@ -34,6 +37,15 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
   minute: '2-digit',
 }
 
+const oldPassWord = ref<string>('')
+
+const newPassword = ref<string>('')
+
+const reNewPassWord = ref<string>('')
+
+const isPwdOld = ref<boolean>(true)
+const isPwdNewOld = ref<boolean>(true)
+const isPwdReNewOld = ref<boolean>(true)
 /**
  *  ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน
  */
@@ -184,6 +196,66 @@ watch(
   }
 )
 
+function onreset() {
+  modalReset.value = true
+}
+
+function closeDialog() {
+  modalReset.value = false
+  oldPassWord.value = ''
+}
+
+function onSubmit() {}
+
+function ruleNewPassWord(val: string) {
+  return new Promise((resolve) => {
+    if (!val) {
+      return resolve('กรุณากรอกรหัสผ่านใหม่')
+    }
+    if (val === oldPassWord.value) {
+      return resolve('รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านเดิม')
+    }
+    if (val.length < 8) {
+      return resolve('รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร')
+    }
+    if (!/[A-Z]/.test(val)) {
+      return resolve('ต้องมีตัวอักษรพิมพ์ใหญ่ (A-Z)')
+    }
+    if (!/[0-9]/.test(val)) {
+      return resolve('ต้องมีตัวเลข (0-9)')
+    }
+    // if (!/[@$!%*?&]/.test(val)) {
+    //   return resolve('ต้องมีอักขระพิเศษ (@$!%*?&)')
+    // }
+
+    resolve(true)
+  })
+}
+
+function ruleReNewPassWord(val: string) {
+  return new Promise((resolve) => {
+    if (!val) {
+      return resolve('กรุณายืนยันรหัสผ่านใหม่')
+    }
+    if (val.length < 8) {
+      return resolve('รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร')
+    }
+    if (!/[A-Z]/.test(val)) {
+      return resolve('ต้องมีตัวอักษรพิมพ์ใหญ่ (A-Z)')
+    }
+    if (!/[0-9]/.test(val)) {
+      return resolve('ต้องมีตัวเลข (0-9)')
+    }
+    // else if (!/[@$!%*?&]/.test(val)) {
+    //   return resolve('ต้องมีอักขระพิเศษ (@$!%*?&)');
+    // }
+    if (val !== newPassword.value) {
+      return resolve('รหัสผ่านใหม่ไม่ตรงกัน')
+    }
+    resolve(true)
+  })
+}
+
 onMounted(async () => {
   fetchTotolNotificate()
   fetchKeycloakPosition()
@@ -376,7 +448,7 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section class="q-py-sm"> Landing Page </q-item-section>
               </q-item> -->
-              <q-item clickable>
+              <q-item clickable @click="onreset()">
                 <q-item-section avatar>
                   <q-avatar
                     color="blue"
@@ -424,6 +496,85 @@ onMounted(async () => {
       </q-page>
     </q-page-container>
   </q-layout>
+
+  <q-dialog v-model="modalReset" persistent>
+    <q-card class="col-12" style="width: 300px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="เปลี่ยนรหัสผ่าน" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="oldPassWord"
+                outlined
+                dense
+                :type="isPwdOld ? 'password' : 'text'"
+                :rules="[(val:string) => !!val || `กรุณากรอกรหัสผ่านเดิม`]"
+                label="รหัสผ่านเดิม"
+                hide-bottom-space
+              >
+                <template v-slot:append>
+                  <q-icon
+                    :name="isPwdOld ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer"
+                    @click="isPwdOld = !isPwdOld"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="newPassword"
+                outlined
+                dense
+                :type="isPwdNewOld ? 'password' : 'text'"
+                :rules="[ruleNewPassWord]"
+                label="รหัสผ่านใหม่"
+                hide-bottom-space
+              >
+                <template v-slot:append>
+                  <q-icon
+                    :name="isPwdNewOld ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer"
+                    @click="isPwdNewOld = !isPwdNewOld"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="reNewPassWord"
+                outlined
+                dense
+                :type="isPwdReNewOld ? 'password' : 'text'"
+                :rules="[ruleReNewPassWord]"
+                label="ยืนยัน รหัสผ่านใหม่"
+                hide-bottom-space
+                bottom-slots
+              >
+                <template v-slot:append>
+                  <q-icon
+                    :name="isPwdReNewOld ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer"
+                    @click="isPwdReNewOld = !isPwdReNewOld"
+                  />
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>