mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Convert ha-long-lived-access-tokens-card (#6917)
Co-authored-by: Zack Barett <arnett.zackary@gmail.com> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
b9699f745f
commit
092a02a624
17
src/data/refresh_token.ts
Normal file
17
src/data/refresh_token.ts
Normal file
@ -0,0 +1,17 @@
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
"hass-refresh-tokens": undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export interface RefreshToken {
|
||||
client_icon?: string;
|
||||
client_id: string;
|
||||
client_name?: string;
|
||||
created_at: string;
|
||||
id: string;
|
||||
is_current: boolean;
|
||||
last_used_at?: string;
|
||||
last_used_ip?: string;
|
||||
type: "normal" | "long_lived_access_token";
|
||||
}
|
@ -57,7 +57,8 @@ class DialogBox extends LitElement {
|
||||
open
|
||||
?scrimClickAction=${this._params.prompt}
|
||||
?escapeKeyAction=${this._params.prompt}
|
||||
@closed=${this._dismiss}
|
||||
@closed=${this._dialogClosed}
|
||||
defaultAction="ignore"
|
||||
.heading=${this._params.title
|
||||
? this._params.title
|
||||
: this._params.confirmation &&
|
||||
@ -78,10 +79,10 @@ class DialogBox extends LitElement {
|
||||
${this._params.prompt
|
||||
? html`
|
||||
<paper-input
|
||||
autofocus
|
||||
dialogInitialFocus
|
||||
.value=${this._value}
|
||||
@value-changed=${this._valueChanged}
|
||||
@keyup=${this._handleKeyUp}
|
||||
@value-changed=${this._valueChanged}
|
||||
.label=${this._params.inputLabel
|
||||
? this._params.inputLabel
|
||||
: ""}
|
||||
@ -100,7 +101,11 @@ class DialogBox extends LitElement {
|
||||
: this.hass.localize("ui.dialogs.generic.cancel")}
|
||||
</mwc-button>
|
||||
`}
|
||||
<mwc-button @click=${this._confirm} slot="primaryAction">
|
||||
<mwc-button
|
||||
@click=${this._confirm}
|
||||
?dialogInitialFocus=${!this._params.prompt}
|
||||
slot="primaryAction"
|
||||
>
|
||||
${this._params.confirmText
|
||||
? this._params.confirmText
|
||||
: this.hass.localize("ui.dialogs.generic.ok")}
|
||||
@ -133,7 +138,17 @@ class DialogBox extends LitElement {
|
||||
this._close();
|
||||
}
|
||||
|
||||
private _dialogClosed(ev) {
|
||||
if (ev.detail.action === "ignore") {
|
||||
return;
|
||||
}
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private _close(): void {
|
||||
if (!this._params) {
|
||||
return;
|
||||
}
|
||||
this._params = undefined;
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
}
|
||||
|
@ -1,171 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { formatDateTime } from "../../common/datetime/format_date_time";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-icon-button";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showPromptDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../dialogs/generic/show-dialog-box";
|
||||
import { EventsMixin } from "../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
import "../../styles/polymer-ha-style";
|
||||
import "../../components/ha-settings-row";
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="ha-style">
|
||||
.card-content {
|
||||
margin: -1em 0;
|
||||
}
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
</style>
|
||||
<ha-card
|
||||
header="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
|
||||
>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
[[localize('ui.panel.profile.long_lived_access_tokens.description')]]
|
||||
<a
|
||||
href="https://developers.home-assistant.io/docs/en/auth_api.html#making-authenticated-requests"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
[[localize('ui.panel.profile.long_lived_access_tokens.learn_auth_requests')]]
|
||||
</a>
|
||||
</p>
|
||||
<template is="dom-if" if="[[!_tokens.length]]">
|
||||
<p>
|
||||
[[localize('ui.panel.profile.long_lived_access_tokens.empty_state')]]
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<template is="dom-repeat" items="[[_tokens]]">
|
||||
<ha-settings-row two-line>
|
||||
<span slot="heading">[[item.client_name]]</span>
|
||||
<div slot="description">[[_formatCreatedAt(item.created_at)]]</div>
|
||||
<ha-icon-button
|
||||
icon="hass:delete"
|
||||
on-click="_handleDelete"
|
||||
></ha-icon-button>
|
||||
</ha-settings-row>
|
||||
</template>
|
||||
<div class="card-actions">
|
||||
<mwc-button on-click="_handleCreate">
|
||||
[[localize('ui.panel.profile.long_lived_access_tokens.create')]]
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
refreshTokens: Array,
|
||||
_tokens: {
|
||||
type: Array,
|
||||
computed: "_computeTokens(refreshTokens)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
_computeTokens(refreshTokens) {
|
||||
return refreshTokens
|
||||
.filter((tkn) => tkn.type === "long_lived_access_token")
|
||||
.reverse();
|
||||
}
|
||||
|
||||
_formatTitle(name) {
|
||||
return this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.token_title",
|
||||
"name",
|
||||
name
|
||||
);
|
||||
}
|
||||
|
||||
_formatCreatedAt(created) {
|
||||
return this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.created_at",
|
||||
"date",
|
||||
formatDateTime(new Date(created), this.hass.language)
|
||||
);
|
||||
}
|
||||
|
||||
async _handleCreate() {
|
||||
const name = await showPromptDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.prompt_name"
|
||||
),
|
||||
});
|
||||
if (!name) return;
|
||||
try {
|
||||
const token = await this.hass.callWS({
|
||||
type: "auth/long_lived_access_token",
|
||||
lifespan: 3650,
|
||||
client_name: name,
|
||||
});
|
||||
await showPromptDialog(this, {
|
||||
title: name,
|
||||
text: this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
|
||||
),
|
||||
defaultValue: token,
|
||||
});
|
||||
this.fire("hass-refresh-tokens");
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line
|
||||
console.error(err);
|
||||
showAlertDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.create_failed"
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async _handleDelete(ev) {
|
||||
const token = ev.model.item;
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.confirm_delete",
|
||||
"name",
|
||||
token.client_name
|
||||
),
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await this.hass.callWS({
|
||||
type: "auth/delete_refresh_token",
|
||||
refresh_token_id: token.id,
|
||||
});
|
||||
this.fire("hass-refresh-tokens");
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line
|
||||
console.error(err);
|
||||
showAlertDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.delete_failed"
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-long-lived-access-tokens-card", HaLongLivedTokens);
|
193
src/panels/profile/ha-long-lived-access-tokens-card.ts
Normal file
193
src/panels/profile/ha-long-lived-access-tokens-card.ts
Normal file
@ -0,0 +1,193 @@
|
||||
import "@material/mwc-button";
|
||||
import {
|
||||
css,
|
||||
CSSResultArray,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import memoizeOne from "memoize-one";
|
||||
import relativeTime from "../../common/datetime/relative_time";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-settings-row";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
showPromptDialog,
|
||||
} from "../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import "../../styles/polymer-ha-style";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-long-lived-access-tokens-card")
|
||||
class HaLongLivedTokens extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public refreshTokens?: RefreshToken[];
|
||||
|
||||
private _accessTokens = memoizeOne(
|
||||
(refreshTokens: RefreshToken[]): RefreshToken[] =>
|
||||
refreshTokens
|
||||
?.filter((token) => token.type === "long_lived_access_token")
|
||||
.reverse()
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const accessTokens = this._accessTokens(this.refreshTokens!);
|
||||
|
||||
return html`
|
||||
<ha-card
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.header"
|
||||
)}
|
||||
>
|
||||
<div class="card-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.description"
|
||||
)}
|
||||
|
||||
<a
|
||||
href="https://developers.home-assistant.io/docs/en/auth_api.html#making-authenticated-requests"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.learn_auth_requests"
|
||||
)}
|
||||
</a>
|
||||
${!accessTokens?.length
|
||||
? html`<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.empty_state"
|
||||
)}
|
||||
</p>`
|
||||
: accessTokens!.map(
|
||||
(token) => html`<ha-settings-row two-line>
|
||||
<span slot="heading">${token.client_name}</span>
|
||||
<div slot="description">
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.created",
|
||||
"date",
|
||||
relativeTime(
|
||||
new Date(token.created_at),
|
||||
this.hass.localize
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<ha-icon-button
|
||||
.token=${token}
|
||||
icon="hass:delete"
|
||||
@click=${this._deleteToken}
|
||||
></ha-icon-button>
|
||||
</ha-settings-row>`
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._createToken}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.create"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _createToken(): Promise<void> {
|
||||
const name = await showPromptDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.prompt_name"
|
||||
),
|
||||
inputLabel: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.name"
|
||||
),
|
||||
});
|
||||
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = await this.hass.callWS<string>({
|
||||
type: "auth/long_lived_access_token",
|
||||
lifespan: 3650,
|
||||
client_name: name,
|
||||
});
|
||||
|
||||
showPromptDialog(this, {
|
||||
title: name,
|
||||
text: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
|
||||
),
|
||||
defaultValue: token,
|
||||
});
|
||||
|
||||
fireEvent(this, "hass-refresh-tokens");
|
||||
} catch (err) {
|
||||
showAlertDialog(this, {
|
||||
title: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.create_failed"
|
||||
),
|
||||
text: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async _deleteToken(ev: Event): Promise<void> {
|
||||
const token = (ev.currentTarget as any).token;
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.confirm_delete",
|
||||
"name",
|
||||
token.client_name
|
||||
),
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await this.hass.callWS({
|
||||
type: "auth/delete_refresh_token",
|
||||
refresh_token_id: token.id,
|
||||
});
|
||||
fireEvent(this, "hass-refresh-tokens");
|
||||
} catch (err) {
|
||||
await showAlertDialog(this, {
|
||||
title: this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.delete_failed"
|
||||
),
|
||||
text: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResultArray {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
ha-settings-row {
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-long-lived-access-tokens-card": HaLongLivedTokens;
|
||||
}
|
||||
}
|
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button";
|
||||
import "../../layouts/ha-app-layout";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -9,9 +8,9 @@ import {
|
||||
css,
|
||||
CSSResultArray,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
internalProperty,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
@ -22,7 +21,9 @@ import {
|
||||
CoreFrontendUserData,
|
||||
getOptimisticFrontendUserDataCollection,
|
||||
} from "../../data/frontend";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
|
||||
import "../../layouts/ha-app-layout";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "./ha-advanced-mode-row";
|
||||
@ -35,15 +36,15 @@ import "./ha-pick-language-row";
|
||||
import "./ha-pick-theme-row";
|
||||
import "./ha-push-notifications-row";
|
||||
import "./ha-refresh-tokens-card";
|
||||
import "./ha-set-vibrate-row";
|
||||
import "./ha-set-suspend-row";
|
||||
import "./ha-set-vibrate-row";
|
||||
|
||||
class HaPanelProfile extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public narrow!: boolean;
|
||||
@property({ type: Boolean }) public narrow!: boolean;
|
||||
|
||||
@internalProperty() private _refreshTokens?: unknown[];
|
||||
@internalProperty() private _refreshTokens?: RefreshToken[];
|
||||
|
||||
@internalProperty() private _coreUserData?: CoreFrontendUserData | null;
|
||||
|
||||
|
@ -2512,14 +2512,13 @@
|
||||
"header": "Long-Lived Access Tokens",
|
||||
"description": "Create long-lived access tokens to allow your scripts to interact with your Home Assistant instance. Each token will be valid for 10 years from creation. The following long-lived access tokens are currently active.",
|
||||
"learn_auth_requests": "Learn how to make authenticated requests.",
|
||||
"created_at": "Created at {date}",
|
||||
"last_used": "Last used at {date} from {location}",
|
||||
"not_used": "Has never been used",
|
||||
"created": "Created {date}",
|
||||
"confirm_delete": "Are you sure you want to delete the access token for {name}?",
|
||||
"delete_failed": "Failed to delete the access token.",
|
||||
"create": "Create Token",
|
||||
"create_failed": "Failed to create the access token.",
|
||||
"prompt_name": "Name?",
|
||||
"name": "Name",
|
||||
"prompt_name": "Give the token a name",
|
||||
"prompt_copy_token": "Copy your access token. It will not be shown again.",
|
||||
"empty_state": "You have no long-lived access tokens yet."
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user