Skip to content

Commit

Permalink
Use ha-form for onboarding-create-user (#10604)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeeus
ludeeus committed Nov 15, 2021
1 parent a6b98fc commit b969db0
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 132 deletions.
207 changes: 76 additions & 131 deletions src/onboarding/onboarding-create-user.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { genClientId } from "home-assistant-js-websocket";
import {
css,
Expand All @@ -9,168 +8,116 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-form/ha-form";
import type { HaForm } from "../components/ha-form/ha-form";
import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types";
import { onboardUserStep } from "../data/onboarding";
import { PolymerChangedEvent } from "../polymer-types";

const CREATE_USER_SCHEMA: HaFormSchema[] = [
{ type: "string", name: "name", required: true },
{ type: "string", name: "username", required: true },
{ type: "string", name: "password", required: true },
{ type: "string", name: "password_confirm", required: true },
];

@customElement("onboarding-create-user")
class OnboardingCreateUser extends LitElement {
@property() public localize!: LocalizeFunc;

@property() public language!: string;

@state() private _name = "";

@state() private _username = "";
@state() private _loading = false;

@state() private _password = "";
@state() private _errorMsg?: string;

@state() private _passwordConfirm = "";
@state() private _formError: Record<string, string> = {};

@state() private _loading = false;
@state() private _newUser: HaFormDataContainer = {};

@state() private _errorMsg?: string = undefined;
@query("ha-form", true) private _form?: HaForm;

protected render(): TemplateResult {
return html`
<p>
${this.localize("ui.panel.page-onboarding.intro")}
</p>
<p>
${this.localize("ui.panel.page-onboarding.user.intro")}
</p>
${
this._errorMsg
? html`
<p class="error">
${this.localize(
`ui.panel.page-onboarding.user.error.${this._errorMsg}`
) || this._errorMsg}
</p>
`
: ""
}
<form>
<paper-input
name="name"
label=${this.localize("ui.panel.page-onboarding.user.data.name")}
.value=${this._name}
<p>${this.localize("ui.panel.page-onboarding.intro")}</p>
<p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>
${this._errorMsg
? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
: ""}
<ha-form
.computeLabel=${this._computeLabel(this.localize)}
.data=${this._newUser}
.disabled=${this._loading}
.error=${this._formError}
.schema=${CREATE_USER_SCHEMA}
@value-changed=${this._handleValueChanged}
required
auto-validate
autocapitalize='on'
.errorMessage=${this.localize(
"ui.panel.page-onboarding.user.required_field"
)}
@blur=${this._maybePopulateUsername}
></paper-input>
<paper-input
name="username"
label=${this.localize("ui.panel.page-onboarding.user.data.username")}
value=${this._username}
@value-changed=${this._handleValueChanged}
required
auto-validate
autocapitalize='none'
.errorMessage=${this.localize(
"ui.panel.page-onboarding.user.required_field"
)}
></paper-input>
<paper-input
name="password"
label=${this.localize("ui.panel.page-onboarding.user.data.password")}
value=${this._password}
@value-changed=${this._handleValueChanged}
required
type='password'
auto-validate
.errorMessage=${this.localize(
"ui.panel.page-onboarding.user.required_field"
)}
></paper-input>
<paper-input
name="passwordConfirm"
label=${this.localize(
"ui.panel.page-onboarding.user.data.password_confirm"
)}
value=${this._passwordConfirm}
@value-changed=${this._handleValueChanged}
required
type='password'
.invalid=${
this._password !== "" &&
this._passwordConfirm !== "" &&
this._passwordConfirm !== this._password
}
.errorMessage=${this.localize(
"ui.panel.page-onboarding.user.error.password_not_match"
)}
></paper-input>
<p class="action">
<mwc-button
raised
@click=${this._submitForm}
.disabled=${this._loading}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
</p>
</div>
</form>
`;
></ha-form>
<mwc-button
raised
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
!this._newUser.username ||
!this._newUser.password}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
`;
}

protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
setTimeout(
() => this.shadowRoot!.querySelector("paper-input")!.focus(),
100
);
setTimeout(() => this._form?.focus(), 100);
this.addEventListener("keypress", (ev) => {
if (ev.keyCode === 13) {
if (
ev.keyCode === 13 &&
this._newUser.name &&
this._newUser.username &&
this._newUser.password &&
this._newUser.password_confirm
) {
this._submitForm(ev);
}
});
}

private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
const name = (ev.target as any).name;
this[`_${name}`] = ev.detail.value;
private _computeLabel(localize) {
return (schema: HaFormSchema) =>
localize(`ui.panel.page-onboarding.user.data.${schema.name}`);
}

private _handleValueChanged(
ev: PolymerChangedEvent<HaFormDataContainer>
): void {
this._newUser = ev.detail.value;
this._maybePopulateUsername();
this._formError.password_confirm =
this._newUser.password !== this._newUser.password_confirm
? this.localize(
"ui.panel.page-onboarding.user.error.password_not_match"
)
: "";
}

private _maybePopulateUsername(): void {
if (this._username) {
if (!this._newUser.name || this._newUser.name === this._newUser.username) {
return;
}

const parts = this._name.split(" ");

const parts = String(this._newUser.name).split(" ");
if (parts.length) {
this._username = parts[0].toLowerCase();
this._newUser.username = parts[0].toLowerCase();
}
}

private async _submitForm(ev): Promise<void> {
ev.preventDefault();
if (!this._name || !this._username || !this._password) {
this._errorMsg = "required_fields";
return;
}

if (this._password !== this._passwordConfirm) {
this._errorMsg = "password_not_match";
return;
}

this._loading = true;
this._errorMsg = "";

Expand All @@ -179,9 +126,9 @@ class OnboardingCreateUser extends LitElement {

const result = await onboardUserStep({
client_id: clientId,
name: this._name,
username: this._username,
password: this._password,
name: String(this._newUser.name),
username: String(this._newUser.username),
password: String(this._newUser.password),
language: this.language,
});

Expand All @@ -199,13 +146,11 @@ class OnboardingCreateUser extends LitElement {

static get styles(): CSSResultGroup {
return css`
.error {
color: red;
}
.action {
margin: 32px 0 16px;
mwc-button {
margin: 32px 0 0;
text-align: center;
display: block;
text-align: right;
}
`;
}
Expand Down
1 change: 0 additions & 1 deletion src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3924,7 +3924,6 @@
},
"create_account": "Create Account",
"error": {
"required_fields": "Fill in all required fields",
"password_not_match": "Passwords don't match"
}
},
Expand Down

0 comments on commit b969db0

Please sign in to comment.