diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index 28803a3298..1eb0072a3f 100644 --- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts +++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts @@ -1,12 +1,12 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list-item"; import { mdiDelete } from "@mdi/js"; -import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../../src/components/ha-circular-progress"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-form/ha-form"; +import { HaFormSchema } from "../../../../src/components/ha-form/types"; import "../../../../src/components/ha-icon-button"; +import "../../../../src/components/ha-settings-row"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { addHassioDockerRegistry, @@ -19,22 +19,41 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; import { RegistriesDialogParams } from "./show-dialog-registries"; +const SCHEMA = [ + { + type: "string", + name: "registry", + required: true, + }, + { + type: "string", + name: "username", + required: true, + }, + { + type: "string", + name: "password", + required: true, + format: "password", + }, +]; + @customElement("dialog-hassio-registries") class HassioRegistriesDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public supervisor!: Supervisor; - @property({ attribute: false }) private _registries?: { + @state() private _registries?: { registry: string; username: string; }[]; - @state() private _registry?: string; - - @state() private _username?: string; - - @state() private _password?: string; + @state() private _input: { + registry?: string; + username?: string; + password?: string; + } = {}; @state() private _opened = false; @@ -47,6 +66,7 @@ class HassioRegistriesDialog extends LitElement { @closed=${this.closeDialog} scrimClickAction escapeKeyAction + hideActions .heading=${createCloseHeading( this.hass, this._addingRegistry @@ -54,99 +74,77 @@ class HassioRegistriesDialog extends LitElement { : this.supervisor.localize("dialog.registries.title_manage") )} > -
- ${this._addingRegistry - ? html` - - - - + ${this._addingRegistry + ? html` + +
${this.supervisor.localize("dialog.registries.add_registry")} - ` - : html`${this._registries?.length - ? this._registries.map( - (entry) => html` - - ${entry.registry} - ${this.supervisor.localize( - "dialog.registries.username" - )}: - ${entry.username} - - - ` - ) - : html` - - ${this.supervisor.localize( - "dialog.registries.no_registries" - )} - - `} +
+ ` + : html`${this._registries?.length + ? this._registries.map( + (entry) => html` + + ${entry.registry} + + ${this.supervisor.localize( + "dialog.registries.username" + )}: + ${entry.username} + + + + ` + ) + : html` + + ${this.supervisor.localize( + "dialog.registries.no_registries" + )} + + `} +
${this.supervisor.localize( "dialog.registries.add_new_registry" )} - `} -
+ +
`} `; } - private _inputChanged(ev: Event) { - const target = ev.currentTarget as PaperInputElement; - this[`_${target.name}`] = target.value; + private _computeLabel = (schema: HaFormSchema) => + this.supervisor.localize(`dialog.registries.${schema.name}`) || schema.name; + + private _valueChanged(ev: CustomEvent) { + this._input = ev.detail.value; } public async showDialog(dialogParams: RegistriesDialogParams): Promise { this._opened = true; + this._input = {}; this.supervisor = dialogParams.supervisor; await this._loadRegistries(); await this.updateComplete; @@ -155,6 +153,7 @@ class HassioRegistriesDialog extends LitElement { public closeDialog(): void { this._addingRegistry = false; this._opened = false; + this._input = {}; } public focus(): void { @@ -179,15 +178,16 @@ class HassioRegistriesDialog extends LitElement { private async _addNewRegistry(): Promise { const data = {}; - data[this._registry!] = { - username: this._username, - password: this._password, + data[this._input.registry!] = { + username: this._input.username, + password: this._input.password, }; try { await addHassioDockerRegistry(this.hass, data); await this._loadRegistries(); this._addingRegistry = false; + this._input = {}; } catch (err: any) { showAlertDialog(this, { title: this.supervisor.localize("dialog.registries.failed_to_add"), @@ -215,32 +215,20 @@ class HassioRegistriesDialog extends LitElement { haStyle, haStyleDialog, css` - ha-dialog.button-left { - --justify-action-buttons: flex-start; - } - paper-icon-item { - cursor: pointer; - } - .form { - color: var(--primary-text-color); - } - .option { + .registry { border: 1px solid var(--divider-color); border-radius: 4px; margin-top: 4px; } - mwc-button { - margin-left: 8px; + .action { + margin-top: 24px; + width: 100%; + display: flex; + justify-content: flex-end; } ha-icon-button { color: var(--error-color); - margin: -10px; - } - mwc-list-item { - cursor: default; - } - mwc-list-item span[slot="secondary"] { - color: var(--secondary-text-color); + margin-right: -10px; } `, ];