From 8d2244d93aa487715ee39b9bdb937d7a0075d2c0 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 20 Feb 2025 10:41:36 +0700
Subject: [PATCH] UI reset password

---
 src/router/index.ts         |  10 ++
 src/views/ResetPassword.vue | 282 ++++++++++++++++++++++++++++++++++++
 src/views/login.vue         |   8 +-
 3 files changed, 296 insertions(+), 4 deletions(-)
 create mode 100644 src/views/ResetPassword.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 262ae6e..de8d3f1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import MapView from '@/views/MapView.vue'
 import MainView from '@/views/MainView.vue'
+
 const loginView = () => import('@/views/login.vue')
+const resetPasswordView = () => import('@/views/ResetPassword.vue')
 
 import { authenticated, logout } from '@/plugins/auth'
 
@@ -77,6 +79,14 @@ const router = createRouter({
       name: 'auth',
       component: () => import('@/views/auth.vue'),
     },
+    {
+      path: '/reset-password',
+      name: 'reset-password',
+      component: resetPasswordView,
+      meta: {
+        Auth: false,
+      },
+    },
   ],
 })
 
diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
new file mode 100644
index 0000000..52eeb64
--- /dev/null
+++ b/src/views/ResetPassword.vue
@@ -0,0 +1,282 @@
+<!-- authen with keycloak client -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+import { setAuthen, authenticated, setAuthenCheckin } from '@/plugins/auth'
+import CustomComponent from '@/components/CustomDialog.vue'
+import env from '@/api/index'
+
+const router = useRouter()
+const mixin = useCounterMixin()
+const $q = useQuasar() //ใช้ noti quasar
+
+const { showLoader, hideLoader } = mixin
+
+const username = ref<string>('')
+const password = ref<string>('')
+async function onSubmit() {
+  showLoader()
+  const formdata = new URLSearchParams()
+  formdata.append('username', username.value)
+  formdata.append('password', password.value)
+
+  await axios
+    .post(`${env.API_URI}/org/login/checkin`, formdata, {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    })
+    .then(async (res) => {
+      setAuthenCheckin(res.data.result)
+    })
+    .catch((err) => {
+      $q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `ข้อความแจ้งเตือน`,
+          message: `${err.response.data.message}`,
+          icon: 'warning',
+          color: 'red',
+          onlycancel: true,
+        },
+      })
+    })
+    .finally(() => {
+      hideLoader()
+    })
+}
+
+onMounted(async () => {})
+</script>
+
+<template>
+  <div class="bg-image">
+    <div class="login-pf-page">
+      <div id="kc-logo">
+        <div id="myimage"></div>
+        <div class="text-logo">
+          ระบบ<span style="color: #02a998">บริหารทรัพยากรบุคคล</span>
+        </div>
+        <div class="subtext-logo">ของกรุงเทพมหานคร</div>
+      </div>
+
+      <div class="card-pf">
+        <div class="login-pf-header">
+          <h1 id="kc-page-title">ลืมรหัสผ่านของคุณ?</h1>
+        </div>
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          style="max-width: 100%; min-width: 30%"
+        >
+          <div class="row">
+            <div class="col-12 q-mb-sm text-left">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >ชื่อผู้ใช้งาน</label
+              >
+              <q-input
+                v-model="username"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 q-mb-sm">
+              <q-btn
+                style="font-size: 16px; border-radius: 5px"
+                color="primary"
+                class="full-width"
+                label="ส่ง"
+                type="submit"
+              ></q-btn>
+            </div>
+            <div class="col-12 q-mb-xs">
+              <q-btn
+                unelevated
+                outline
+                color="teal-5"
+                class="full-width"
+                style="font-size: 16px; border-radius: 8px"
+                @click="router.push(`/login`)"
+                ><q-icon left name="mdi-chevron-left" />
+                <div class="text-center">กลับไปที่การเข้าสู่ระบบ</div>
+              </q-btn>
+            </div>
+            <div class="text-left text-weight-medium">
+              ระบุชื่อผู้ใช้งานหรือที่อยู่อีเมลของคุณ
+              เราจะส่งคำแนะนำในการสร้างรหัสผ่านใหม่ให้คุณ
+            </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.link {
+  text-decoration: none;
+  color: #cc0004;
+}
+
+.link:hover {
+  color: #ff0004;
+  text-decoration: underline;
+}
+.checkbox,
+.radio {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  margin: 1px 3px 0 0;
+  line-height: normal;
+}
+.checkbox label,
+.radio label {
+  min-height: 20px;
+  margin-bottom: 0;
+  font-weight: 400;
+  cursor: pointer;
+}
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+#kc-content {
+  width: 100%;
+}
+#kc-content-wrapper {
+  margin-top: 20px;
+}
+#kc-form-options .checkbox {
+  margin-top: 0;
+  color: #72767b;
+}
+#kc-logo {
+  max-width: 25vw;
+  position: absolute;
+  margin-left: 5%;
+  /* margin-top: 5%; */
+  z-index: 1 !important;
+}
+.bg-image {
+  font-family: 'Noto Sans Thai', sans-serif;
+  font-family: 'Noto Sans Thai', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  font-size: 12px;
+  line-height: 1.66666667;
+  color: #363636;
+}
+
+.login-pf-page {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-top: 0px;
+}
+
+#myimage {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% !important;
+  background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
+  margin-bottom: 7%;
+}
+.text-logo {
+  color: white;
+  font-weight: 800;
+  font-size: 1.6rem;
+}
+
+.subtext-logo {
+  color: white;
+  font-weight: 200;
+  font-size: 1.4rem;
+}
+
+.card-pf {
+  margin: 0 auto;
+  box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
+  padding: 20px;
+  max-width: 400px;
+  min-width: 30%;
+  /* border-top: 4px solid; */
+  position: relative;
+  z-index: 10 !important;
+  border-radius: 10px;
+  /* border-color: var(--pf-global--primary-color--100); */
+  background: #fff;
+  border-top: 2px solid transparent;
+}
+
+.login-pf-page .login-pf-header {
+  margin-bottom: 20px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.login-pf-page .login-pf-header h1 {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: start;
+}
+
+h1#kc-page-title {
+  margin-top: 10px;
+  font-weight: 800;
+  font-size: 1.3rem;
+  line-height: 1.1;
+}
+
+.login-pf-page .login-pf-header h1 {
+  font-size: 16px;
+}
+.login-pf-page .login-pf-header h1 {
+  text-align: center;
+}
+@media (max-width: 767px) {
+  #kc-logo {
+    display: none;
+  }
+  .login-pf-page .login-pf-header {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 768px) {
+  .login-pf-page .login-pf-header {
+    margin-bottom: 10px;
+  }
+  .login-pf-page .login-pf-header h1 {
+    font-size: 24px;
+  }
+  .login-pf-page .card-pf {
+    padding: 20px 40px 30px 40px;
+  }
+}
+</style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 633ff15..df02614 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -113,7 +113,7 @@ onMounted(async () => {
             <div class="col-12 form-group">
               <div class="row justify-between">
                 <div id="kc-form-options">
-                  <div class="row items-center">
+                  <!-- <div class="row items-center">
                     <input
                       tabindex="3"
                       id="rememberMe"
@@ -121,13 +121,13 @@ onMounted(async () => {
                       type="checkbox"
                     />
                     <label class=""> ล็อคอินค้างไว้ </label>
-                  </div>
+                  </div> -->
                 </div>
                 <div>
-                  <span
+                  <span class="cursor-pointer"
                     ><a
                       tabindex="5"
-                      href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&amp;tab_id=gg77yQ7AeAI"
+                      @click="router.push(`/reset-password`)"
                       class="link"
                       >ลืมรหัสผ่าน</a
                     ></span