Close profile modal when logging out

src/plugins/profile/modals/profile.js

@@ -4,12 +4,12 @@ import { _converse, api, log } from '@converse/headless';
 import { __ } from 'i18n';
 import BaseModal from 'plugins/modal/modal.js';
 import { compressImage } from 'utils/file.js';
-import { modal_close_button } from 'plugins/modal/templates/buttons.js';
 import '../password-reset.js';
+import { modal_close_button } from 'plugins/modal/templates/buttons.js';
+import tplLogoutButton from '../templates/logout_button.js';
 import tplProfileModal from '../templates/profile_modal.js';
 
 import './styles/profile.scss';
-import logout_button from '../templates/logout_button.js';
 
 export default class ProfileModal extends BaseModal {
     /**
@@ -79,7 +79,7 @@ export default class ProfileModal extends BaseModal {
      */
     renderModalFooter() {
         return html`<div class="modal-footer d-flex justify-content-between">
-            ${modal_close_button} ${logout_button()}
+            ${modal_close_button} ${tplLogoutButton(this)}
         </div>`;
     }
 
@@ -180,6 +180,18 @@ export default class ProfileModal extends BaseModal {
         const roster_filter = /** @type {HTMLInputElement} */ (this.querySelector('input[name="status_message"]'));
         roster_filter.value = '';
     }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    async logOut(ev) {
+        ev?.preventDefault();
+        this.close();
+        const result = await api.confirm(__('Confirm'), __('Are you sure you want to log out?'));
+        if (result) {
+            api.user.logout();
+        }
+    }
 }
 
 api.elements.define('converse-profile-modal', ProfileModal);

src/plugins/profile/templates/logout_button.js

@@ -1,11 +1,13 @@
 import { html } from 'lit';
 import { api } from '@converse/headless';
 import { __ } from 'i18n';
-import { logOut } from '../utils.js';
 
-export default () => {
+/**
+ * @param {import('../modals/profile').default} el
+ */
+export default (el) => {
     const i18n_logout = __('Log out');
-    return html`<button type="button" @click="${(ev) => logOut(ev)}" class="btn btn-danger">
+    return html`<button type="button" @click="${(ev) => el.logOut(ev)}" class="btn btn-danger">
         ${api.settings.get('allow_logout')
             ? html`<converse-icon class="fas fa-sign-out-alt" color="var(--background-color)" size="1em"></converse-icon
                   >&nbsp;${i18n_logout} `

src/plugins/profile/utils.js

@@ -38,13 +38,3 @@ export function shouldShowPasswordResetForm() {
     return true;
 }
 
-/**
- * @param {MouseEvent} ev
- */
-export async function logOut(ev) {
-    ev?.preventDefault();
-    const result = await api.confirm(__('Confirm'), __('Are you sure you want to log out?'));
-    if (result) {
-        api.user.logout();
-    }
-}

src/types/plugins/profile/modals/profile.d.ts

@@ -58,6 +58,10 @@ export default class ProfileModal extends BaseModal {
      * @param {MouseEvent} ev
      */
     clearStatusMessage(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    logOut(ev: MouseEvent): Promise<void>;
 }
 import BaseModal from 'plugins/modal/modal.js';
 import { Model } from '@converse/skeletor';

src/types/plugins/profile/templates/logout_button.d.ts

@@ -1,3 +1,3 @@
-declare function _default(): import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../modals/profile").default): import("lit-html").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=logout_button.d.ts.map

src/types/plugins/profile/utils.d.ts

@@ -7,8 +7,4 @@ export function getPrettyStatus(stat: string): any;
  * form.
  */
 export function shouldShowPasswordResetForm(): boolean;
-/**
- * @param {MouseEvent} ev
- */
-export function logOut(ev: MouseEvent): Promise<void>;
 //# sourceMappingURL=utils.d.ts.map