diff --git a/src/data/application_credential.ts b/src/data/application_credential.ts index 075ea5f721..5dee1bd355 100644 --- a/src/data/application_credential.ts +++ b/src/data/application_credential.ts @@ -1,7 +1,11 @@ import { HomeAssistant } from "../types"; +export interface ApplicationCredentialsDomainConfig { + description_placeholders: string; +} + export interface ApplicationCredentialsConfig { - domains: string[]; + integrations: Record; } export interface ApplicationCredential { diff --git a/src/data/translation.ts b/src/data/translation.ts index 7374f40639..e7c632ea57 100644 --- a/src/data/translation.ts +++ b/src/data/translation.ts @@ -38,7 +38,8 @@ export type TranslationCategory = | "device_automation" | "mfa_setup" | "system_health" - | "device_class"; + | "device_class" + | "application_credentials"; export const fetchTranslationPreferences = (hass: HomeAssistant) => fetchFrontendUserData(hass.connection, "language"); diff --git a/src/panels/config/application_credentials/dialog-add-application-credential.ts b/src/panels/config/application_credentials/dialog-add-application-credential.ts index 516b762806..670c33a57e 100644 --- a/src/panels/config/application_credentials/dialog-add-application-credential.ts +++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts @@ -7,10 +7,12 @@ import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-circular-progress"; import "../../../components/ha-combo-box"; import { createCloseHeading } from "../../../components/ha-dialog"; +import "../../../components/ha-markdown"; import "../../../components/ha-textfield"; import { fetchApplicationCredentialsConfig, createApplicationCredential, + ApplicationCredentialsConfig, ApplicationCredential, } from "../../../data/application_credential"; import { domainToName } from "../../../data/integration"; @@ -42,17 +44,22 @@ export class DialogAddApplicationCredential extends LitElement { @state() private _name?: string; + @state() private _description?: string; + @state() private _clientId?: string; @state() private _clientSecret?: string; @state() private _domains?: Domain[]; + @state() private _config?: ApplicationCredentialsConfig; + public showDialog(params: AddApplicationCredentialDialogParams) { this._params = params; this._domain = params.selectedDomain !== undefined ? params.selectedDomain : ""; this._name = ""; + this._description = ""; this._clientId = ""; this._clientSecret = ""; this._error = undefined; @@ -61,11 +68,12 @@ export class DialogAddApplicationCredential extends LitElement { } private async _fetchConfig() { - const config = await fetchApplicationCredentialsConfig(this.hass); - this._domains = config.domains.map((domain) => ({ + this._config = await fetchApplicationCredentialsConfig(this.hass); + this._domains = Object.keys(this._config.integrations).map((domain) => ({ id: domain, name: domainToName(this.hass.localize, domain), })); + this.hass.loadBackendTranslation("application_credentials"); } protected render(): TemplateResult { @@ -103,6 +111,12 @@ export class DialogAddApplicationCredential extends LitElement { required @value-changed=${this._handleDomainPicked} > + ${this._description + ? html`` + : ""}