@nopwdio/sdk-js
Version:
Nopwd JS SDK
149 lines • 6.3 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { core } from "../internal/styles/core.styles.js";
import { component } from "../internal/styles/semantic.styles.js";
import styles from "./np-logout.styles.js";
import { busy, exclamationCircle, checkCircle } from "../internal/styles/icons.styles.js";
import { revoke } from "../core/session.js";
import { wait } from "../internal/util/wait.js";
// Define the possible states for the component
export var State;
(function (State) {
State["LOGGINGOUT"] = "loggingout";
State["LOGGEDOUT"] = "loggedout";
State["ERROR"] = "error";
})(State || (State = {}));
/**
* @summary `np-logout` is a custom element that handles logging out the authenticated user.
*
* @description
* This component manages the logout process, providing visual feedback during the process.
* It emits events to notify the parent application when the logout is successful or if an error occurs.
*
* @slot - The default slot for the button label.
* @slot loggingout - Content displayed while the user session is being revoked.
* @slot loggedout - Content displayed after the session has been successfully revoked.
* @slot error - Content displayed when an error occurs during logout.
*
* @event np:logout - Emitted when the session has been successfully revoked.
* @event np:error - Emitted when an error occurs during the logout process.
*
* @csspart button - The component's button element.
*/
let NpLogout = class NpLogout extends LitElement {
constructor() {
super(...arguments);
/** The component's current state. */
this.state = undefined;
/** Duration to reset the state after success or error (in milliseconds). */
this.resetDuration = 2000;
}
// Lifecycle method called when the component is added to the DOM
connectedCallback() {
const _super = Object.create(null, {
connectedCallback: { get: () => super.connectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.connectedCallback.call(this);
});
}
// Lifecycle method called when the component is removed from the DOM
disconnectedCallback() {
const _super = Object.create(null, {
disconnectedCallback: { get: () => super.disconnectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.disconnectedCallback.call(this);
});
}
// Method to handle the logout process
logout() {
return __awaiter(this, void 0, void 0, function* () {
if (this.state) {
return;
}
try {
this.state = State.LOGGINGOUT;
yield revoke();
this.state = State.LOGGEDOUT;
yield this.signalSuccess();
}
catch (e) {
return this.signalError(e);
}
});
}
// Method to handle the click event
onClick() {
return __awaiter(this, void 0, void 0, function* () {
yield this.logout();
});
}
// Method to signal a successful logout
signalSuccess() {
return __awaiter(this, void 0, void 0, function* () {
this.state = State.LOGGEDOUT;
this.dispatchEvent(new CustomEvent("np:logout", {
composed: true,
cancelable: true,
bubbles: true,
}));
yield wait(this.resetDuration);
this.state = undefined;
});
}
// Method to signal an error during logout
signalError(e) {
return __awaiter(this, void 0, void 0, function* () {
this.state = State.ERROR;
this.dispatchEvent(new CustomEvent("np:error", {
composed: true,
cancelable: true,
bubbles: true,
detail: e,
}));
yield wait(this.resetDuration);
this.state = undefined;
});
}
// Render the UI based on the component's state
render() {
return html `<button @click=${this.onClick} part="button">
${!this.state
? html `<slot>Logout</slot>`
: this.state === State.LOGGINGOUT
? html `${busy}<slot name="loggingout">Logging out...</slot>`
: this.state === State.LOGGEDOUT
? html `${checkCircle}<slot name="loggedout">Logged out!</slot>`
: html `${exclamationCircle}<slot name="error">Logout</slot>`}
</button>`;
}
};
// Define the styles for the component
NpLogout.styles = [core, component, styles];
__decorate([
property({ reflect: true })
], NpLogout.prototype, "state", void 0);
__decorate([
property({ type: Number })
], NpLogout.prototype, "resetDuration", void 0);
NpLogout = __decorate([
customElement("np-logout")
], NpLogout);
export { NpLogout };
//# sourceMappingURL=np-logout.js.map