import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { O as OAuthClient, a as OAuthStatusTypes } from './auth.js';
const notificationAuthCss = "";
const NotificationAuth = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.baseClass = "uxn-notification-auth";
this.error = null;
this.expiration = "";
this.loggedIn = false;
this.pending = false;
this.login = () => {
this.pending = true;
OAuthClient().login();
};
this.logout = () => {
this.pending = true;
OAuthClient().logout();
};
this.handleAuthStatus = (client) => {
const exp = client.getTokenExpiration();
const wasLoggedIn = this.loggedIn;
this.expiration = new Date(exp).toLocaleString();
this.error = client.getError();
this.pending = client.getStatus() === OAuthStatusTypes.PENDING;
this.loggedIn =
client.getStatus() === OAuthStatusTypes.AUTHENTICATED &&
exp > Date.now();
const url = window.top.location.origin +
window.top.location.pathname +
"?path=/story/notifications-notification-auth--notification-auth";
if (!wasLoggedIn && this.loggedIn && window.top.location.href !== url) {
window.setTimeout(() => {
window.top.location.assign(url);
}, 500);
}
};
}
componentWillLoad() {
this.loggedIn =
OAuthClient().getStatus() === OAuthStatusTypes.AUTHENTICATED;
this.handleAuthStatus(OAuthClient());
OAuthClient().subscribe(this.handleAuthStatus);
}
get errorCode() {
return this.error !== null ? this.error.error : "";
}
get errorMsg() {
return this.error !== null ? this.error.error_description : "";
}
render() {
return (h(Host, { class: this.baseClass }, h("div", { class: "ux-u-margin-bottom-30" }, h("h1", null, "App Environment with Authentication"), h("h4", null, "OAuth 2.0 Code Flow with PKCE via the TRUMPF IDM")), h("div", { class: "ux-u-margin-bottom-30" }, this.loggedIn && (h("div", { class: "ux-text-status ux-text-status--green" }, "Logged In")), !this.loggedIn && (h("div", { class: "ux-text-status ux-text-status--red" }, "Logged Out"))), h("div", { class: "ux-u-margin-bottom-30" }, !this.pending && !this.loggedIn && (h("div", { class: "ux-button", onClick: this.login }, "Login")), !this.pending && this.loggedIn && (h("div", { class: "ux-button", onClick: this.logout }, "Revoke Token"))), this.pending && (h("div", { class: "ux-horizontal-loader ux-u-margin-bottom-30" })), this.loggedIn && (h("div", null, h("div", null, "Token Expiration:"), h("div", null, this.expiration))), !this.pending && !this.loggedIn && !this.error !== null && (h("div", null, this.errorCode.length > 0 && (h("p", null, "Error Code: ", this.errorCode)), this.errorMsg.length > 0 && (h("p", null, "Error Msg: ", this.errorMsg))))));
}
static get style() { return notificationAuthCss; }
}, [0, "uxn-notification-auth", {
"loggedIn": [32],
"pending": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["uxn-notification-auth"];
components.forEach(tagName => { switch (tagName) {
case "uxn-notification-auth":
if (!customElements.get(tagName)) {
customElements.define(tagName, NotificationAuth);
}
break;
} });
}
const UxnNotificationAuth = NotificationAuth;
const defineCustomElement = defineCustomElement$1;
export { UxnNotificationAuth, defineCustomElement };