mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Migrate mfa to Lit (#8276)
Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
This commit is contained in:
Bram Kragten
GitHub
parent
e33aff7cf3
commit
627424b8b9
281
src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
Normal file
281
src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
Normal file
@ -0,0 +1,281 @@
|
||||
import "@material/mwc-button";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
} from "lit-element";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { localizeKey } from "../../common/translations/localize";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-form/ha-form";
|
||||
import "../../components/ha-markdown";
|
||||
import {
|
||||
DataEntryFlowStep,
|
||||
DataEntryFlowStepForm,
|
||||
} from "../../data/data_entry_flow";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../../components/ha-dialog";
|
||||
|
||||
let instance = 0;
|
||||
|
||||
@customElement("ha-mfa-module-setup-flow")
|
||||
class HaMfaModuleSetupFlow extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@internalProperty() private _dialogClosedCallback?: (params: {
|
||||
flowFinished: boolean;
|
||||
}) => void;
|
||||
|
||||
@internalProperty() private _instance?: number;
|
||||
|
||||
@internalProperty() private _loading = false;
|
||||
|
||||
@internalProperty() private _opened = false;
|
||||
|
||||
@internalProperty() private _stepData: any = {};
|
||||
|
||||
@internalProperty() private _step?: DataEntryFlowStep;
|
||||
|
||||
@internalProperty() private _errorMessage?: string;
|
||||
|
||||
public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) {
|
||||
this._instance = instance++;
|
||||
this._dialogClosedCallback = dialogClosedCallback;
|
||||
this._opened = true;
|
||||
|
||||
const fetchStep = continueFlowId
|
||||
? this.hass.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
flow_id: continueFlowId,
|
||||
})
|
||||
: this.hass.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
mfa_module_id: mfaModuleId,
|
||||
});
|
||||
|
||||
const curInstance = this._instance;
|
||||
|
||||
fetchStep.then((step) => {
|
||||
if (curInstance !== this._instance) return;
|
||||
|
||||
this._processStep(step);
|
||||
});
|
||||
}
|
||||
|
||||
public closeDialog() {
|
||||
// Closed dialog by clicking on the overlay
|
||||
if (this._step) {
|
||||
this._flowDone();
|
||||
}
|
||||
this._opened = false;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._opened) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
.heading=${this._computeStepTitle()}
|
||||
@closing=${this.closeDialog}
|
||||
>
|
||||
<div>
|
||||
${this._errorMessage
|
||||
? html`<div class="error">${this._errorMessage}</div>`
|
||||
: ""}
|
||||
${!this._step
|
||||
? html`<div class="init-spinner">
|
||||
<ha-circular-progress active></ha-circular-progress>
|
||||
</div>`
|
||||
: html`${this._step.type === "abort"
|
||||
? html` <ha-markdown
|
||||
allowsvg
|
||||
breaks
|
||||
.content=${this.hass.localize(
|
||||
`component.auth.mfa_setup.${this._step.handler}.abort.${this._step.reason}`
|
||||
)}
|
||||
></ha-markdown>`
|
||||
: this._step.type === "create_entry"
|
||||
? html`<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.mfa_setup.step_done",
|
||||
"step",
|
||||
this._step.title
|
||||
)}
|
||||
</p>`
|
||||
: this._step.type === "form"
|
||||
? html` <ha-markdown
|
||||
allowsvg
|
||||
breaks
|
||||
.content=${localizeKey(
|
||||
this.hass.localize,
|
||||
`component.auth.mfa_setup.${this._step!.handler}.step.${
|
||||
(this._step! as DataEntryFlowStepForm).step_id
|
||||
}.description`,
|
||||
this._step!.description_placeholders
|
||||
)}
|
||||
></ha-markdown>
|
||||
<ha-form
|
||||
.data=${this._stepData}
|
||||
.schema=${this._step.data_schema}
|
||||
.error=${this._step.errors}
|
||||
.computeLabel=${this._computeLabel}
|
||||
.computeError=${this._computeError}
|
||||
@value-changed=${this._stepDataChanged}
|
||||
></ha-form>`
|
||||
: ""}`}
|
||||
</div>
|
||||
${["abort", "create_entry"].includes(this._step?.type || "")
|
||||
? html`<mwc-button slot="primaryAction" @click=${this.closeDialog}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.mfa_setup.close"
|
||||
)}</mwc-button
|
||||
>`
|
||||
: ""}
|
||||
${this._step?.type === "form"
|
||||
? html`<mwc-button
|
||||
slot="primaryAction"
|
||||
.disabled=${this._loading}
|
||||
@click=${this._submitStep}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.mfa_setup.submit"
|
||||
)}</mwc-button
|
||||
>`
|
||||
: ""}
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyleDialog,
|
||||
css`
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
ha-dialog {
|
||||
max-width: 500px;
|
||||
}
|
||||
ha-markdown {
|
||||
--markdown-svg-background-color: white;
|
||||
--markdown-svg-color: black;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ha-markdown a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.init-spinner {
|
||||
padding: 10px 100px 34px;
|
||||
text-align: center;
|
||||
}
|
||||
.submit-spinner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProperties) {
|
||||
super.firstUpdated(changedProperties);
|
||||
this.hass.loadBackendTranslation("mfa_setup", "auth");
|
||||
this.addEventListener("keypress", (ev) => {
|
||||
if (ev.key === "Enter") {
|
||||
this._submitStep();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private _stepDataChanged(ev: CustomEvent) {
|
||||
this._stepData = ev.detail.value;
|
||||
}
|
||||
|
||||
private _submitStep() {
|
||||
this._loading = true;
|
||||
this._errorMessage = undefined;
|
||||
|
||||
const curInstance = this._instance;
|
||||
|
||||
this.hass
|
||||
.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
flow_id: this._step!.flow_id,
|
||||
user_input: this._stepData,
|
||||
})
|
||||
.then(
|
||||
(step) => {
|
||||
if (curInstance !== this._instance) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._processStep(step);
|
||||
this._loading = false;
|
||||
},
|
||||
(err) => {
|
||||
this._errorMessage =
|
||||
(err && err.body && err.body.message) || "Unknown error occurred";
|
||||
this._loading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private _processStep(step) {
|
||||
if (!step.errors) step.errors = {};
|
||||
this._step = step;
|
||||
// We got a new form if there are no errors.
|
||||
if (Object.keys(step.errors).length === 0) {
|
||||
this._stepData = {};
|
||||
}
|
||||
}
|
||||
|
||||
private _flowDone() {
|
||||
const flowFinished = Boolean(
|
||||
this._step && ["create_entry", "abort"].includes(this._step.type)
|
||||
);
|
||||
|
||||
this._dialogClosedCallback!({
|
||||
flowFinished,
|
||||
});
|
||||
|
||||
this._errorMessage = undefined;
|
||||
this._step = undefined;
|
||||
this._stepData = {};
|
||||
this._dialogClosedCallback = undefined;
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private _computeStepTitle() {
|
||||
return this._step?.type === "abort"
|
||||
? this.hass.localize("ui.panel.profile.mfa_setup.title_aborted")
|
||||
: this._step?.type === "create_entry"
|
||||
? this.hass.localize("ui.panel.profile.mfa_setup.title_success")
|
||||
: this._step?.type === "form"
|
||||
? this.hass.localize(
|
||||
`component.auth.mfa_setup.${this._step.handler}.step.${this._step.step_id}.title`
|
||||
)
|
||||
: "";
|
||||
}
|
||||
|
||||
private _computeLabel = (schema) =>
|
||||
this.hass.localize(
|
||||
`component.auth.mfa_setup.${this._step!.handler}.step.${
|
||||
(this._step! as DataEntryFlowStepForm).step_id
|
||||
}.data.${schema.name}`
|
||||
) || schema.name;
|
||||
|
||||
private _computeError = (error) =>
|
||||
this.hass.localize(
|
||||
`component.auth.mfa_setup.${this._step!.handler}.error.${error}`
|
||||
) || error;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-mfa-module-setup-flow": HaMfaModuleSetupFlow;
|
||||
}
|
||||
}
|
||||
@ -1,322 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../../components/dialog/ha-paper-dialog";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-form/ha-form";
|
||||
import "../../components/ha-markdown";
|
||||
import { EventsMixin } from "../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
import "../../styles/polymer-ha-style-dialog";
|
||||
|
||||
let instance = 0;
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
* @appliesMixin EventsMixin
|
||||
*/
|
||||
class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="ha-style-dialog">
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
ha-paper-dialog {
|
||||
max-width: 500px;
|
||||
}
|
||||
h2 {
|
||||
white-space: normal;
|
||||
}
|
||||
ha-markdown {
|
||||
--markdown-svg-background-color: white;
|
||||
--markdown-svg-color: black;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ha-markdown a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.init-spinner {
|
||||
padding: 10px 100px 34px;
|
||||
text-align: center;
|
||||
}
|
||||
.submit-spinner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
<ha-paper-dialog
|
||||
id="dialog"
|
||||
with-backdrop=""
|
||||
opened="{{_opened}}"
|
||||
on-opened-changed="_openedChanged"
|
||||
>
|
||||
<h2>
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
|
||||
[[localize('ui.panel.profile.mfa_setup.title_aborted')]]
|
||||
</template>
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
|
||||
[[localize('ui.panel.profile.mfa_setup.title_success')]]
|
||||
</template>
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
|
||||
[[_computeStepTitle(localize, _step)]]
|
||||
</template>
|
||||
</h2>
|
||||
<paper-dialog-scrollable>
|
||||
<template is="dom-if" if="[[_errorMsg]]">
|
||||
<div class="error">[[_errorMsg]]</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!_step]]">
|
||||
<div class="init-spinner">
|
||||
<ha-circular-progress active></ha-circular-progress>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_step]]">
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
|
||||
<ha-markdown
|
||||
allowsvg
|
||||
breaks
|
||||
content="[[_computeStepAbortedReason(localize, _step)]]"
|
||||
></ha-markdown>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
|
||||
<p>
|
||||
[[localize('ui.panel.profile.mfa_setup.step_done', 'step',
|
||||
_step.title)]]
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
|
||||
<template
|
||||
is="dom-if"
|
||||
if="[[_computeStepDescription(localize, _step)]]"
|
||||
>
|
||||
<ha-markdown
|
||||
allowsvg
|
||||
breaks
|
||||
content="[[_computeStepDescription(localize, _step)]]"
|
||||
></ha-markdown>
|
||||
</template>
|
||||
|
||||
<ha-form
|
||||
data="{{_stepData}}"
|
||||
schema="[[_step.data_schema]]"
|
||||
error="[[_step.errors]]"
|
||||
compute-label="[[_computeLabelCallback(localize, _step)]]"
|
||||
compute-error="[[_computeErrorCallback(localize, _step)]]"
|
||||
></ha-form>
|
||||
</template>
|
||||
</template>
|
||||
</paper-dialog-scrollable>
|
||||
<div class="buttons">
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
|
||||
<mwc-button on-click="_flowDone"
|
||||
>[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
|
||||
>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
|
||||
<mwc-button on-click="_flowDone"
|
||||
>[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
|
||||
>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
|
||||
<template is="dom-if" if="[[_loading]]">
|
||||
<div class="submit-spinner">
|
||||
<ha-circular-progress active></ha-circular-progress>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!_loading]]">
|
||||
<mwc-button on-click="_submitStep"
|
||||
>[[localize('ui.panel.profile.mfa_setup.submit')]]</mwc-button
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</ha-paper-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_hass: Object,
|
||||
_dialogClosedCallback: Function,
|
||||
_instance: Number,
|
||||
|
||||
_loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
// Error message when can't talk to server etc
|
||||
_errorMsg: String,
|
||||
|
||||
_opened: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
_step: {
|
||||
type: Object,
|
||||
value: null,
|
||||
},
|
||||
|
||||
/*
|
||||
* Store user entered data.
|
||||
*/
|
||||
_stepData: Object,
|
||||
};
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.hass.loadBackendTranslation("mfa_setup", "auth");
|
||||
this.addEventListener("keypress", (ev) => {
|
||||
if (ev.keyCode === 13) {
|
||||
this._submitStep();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showDialog({ hass, continueFlowId, mfaModuleId, dialogClosedCallback }) {
|
||||
this.hass = hass;
|
||||
this._instance = instance++;
|
||||
this._dialogClosedCallback = dialogClosedCallback;
|
||||
this._createdFromHandler = !!mfaModuleId;
|
||||
this._loading = true;
|
||||
this._opened = true;
|
||||
|
||||
const fetchStep = continueFlowId
|
||||
? this.hass.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
flow_id: continueFlowId,
|
||||
})
|
||||
: this.hass.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
mfa_module_id: mfaModuleId,
|
||||
});
|
||||
|
||||
const curInstance = this._instance;
|
||||
|
||||
fetchStep.then((step) => {
|
||||
if (curInstance !== this._instance) return;
|
||||
|
||||
this._processStep(step);
|
||||
this._loading = false;
|
||||
// When the flow changes, center the dialog.
|
||||
// Don't do it on each step or else the dialog keeps bouncing.
|
||||
setTimeout(() => this.$.dialog.center(), 0);
|
||||
});
|
||||
}
|
||||
|
||||
_submitStep() {
|
||||
this._loading = true;
|
||||
this._errorMsg = null;
|
||||
|
||||
const curInstance = this._instance;
|
||||
|
||||
this.hass
|
||||
.callWS({
|
||||
type: "auth/setup_mfa",
|
||||
flow_id: this._step.flow_id,
|
||||
user_input: this._stepData,
|
||||
})
|
||||
.then(
|
||||
(step) => {
|
||||
if (curInstance !== this._instance) return;
|
||||
|
||||
this._processStep(step);
|
||||
this._loading = false;
|
||||
},
|
||||
(err) => {
|
||||
this._errorMsg =
|
||||
(err && err.body && err.body.message) || "Unknown error occurred";
|
||||
this._loading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
_processStep(step) {
|
||||
if (!step.errors) step.errors = {};
|
||||
this._step = step;
|
||||
// We got a new form if there are no errors.
|
||||
if (Object.keys(step.errors).length === 0) {
|
||||
this._stepData = {};
|
||||
}
|
||||
}
|
||||
|
||||
_flowDone() {
|
||||
this._opened = false;
|
||||
const flowFinished =
|
||||
this._step && ["create_entry", "abort"].includes(this._step.type);
|
||||
|
||||
if (this._step && !flowFinished && this._createdFromHandler) {
|
||||
// console.log('flow not finish');
|
||||
}
|
||||
|
||||
this._dialogClosedCallback({
|
||||
flowFinished,
|
||||
});
|
||||
|
||||
this._errorMsg = null;
|
||||
this._step = null;
|
||||
this._stepData = {};
|
||||
this._dialogClosedCallback = null;
|
||||
}
|
||||
|
||||
_equals(a, b) {
|
||||
return a === b;
|
||||
}
|
||||
|
||||
_openedChanged(ev) {
|
||||
// Closed dialog by clicking on the overlay
|
||||
if (this._step && !ev.detail.value) {
|
||||
this._flowDone();
|
||||
}
|
||||
}
|
||||
|
||||
_computeStepAbortedReason(localize, step) {
|
||||
return localize(
|
||||
`component.auth.mfa_setup.${step.handler}.abort.${step.reason}`
|
||||
);
|
||||
}
|
||||
|
||||
_computeStepTitle(localize, step) {
|
||||
return (
|
||||
localize(
|
||||
`component.auth.mfa_setup.${step.handler}.step.${step.step_id}.title`
|
||||
) || "Setup Multi-factor Authentication"
|
||||
);
|
||||
}
|
||||
|
||||
_computeStepDescription(localize, step) {
|
||||
const args = [
|
||||
`component.auth.mfa_setup.${step.handler}.step.${step.step_id}.description`,
|
||||
];
|
||||
const placeholders = step.description_placeholders || {};
|
||||
Object.keys(placeholders).forEach((key) => {
|
||||
args.push(key);
|
||||
args.push(placeholders[key]);
|
||||
});
|
||||
return localize(...args);
|
||||
}
|
||||
|
||||
_computeLabelCallback(localize, step) {
|
||||
// Returns a callback for ha-form to calculate labels per schema object
|
||||
return (schema) =>
|
||||
localize(
|
||||
`component.auth.mfa_setup.${step.handler}.step.${step.step_id}.data.${schema.name}`
|
||||
) || schema.name;
|
||||
}
|
||||
|
||||
_computeErrorCallback(localize, step) {
|
||||
// Returns a callback for ha-form to calculate error messages
|
||||
return (error) =>
|
||||
localize(`component.auth.mfa_setup.${step.handler}.error.${error}`) ||
|
||||
error;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-mfa-module-setup-flow", HaMfaModuleSetupFlow);
|
||||
@ -1,130 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../../components/ha-card";
|
||||
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
|
||||
import { EventsMixin } from "../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
import "../../styles/polymer-ha-style";
|
||||
|
||||
let registeredDialog = false;
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex ha-style">
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
.status {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.error,
|
||||
.status {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
}
|
||||
mwc-button {
|
||||
margin-right: -0.57em;
|
||||
}
|
||||
</style>
|
||||
<ha-card header="[[localize('ui.panel.profile.mfa.header')]]">
|
||||
<template is="dom-repeat" items="[[mfaModules]]" as="module">
|
||||
<paper-item>
|
||||
<paper-item-body two-line="">
|
||||
<div>[[module.name]]</div>
|
||||
<div secondary="">[[module.id]]</div>
|
||||
</paper-item-body>
|
||||
<template is="dom-if" if="[[module.enabled]]">
|
||||
<mwc-button on-click="_disable"
|
||||
>[[localize('ui.panel.profile.mfa.disable')]]</mwc-button
|
||||
>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!module.enabled]]">
|
||||
<mwc-button on-click="_enable"
|
||||
>[[localize('ui.panel.profile.mfa.enable')]]</mwc-button
|
||||
>
|
||||
</template>
|
||||
</paper-item>
|
||||
</template>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
|
||||
_loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
// Error message when can't talk to server etc
|
||||
_statusMsg: String,
|
||||
_errorMsg: String,
|
||||
|
||||
mfaModules: Array,
|
||||
};
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
if (!registeredDialog) {
|
||||
registeredDialog = true;
|
||||
this.fire("register-dialog", {
|
||||
dialogShowEvent: "show-mfa-module-setup-flow",
|
||||
dialogTag: "ha-mfa-module-setup-flow",
|
||||
dialogImport: () => import("./ha-mfa-module-setup-flow"),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_enable(ev) {
|
||||
this.fire("show-mfa-module-setup-flow", {
|
||||
hass: this.hass,
|
||||
mfaModuleId: ev.model.module.id,
|
||||
dialogClosedCallback: () => this._refreshCurrentUser(),
|
||||
});
|
||||
}
|
||||
|
||||
async _disable(ev) {
|
||||
const mfamodule = ev.model.module;
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
text: this.localize(
|
||||
"ui.panel.profile.mfa.confirm_disable",
|
||||
"name",
|
||||
mfamodule.name
|
||||
),
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const mfaModuleId = mfamodule.id;
|
||||
|
||||
this.hass
|
||||
.callWS({
|
||||
type: "auth/depose_mfa",
|
||||
mfa_module_id: mfaModuleId,
|
||||
})
|
||||
.then(() => {
|
||||
this._refreshCurrentUser();
|
||||
});
|
||||
}
|
||||
|
||||
_refreshCurrentUser() {
|
||||
this.fire("hass-refresh-current-user");
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-mfa-modules-card", HaMfaModulesCard);
|
||||
101
src/panels/profile/ha-mfa-modules-card.ts
Normal file
101
src/panels/profile/ha-mfa-modules-card.ts
Normal file
@ -0,0 +1,101 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../../components/ha-card";
|
||||
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
|
||||
import { HomeAssistant, MFAModule } from "../../types";
|
||||
import { showMfaModuleSetupFlowDialog } from "./show-ha-mfa-module-setup-flow-dialog";
|
||||
|
||||
@customElement("ha-mfa-modules-card")
|
||||
class HaMfaModulesCard extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public mfaModules!: MFAModule[];
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card .header=${this.hass.localize("ui.panel.profile.mfa.header")}>
|
||||
${this.mfaModules.map(
|
||||
(module) => html`<paper-item>
|
||||
<paper-item-body two-line="">
|
||||
<div>${module.name}</div>
|
||||
<div secondary>${module.id}</div>
|
||||
</paper-item-body>
|
||||
${module.enabled
|
||||
? html`<mwc-button .module=${module} @click=${this._disable}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.mfa.disable"
|
||||
)}</mwc-button
|
||||
>`
|
||||
: html`<mwc-button .module=${module} @click=${this._enable}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.mfa.enable"
|
||||
)}</mwc-button
|
||||
>`}
|
||||
</paper-item>`
|
||||
)}
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
mwc-button {
|
||||
margin-right: -0.57em;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private _enable(ev) {
|
||||
showMfaModuleSetupFlowDialog(this, {
|
||||
mfaModuleId: ev.currentTarget.module.id,
|
||||
dialogClosedCallback: () => this._refreshCurrentUser(),
|
||||
});
|
||||
}
|
||||
|
||||
private async _disable(ev) {
|
||||
const mfamodule = ev.currentTarget.module;
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
text: this.hass.localize(
|
||||
"ui.panel.profile.mfa.confirm_disable",
|
||||
"name",
|
||||
mfamodule.name
|
||||
),
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const mfaModuleId = mfamodule.id;
|
||||
|
||||
this.hass
|
||||
.callWS({
|
||||
type: "auth/depose_mfa",
|
||||
mfa_module_id: mfaModuleId,
|
||||
})
|
||||
.then(() => {
|
||||
this._refreshCurrentUser();
|
||||
});
|
||||
}
|
||||
|
||||
private _refreshCurrentUser() {
|
||||
fireEvent(this, "hass-refresh-current-user");
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-mfa-modules-card": HaMfaModulesCard;
|
||||
}
|
||||
}
|
||||
21
src/panels/profile/show-ha-mfa-module-setup-flow-dialog.ts
Normal file
21
src/panels/profile/show-ha-mfa-module-setup-flow-dialog.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
||||
export interface MfaModuleSetupFlowDialogParams {
|
||||
continueFlowId?: string;
|
||||
mfaModuleId?: string;
|
||||
dialogClosedCallback: (params: { flowFinished: boolean }) => void;
|
||||
}
|
||||
|
||||
export const loadMfaModuleSetupFlowDialog = () =>
|
||||
import("./dialog-ha-mfa-module-setup-flow");
|
||||
|
||||
export const showMfaModuleSetupFlowDialog = (
|
||||
element: HTMLElement,
|
||||
dialogParams: MfaModuleSetupFlowDialogParams
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "ha-mfa-module-setup-flow",
|
||||
dialogImport: loadMfaModuleSetupFlowDialog,
|
||||
dialogParams,
|
||||
});
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user