mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 13:57:21 +00:00
convert ha-refresh-tokens-card (#6962)
This commit is contained in:
Joakim Sørensen
GitHub
parent
857e4e49d8
commit
af0246cd27
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
CSSResultArray,
|
||||
@ -12,8 +13,8 @@ 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 "../../components/ha-svg-icon";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import {
|
||||
showAlertDialog,
|
||||
@ -79,11 +80,14 @@ class HaLongLivedTokens extends LitElement {
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<ha-icon-button
|
||||
<mwc-button
|
||||
.token=${token}
|
||||
icon="hass:delete"
|
||||
.disabled=${token.is_current}
|
||||
.title=${this.hass.localize(`ui.common.delete`)}
|
||||
@click=${this._deleteToken}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-button>
|
||||
</ha-settings-row>`
|
||||
)}
|
||||
</div>
|
||||
@ -178,8 +182,8 @@ class HaLongLivedTokens extends LitElement {
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
mwc-button {
|
||||
--mdc-theme-primary: var(--primary-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
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 "../../components/ha-settings-row";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../dialogs/generic/show-dialog-box";
|
||||
import { EventsMixin } from "../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
ha-icon-button[disabled] {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
</style>
|
||||
<ha-card header="[[localize('ui.panel.profile.refresh_tokens.header')]]">
|
||||
<div class="card-content">
|
||||
[[localize('ui.panel.profile.refresh_tokens.description')]]
|
||||
</div>
|
||||
<template is="dom-repeat" items="[[_computeTokens(refreshTokens)]]">
|
||||
<ha-settings-row three-line>
|
||||
<span slot="heading">[[_formatTitle(item.client_id)]]</span>
|
||||
<div slot="description">[[_formatCreatedAt(item.created_at)]]</div>
|
||||
<div slot="description">[[_formatLastUsed(item)]]</div>
|
||||
<div>
|
||||
<template is="dom-if" if="[[item.is_current]]">
|
||||
<paper-tooltip animation-delay="0" position="left"
|
||||
>[[localize('ui.panel.profile.refresh_tokens.current_token_tooltip')]]</paper-tooltip
|
||||
>
|
||||
</template>
|
||||
<ha-icon-button
|
||||
icon="hass:delete"
|
||||
on-click="_handleDelete"
|
||||
disabled="[[item.is_current]]"
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</ha-settings-row>
|
||||
</template>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
refreshTokens: Array,
|
||||
};
|
||||
}
|
||||
|
||||
_computeTokens(refreshTokens) {
|
||||
return refreshTokens.filter((tkn) => tkn.type === "normal").reverse();
|
||||
}
|
||||
|
||||
_formatTitle(clientId) {
|
||||
return this.localize(
|
||||
"ui.panel.profile.refresh_tokens.token_title",
|
||||
"clientId",
|
||||
clientId
|
||||
);
|
||||
}
|
||||
|
||||
_formatCreatedAt(created) {
|
||||
return this.localize(
|
||||
"ui.panel.profile.refresh_tokens.created_at",
|
||||
"date",
|
||||
formatDateTime(new Date(created), this.hass.language)
|
||||
);
|
||||
}
|
||||
|
||||
_formatLastUsed(item) {
|
||||
return item.last_used_at
|
||||
? this.localize(
|
||||
"ui.panel.profile.refresh_tokens.last_used",
|
||||
"date",
|
||||
formatDateTime(new Date(item.last_used_at), this.hass.language),
|
||||
"location",
|
||||
item.last_used_ip
|
||||
)
|
||||
: this.localize("ui.panel.profile.refresh_tokens.not_used");
|
||||
}
|
||||
|
||||
async _handleDelete(ev) {
|
||||
const token = ev.model.item;
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.refresh_tokens.confirm_delete",
|
||||
"name",
|
||||
token.client_id
|
||||
),
|
||||
}))
|
||||
) {
|
||||
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.refresh_tokens.delete_failed"),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-refresh-tokens-card", HaRefreshTokens);
|
||||
150
src/panels/profile/ha-refresh-tokens-card.ts
Normal file
150
src/panels/profile/ha-refresh-tokens-card.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
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-settings-row";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-refresh-tokens-card")
|
||||
class HaRefreshTokens extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public refreshTokens?: RefreshToken[];
|
||||
|
||||
private _refreshTokens = memoizeOne(
|
||||
(refreshTokens: RefreshToken[]): RefreshToken[] =>
|
||||
refreshTokens?.filter((token) => token.type === "normal").reverse()
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const refreshTokens = this._refreshTokens(this.refreshTokens!);
|
||||
return html`<ha-card
|
||||
.header=${this.hass.localize("ui.panel.profile.refresh_tokens.header")}
|
||||
>
|
||||
<div class="card-content">
|
||||
${this.hass.localize("ui.panel.profile.refresh_tokens.description")}
|
||||
${refreshTokens?.length
|
||||
? refreshTokens!.map(
|
||||
(token) => html`<ha-settings-row three-line>
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.refresh_tokens.token_title",
|
||||
"clientId",
|
||||
token.client_id
|
||||
)}
|
||||
</span>
|
||||
<div slot="description">
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.refresh_tokens.created_at",
|
||||
"date",
|
||||
relativeTime(new Date(token.created_at), this.hass.localize)
|
||||
)}
|
||||
</div>
|
||||
<div slot="description">
|
||||
${token.last_used_at
|
||||
? this.hass.localize(
|
||||
"ui.panel.profile.refresh_tokens.last_used",
|
||||
"date",
|
||||
relativeTime(
|
||||
new Date(token.last_used_at),
|
||||
this.hass.localize
|
||||
),
|
||||
"location",
|
||||
token.last_used_ip
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.profile.refresh_tokens.not_used"
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
${token.is_current
|
||||
? html`<paper-tooltip animation-delay="0" position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.refresh_tokens.current_token_tooltip"
|
||||
)}
|
||||
</paper-tooltip>`
|
||||
: ""}
|
||||
<mwc-button
|
||||
.token=${token}
|
||||
.disabled=${token.is_current}
|
||||
.title=${this.hass.localize(`ui.common.delete`)}
|
||||
@click=${this._deleteToken}
|
||||
>
|
||||
<ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-settings-row>`
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>`;
|
||||
}
|
||||
|
||||
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.refresh_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.refresh_tokens.delete_failed"
|
||||
),
|
||||
text: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResultArray {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
ha-settings-row {
|
||||
padding: 0;
|
||||
}
|
||||
mwc-button {
|
||||
--mdc-theme-primary: var(--primary-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-refresh-tokens-card": HaRefreshTokens;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user