UI resetpassword

src/api/api.checkin.ts

@@ -13,5 +13,6 @@ export default {
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
 
-  resetPassword:`${orgKeycloak}/user/change-password`
+  changePassword:`${orgKeycloak}/user/change-password`,
+  resetPassword:`${orgKeycloak}/user/reset-password`
 }

src/views/MainView.vue

@@ -220,7 +220,7 @@ function closeDialog() {
 async function onSubmit() {
   showLoader()
   await http
-    .post(config.API.resetPassword, {
+    .post(config.API.changePassword, {
       password: newPassword.value,
     })
     .then(async (res) => {

src/views/ResetPassword.vue

@@ -2,6 +2,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import axios from 'axios'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
@@ -12,37 +15,27 @@ import env from '@/api/index'
 const router = useRouter()
 const mixin = useCounterMixin()
 const $q = useQuasar() //ใช้ noti quasar
-
-const { showLoader, hideLoader } = mixin
+const isReset = ref<boolean>(false)
+const isFalse = ref<boolean>(false)
+const { showLoader, hideLoader, messageError } = 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',
-      },
+  http
+    .post(config.API.resetPassword, {
+      username: username.value,
     })
-    .then(async (res) => {
-      setAuthenCheckin(res.data.result)
+    .then((res) => {
+      if (res.data.result) {
+        isReset.value = true
+        isFalse.value = false
+      } else {
+        isFalse.value = true
+      }
     })
-    .catch((err) => {
-      $q.dialog({
-        component: CustomComponent,
-        componentProps: {
-          title: `ข้อความแจ้งเตือน`,
-          message: `${err.response.data.message}`,
-          icon: 'warning',
-          color: 'red',
-          onlycancel: true,
-        },
-      })
+    .catch((e) => {
+      messageError($q, e)
     })
     .finally(() => {
       hideLoader()
@@ -73,7 +66,15 @@ onMounted(async () => {})
           @validation-success="onSubmit"
           style="max-width: 100%; min-width: 30%"
         >
-          <div class="row">
+          <q-banner
+            v-if="isFalse"
+            class="bg-amber-1 text-warning q-mb-sm"
+            style="border-top: 2px solid #f2c037; border-radius: 0 0 4px 4px"
+          >
+            <q-icon name="mdi-alert" size="sm" class="q-mr-xs"></q-icon
+            >ไม่พบชื่อผู้ใช้งานในระบบ
+          </q-banner>
+          <div class="row" v-if="!isReset">
             <div class="col-12 q-mb-sm text-left">
               <label
                 for="username"
@@ -98,24 +99,37 @@ onMounted(async () => {})
                 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-banner class="bg-green-1 text-green q-mb-sm" rounded v-else>
+            <q-icon name="mdi-check-circle" size="sm"></q-icon>คุณจะได้รับ
+            e-mail เพื่อเปลี่ยนรหัสผ่านใหม่
+          </q-banner>
+          <div class="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>
         </q-form>
+        <div
+          class="text-weight-medium bg-grey-3 text-center q-py-sm"
+          style="
+            border-radius: 0 0 10px 10px;
+            margin: 20px -40px -30px;
+            padding: 15px 35px;
+            font-size: 13px;
+          "
+        >
+          ป้อนชื่อผู้ใช้หรือที่อยู่อีเมลของคุณ
+          แล้วเราจะส่งคำแนะนำเกี่ยวกับวิธีสร้างรหัสผ่านใหม่ให้คุณ
+        </div>
       </div>
     </div>
   </div>