Merge pull request #230 from Frappet/feat/resetPass

feat:resetpass

src/api/org/api.org.ts

@@ -169,10 +169,11 @@ export default {
    * workflow
    */
   workflow: `${workflow}/`,
-  commanderPosexe: (type:string)=>`${workflow}/commander-posexe/${type}`,
+  commanderPosexe: (type: string) => `${workflow}/commander-posexe/${type}`,
   commanderOperate: `${workflow}/commander/operate`,
 
   keycloakLogSSO: `${org}/keycloak/log/sso`,
+  changePassword: `${org}/keycloak/user/change-password`,
 
-  orgAssistance:(id:string)=>`${profileOrg}/assistance/${id}`
+  orgAssistance: (id: string) => `${profileOrg}/assistance/${id}`,
 };

src/components/DialogResetPass.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success } = useCounterMixin();
+
+const modal = defineModel<boolean>("modelValue", {
+  default: false,
+});
+
+const newPassword = ref<string>("");
+const oldPassword = ref<string>("");
+const reNewPassword = ref<string>("");
+const isPwdNewOld = ref<boolean>(true);
+const isPwdReNewOld = ref<boolean>(true);
+
+function closeDialog() {
+  modal.value = false;
+  newPassword.value = "";
+  oldPassword.value = "";
+  reNewPassword.value = "";
+  isPwdNewOld.value = true;
+  isPwdReNewOld.value = true;
+}
+
+async function onSubmit() {
+  try {
+    showLoader();
+    await http.post(config.API.changePassword, {
+      password: newPassword.value,
+    });
+    success($q, `เปลี่ยนรหัสใหม่สำเร็จ`);
+    closeDialog();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+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)");
+    }
+
+    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)");
+    }
+
+    if (val !== newPassword.value) {
+      return resolve("รหัสผ่านใหม่ไม่ตรงกัน");
+    }
+    resolve(true);
+  });
+}
+</script>
+<template>
+  <q-dialog v-model="modal" 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="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 scoped></style>

src/views/MainLayout.vue

@@ -18,6 +18,8 @@ import {
 import { useDataStore } from "@/stores/data";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import DialogResetPass from "@/components/DialogResetPass.vue";
+
 // landing page config url
 const configParam = {
   landingPageUrl: import.meta.env.VITE_URL_LANDING,
@@ -47,6 +49,7 @@ const notiTrigger = ref(false);
 const currentRouteName = router.currentRoute.value.name;
 const tab = ref<any>(currentRouteName);
 const isSsoToken = ref(false);
+const modalResetPass = ref(false); // ตัวแปรควบคุมการเปิดปิด Dialog เปลี่ยนรหัสผ่าน
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -248,6 +251,10 @@ function onViewDetailNoti(url: string) {
   window.open(url, "_blank");
 }
 
+function onResetPass() {
+  modalResetPass.value = true;
+}
+
 /** ดูการเปลี่ยน route name เพื่อเปลี่ยน tab */
 watch(
   () => route.name,
@@ -543,14 +550,14 @@ watch(
               >
             </q-item>
 
-            <!-- <q-item clickable v-close-popup>
+            <q-item clickable v-close-popup @click.prevent="onResetPass">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
               </q-item-section>
               <q-item-section
                 ><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
               >
-            </q-item> -->
+            </q-item>
 
             <q-item clickable v-close-popup @click="doLogout">
               <q-item-section avatar style="min-width: 30px">
@@ -598,7 +605,7 @@ watch(
                   >
                 </q-item>
 
-                <!-- <q-item clickable v-close-popup>
+                <q-item clickable v-close-popup @click.prevent="onResetPass">
                   <q-item-section avatar style="min-width: 30px">
                     <q-icon
                       color="orange-9"
@@ -611,7 +618,7 @@ watch(
                       >เปลี่ยนรหัสผ่าน</q-item-label
                     ></q-item-section
                   >
-                </q-item> -->
+                </q-item>
 
                 <q-item clickable v-close-popup @click="doLogout">
                   <q-item-section avatar style="min-width: 30px">
@@ -735,6 +742,8 @@ watch(
       </q-page>
     </q-page-container>
   </q-layout>
+
+  <DialogResetPass v-model="modalResetPass" />
 </template>
 
 <style>