import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin"; import { LitElement, html, PropertyDeclarations } from "lit-element"; import "./ha-auth-flow"; import { AuthProvider } from "../data/auth"; import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider"); interface QueryParams { client_id?: string; redirect_uri?: string; state?: string; } class HaAuthorize extends litLocalizeLiteMixin(LitElement) { public clientId?: string; public redirectUri?: string; public oauth2State?: string; private _authProvider?: AuthProvider; private _authProviders?: AuthProvider[]; constructor() { super(); this.translationFragment = "page-authorize"; const query: QueryParams = {}; const values = location.search.substr(1).split("&"); for (const item of values) { const value = item.split("="); if (value.length > 1) { query[decodeURIComponent(value[0])] = decodeURIComponent(value[1]); } } if (query.client_id) { this.clientId = query.client_id; } if (query.redirect_uri) { this.redirectUri = query.redirect_uri; } if (query.state) { this.oauth2State = query.state; } } static get properties(): PropertyDeclarations { return { _authProvider: {}, _authProviders: {}, clientId: {}, redirectUri: {}, oauth2State: {}, }; } protected render() { if (!this._authProviders) { return html`
[[localize('ui.panel.page-authorize.initializing')]]
`; } // We don't have a good approach yet to map text markup in localization. // So we sanitize the translation with innerText and then inject // the name with a bold tag. const loggingInWith = document.createElement("div"); loggingInWith.innerText = this.localize( "ui.panel.page-authorize.logging_in_with", "authProviderName", "NAME" ); loggingInWith.innerHTML = loggingInWith.innerHTML.replace( "**NAME**", `${this._authProvider!.name}` ); const inactiveProviders = this._authProviders.filter( (prv) => prv !== this._authProvider ); return html` ${this.renderStyle()}${ this.localize( "ui.panel.page-authorize.authorizing_client", "clientId", this.clientId ) }
${loggingInWith}