keycloak.logout

src/modules/10_registry/views/main.vue

@@ -128,21 +128,6 @@ function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
- * logout keycloak
- * confirm ก่อนออกจากระบบ
- */
-const doLogout = () => {
-  dialogConfirm(
-    $q,
-    () => {
-      keycloak.logout();
-    },
-    "ยืนยันการออกจากระบบ",
-    "ต้องการออกจากระบบใช่หรือไม่"
-  );
-};
-
 /**
  * ฟังชั่นกลับหน้าหลัก
  */
@@ -354,16 +339,6 @@ onMounted(async () => {
               >
                 <q-tooltip>ดาวน์โหลด ก.พ.7/ก.ก. 1</q-tooltip>
               </q-btn>
-              <q-btn
-                color="red-1"
-                text-color="red-12"
-                unelevated
-                dense
-                round
-                size="14px"
-                icon="mdi-logout"
-                @click="doLogout"
-              ></q-btn>
             </div>
           </q-card-section>
 

src/views/MainLayout.vue

@@ -92,8 +92,8 @@ const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      // keycloak.logout();
       // authen with keycloak client
+      keycloak.logout();
       await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
       await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");
       window.location.href = "/login";
@@ -401,20 +401,6 @@ function onInfo() {
             </q-item>
           </template>
           <q-list>
-            <!-- <q-item clickable v-close-popup @click="onInfo">
-              <q-item-section avatar style="min-width: 30px">
-                <q-icon
-                  color="blue-9"
-                  size="18px"
-                  name="mdi-clipboard-account-outline"
-                />
-              </q-item-section>
-              <q-item-section
-                ><q-item-label
-                  >ข้อมูลทะเบียนประวัติ</q-item-label
-                ></q-item-section
-              >
-            </q-item> -->
             <q-item clickable v-close-popup @click="onInfo">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon
@@ -458,8 +444,40 @@ function onInfo() {
                 style="height: 30px; max-width: 30px"
               />
             </q-avatar>
-            <!-- <q-menu>
+            <q-menu>
-              <q-list dense style="min-width: 200px">
+              <q-list>
+                <q-item clickable v-close-popup @click="onInfo">
+                  <q-item-section avatar style="min-width: 30px">
+                    <q-icon
+                      color="red-9"
+                      size="18px"
+                      name="mdi-account-remove-outline"
+                    />
+                  </q-item-section>
+                  <q-item-section
+                    ><q-item-label>ขอลาออก</q-item-label></q-item-section
+                  >
+                </q-item>
+    
+                <q-item clickable v-close-popup>
+                  <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 clickable v-close-popup @click="doLogout">
+                  <q-item-section avatar style="min-width: 30px">
+                    <q-icon color="primary" size="18px" name="mdi-logout-variant" />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>ออกจากระบบ</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <!-- <q-list dense style="min-width: 200px">
                 <q-item clickable v-close-popup>
                   <q-item-section>
                     <div class="row items-center">
@@ -509,8 +527,8 @@ function onInfo() {
                     </div>
                   </q-item-section>
                 </q-item>
-              </q-list>
+              </q-list> -->
-            </q-menu> -->
+            </q-menu>
           </q-btn>
         </div>
       </q-toolbar>