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 e01ded0e87..f1fc6ecf87 100644 --- a/src/panels/config/application_credentials/dialog-add-application-credential.ts +++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts @@ -1,8 +1,9 @@ import "@material/mwc-button"; import "@material/mwc-list/mwc-list-item"; +import { mdiOpenInNew } from "@mdi/js"; +import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-circular-progress"; import "../../../components/ha-combo-box"; @@ -10,14 +11,15 @@ import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-markdown"; import "../../../components/ha-textfield"; import { - fetchApplicationCredentialsConfig, - createApplicationCredential, - ApplicationCredentialsConfig, ApplicationCredential, + ApplicationCredentialsConfig, + createApplicationCredential, + fetchApplicationCredentialsConfig, } from "../../../data/application_credential"; import { domainToName } from "../../../data/integration"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; +import { documentationUrl } from "../../../util/documentation-url"; import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential"; interface Domain { @@ -98,6 +100,25 @@ export class DialogAddApplicationCredential extends LitElement { >
${this._error ? html`
${this._error}
` : ""} +

+ ${this.hass.localize( + "ui.panel.config.application_credentials.editor.description" + )} +
+ + ${this.hass!.localize( + "ui.panel.config.application_credentials.editor.view_documentation" + )} + + +

${this._loading @@ -163,15 +192,18 @@ export class DialogAddApplicationCredential extends LitElement { ` : html` + + ${this.hass.localize("ui.common.cancel")} + ${this.hass.localize( - "ui.panel.config.application_credentials.editor.create" + "ui.panel.config.application_credentials.editor.add" )} `} @@ -213,7 +245,7 @@ export class DialogAddApplicationCredential extends LitElement { this.closeDialog(); } - private async _createApplicationCredential(ev) { + private async _addApplicationCredential(ev) { ev.preventDefault(); if (!this._domain || !this._clientId || !this._clientSecret) { return; @@ -260,6 +292,12 @@ export class DialogAddApplicationCredential extends LitElement { display: block; margin-bottom: 24px; } + a { + text-decoration: none; + } + a ha-svg-icon { + --mdc-icon-size: 16px; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index e73e58b2fa..a7f7dbe100 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3014,12 +3014,16 @@ "caption": "Application Credentials", "description": "Manage the OAuth Application Credentials used by Integrations", "editor": { - "caption": "Add Application Credential", - "create": "Create", + "caption": "Add Credential", + "description": "OAuth is used to grant Home Assistant access to information on other websites without giving a passwords. This mechanism is used by companies such as Spotify, Google, Withings, Microsoft, and Twitter.", + "view_documentation": "View documentation", + "add": "Add", "domain": "Integration", "name": "Name", "client_id": "OAuth Client ID", - "client_secret": "OAuth Client Secret" + "client_id_helper": "Public identifier of the OAuth application", + "client_secret": "OAuth Client Secret", + "client_secret_helper": "Secret of the OAuth application" }, "picker": { "add_application_credential": "Add Application Credential",