mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +00:00
Update design of login page (#18770)
This commit is contained in:
Bram Kragten
GitHub
parent
31c91cea9a
commit
2e1fb9df66
@ -8,7 +8,14 @@ import "../components/ha-alert";
|
||||
import "../components/ha-checkbox";
|
||||
import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
|
||||
import "../components/ha-formfield";
|
||||
import { AuthProvider, autocompleteLoginFields } from "../data/auth";
|
||||
import {
|
||||
AuthProvider,
|
||||
autocompleteLoginFields,
|
||||
createLoginFlow,
|
||||
deleteLoginFlow,
|
||||
redirectWithAuthCode,
|
||||
submitLoginFlow,
|
||||
} from "../data/auth";
|
||||
import {
|
||||
DataEntryFlowStep,
|
||||
DataEntryFlowStepForm,
|
||||
@ -86,6 +93,25 @@ export class HaAuthFlow extends LitElement {
|
||||
margin-top: 10px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
a.forgot-password {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
form {
|
||||
text-align: center;
|
||||
max-width: 336px;
|
||||
width: 100%;
|
||||
}
|
||||
ha-auth-form {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
<form>${this._renderForm()}</form>
|
||||
`;
|
||||
@ -189,6 +215,11 @@ export class HaAuthFlow extends LitElement {
|
||||
`;
|
||||
case "form":
|
||||
return html`
|
||||
<h1>
|
||||
${!["select_mfa_module", "mfa"].includes(step.step_id)
|
||||
? this.localize("ui.panel.page-authorize.welcome_home")
|
||||
: this.localize("ui.panel.page-authorize.just_checking")}
|
||||
</h1>
|
||||
${this._computeStepDescription(step)}
|
||||
<ha-auth-form
|
||||
.data=${this._stepData}
|
||||
@ -202,15 +233,28 @@ export class HaAuthFlow extends LitElement {
|
||||
${this.clientId === genClientId() &&
|
||||
!["select_mfa_module", "mfa"].includes(step.step_id)
|
||||
? html`
|
||||
<div class="space-between">
|
||||
<ha-formfield
|
||||
class="store-token"
|
||||
.label=${this.localize("ui.panel.page-authorize.store_token")}
|
||||
.label=${this.localize(
|
||||
"ui.panel.page-authorize.store_token"
|
||||
)}
|
||||
>
|
||||
<ha-checkbox
|
||||
.checked=${this.storeToken}
|
||||
@change=${this._storeTokenChanged}
|
||||
></ha-checkbox>
|
||||
</ha-formfield>
|
||||
<a
|
||||
class="forgot-password"
|
||||
href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>${this.localize(
|
||||
"ui.panel.page-authorize.forgot_password"
|
||||
)}</a
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
`;
|
||||
@ -225,10 +269,7 @@ export class HaAuthFlow extends LitElement {
|
||||
|
||||
private async _providerChanged(newProvider?: AuthProvider) {
|
||||
if (this.step && this.step.type === "form") {
|
||||
fetch(`/auth/login_flow/${this.step.flow_id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "same-origin",
|
||||
}).catch((err) => {
|
||||
deleteLoginFlow(this.step.flow_id).catch((err) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Error delete obsoleted auth flow", err);
|
||||
});
|
||||
@ -243,22 +284,21 @@ export class HaAuthFlow extends LitElement {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/auth/login_flow", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify({
|
||||
client_id: this.clientId,
|
||||
handler: [newProvider.type, newProvider.id],
|
||||
redirect_uri: this.redirectUri,
|
||||
}),
|
||||
});
|
||||
const response = await createLoginFlow(this.clientId, this.redirectUri, [
|
||||
newProvider.type,
|
||||
newProvider.id,
|
||||
]);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// allow auth provider bypass the login form
|
||||
if (data.type === "create_entry") {
|
||||
this._redirect(data.result);
|
||||
redirectWithAuthCode(
|
||||
this.redirectUri!,
|
||||
data.result,
|
||||
this.oauth2State
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -276,27 +316,6 @@ export class HaAuthFlow extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private _redirect(authCode: string) {
|
||||
// OAuth 2: 3.1.2 we need to retain query component of a redirect URI
|
||||
let url = this.redirectUri!;
|
||||
if (!url.includes("?")) {
|
||||
url += "?";
|
||||
} else if (!url.endsWith("&")) {
|
||||
url += "&";
|
||||
}
|
||||
|
||||
url += `code=${encodeURIComponent(authCode)}`;
|
||||
|
||||
if (this.oauth2State) {
|
||||
url += `&state=${encodeURIComponent(this.oauth2State)}`;
|
||||
}
|
||||
if (this.storeToken) {
|
||||
url += `&storeToken=true`;
|
||||
}
|
||||
|
||||
document.location.assign(url);
|
||||
}
|
||||
|
||||
private _stepDataChanged(ev: CustomEvent) {
|
||||
this._stepData = ev.detail.value;
|
||||
}
|
||||
@ -345,11 +364,7 @@ export class HaAuthFlow extends LitElement {
|
||||
const postData = { ...this._stepData, client_id: this.clientId };
|
||||
|
||||
try {
|
||||
const response = await fetch(`/auth/login_flow/${this.step.flow_id}`, {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
const response = await submitLoginFlow(this.step.flow_id, postData);
|
||||
|
||||
const newStep = await response.json();
|
||||
|
||||
@ -360,7 +375,11 @@ export class HaAuthFlow extends LitElement {
|
||||
}
|
||||
|
||||
if (newStep.type === "create_entry") {
|
||||
this._redirect(newStep.result);
|
||||
redirectWithAuthCode(
|
||||
this.redirectUri!,
|
||||
newStep.result,
|
||||
this.oauth2State
|
||||
);
|
||||
return;
|
||||
}
|
||||
this.step = newStep;
|
||||
|
||||
@ -5,6 +5,7 @@ import punycode from "punycode";
|
||||
import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
|
||||
import { extractSearchParamsObject } from "../common/url/search-params";
|
||||
import "../components/ha-alert";
|
||||
import "../components/ha-language-picker";
|
||||
import {
|
||||
AuthProvider,
|
||||
AuthUrlSearchParams,
|
||||
@ -71,19 +72,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
`;
|
||||
}
|
||||
|
||||
if (!this._authProviders) {
|
||||
return html`
|
||||
<style>
|
||||
ha-authorize p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
<p>${this.localize("ui.panel.page-authorize.initializing")}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
const inactiveProviders = this._authProviders.filter(
|
||||
const inactiveProviders = this._authProviders?.filter(
|
||||
(prv) => prv !== this._authProvider
|
||||
);
|
||||
|
||||
@ -92,13 +81,16 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
return html`
|
||||
<style>
|
||||
ha-pick-auth-provider {
|
||||
display: block;
|
||||
margin-top: 48px;
|
||||
}
|
||||
ha-auth-flow {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
ha-auth-flow,
|
||||
ha-local-auth-flow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
ha-alert {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
@ -107,6 +99,55 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.card-content {
|
||||
background: var(
|
||||
--ha-card-background,
|
||||
var(--card-background-color, white)
|
||||
);
|
||||
box-shadow: var(--ha-card-box-shadow, none);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--ha-card-border-radius, 12px);
|
||||
border-width: var(--ha-card-border-width, 1px);
|
||||
border-style: solid;
|
||||
border-color: var(
|
||||
--ha-card-border-color,
|
||||
var(--divider-color, #e0e0e0)
|
||||
);
|
||||
color: var(--primary-text-color);
|
||||
transition: all 0.3s ease-out;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
ha-language-picker {
|
||||
width: 200px;
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
--ha-select-height: 40px;
|
||||
--mdc-select-fill-color: none;
|
||||
--mdc-select-label-ink-color: var(--primary-text-color, #212121);
|
||||
--mdc-select-ink-color: var(--primary-text-color, #212121);
|
||||
--mdc-select-idle-line-color: transparent;
|
||||
--mdc-select-hover-line-color: transparent;
|
||||
--mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
|
||||
--mdc-shape-small: 0;
|
||||
}
|
||||
.footer a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
margin-right: 16px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
${!this._ownInstance
|
||||
@ -123,8 +164,14 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
>`,
|
||||
})}
|
||||
</ha-alert>`
|
||||
: html`<p>${this.localize("ui.panel.page-authorize.authorizing")}</p>`}
|
||||
${!this._forceDefaultLogin &&
|
||||
: nothing}
|
||||
|
||||
<div class="card-content">
|
||||
${!this._authProvider
|
||||
? html`<p>
|
||||
${this.localize("ui.panel.page-authorize.initializing")}
|
||||
</p> `
|
||||
: !this._forceDefaultLogin &&
|
||||
this._authProvider!.users &&
|
||||
this.clientId != null &&
|
||||
this.redirectUri != null
|
||||
@ -137,21 +184,14 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
.localize=${this.localize}
|
||||
@default-login-flow=${this._handleDefaultLoginFlow}
|
||||
></ha-local-auth-flow>`
|
||||
: html`${inactiveProviders.length > 0
|
||||
? html`<p>
|
||||
${this.localize("ui.panel.page-authorize.logging_in_with", {
|
||||
authProviderName: html`<b>${this._authProvider!.name}</b>`,
|
||||
})}
|
||||
</p>`
|
||||
: nothing}
|
||||
<ha-auth-flow
|
||||
: html`<ha-auth-flow
|
||||
.clientId=${this.clientId}
|
||||
.redirectUri=${this.redirectUri}
|
||||
.oauth2State=${this.oauth2State}
|
||||
.authProvider=${this._authProvider}
|
||||
.localize=${this.localize}
|
||||
></ha-auth-flow>
|
||||
${inactiveProviders.length > 0
|
||||
${inactiveProviders!.length > 0
|
||||
? html`
|
||||
<ha-pick-auth-provider
|
||||
.localize=${this.localize}
|
||||
@ -161,6 +201,21 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
></ha-pick-auth-provider>
|
||||
`
|
||||
: ""}`}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<ha-language-picker
|
||||
.value=${this.language}
|
||||
.label=${""}
|
||||
nativeName
|
||||
@value-changed=${this._languageChanged}
|
||||
></ha-language-picker>
|
||||
<a
|
||||
href="https://www.home-assistant.io/docs/authentication/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>${this.localize("ui.panel.page-authorize.help")}</a
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -266,4 +321,15 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
||||
private async _handleAuthProviderPick(ev) {
|
||||
this._authProvider = ev.detail;
|
||||
}
|
||||
|
||||
private _languageChanged(ev: CustomEvent) {
|
||||
const language = ev.detail.value;
|
||||
this.language = language;
|
||||
|
||||
try {
|
||||
localStorage.setItem("selectedLanguage", JSON.stringify(language));
|
||||
} catch (err: any) {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
/* eslint-disable lit/prefer-static-styles */
|
||||
import "@material/mwc-button";
|
||||
import { mdiEye, mdiEyeOff } from "@mdi/js";
|
||||
import { html, LitElement, nothing, PropertyValues } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { LocalizeFunc } from "../common/translations/localize";
|
||||
import "../components/ha-alert";
|
||||
import "../components/ha-button";
|
||||
import "../components/ha-icon-button";
|
||||
import "../components/user/ha-person-badge";
|
||||
import { AuthProvider } from "../data/auth";
|
||||
import {
|
||||
AuthProvider,
|
||||
createLoginFlow,
|
||||
deleteLoginFlow,
|
||||
redirectWithAuthCode,
|
||||
submitLoginFlow,
|
||||
} from "../data/auth";
|
||||
import { DataEntryFlowStep } from "../data/data_entry_flow";
|
||||
import { listPersons } from "../data/person";
|
||||
import "./ha-auth-textfield";
|
||||
import type { HaAuthTextField } from "./ha-auth-textfield";
|
||||
import { DataEntryFlowStep } from "../data/data_entry_flow";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
@customElement("ha-local-auth-flow")
|
||||
export class HaLocalAuthFlow extends LitElement {
|
||||
@ -24,6 +33,8 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
|
||||
@property() public oauth2State?: string;
|
||||
|
||||
@property({ type: Boolean }) public ownInstance = false;
|
||||
|
||||
@property() public localize!: LocalizeFunc;
|
||||
|
||||
@state() private _error?: string;
|
||||
@ -36,6 +47,8 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
|
||||
@state() private _selectedUser?: string;
|
||||
|
||||
@state() private _unmaskedPassword = false;
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
@ -52,43 +65,122 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
if (!this.authProvider?.users || !this._persons) {
|
||||
return nothing;
|
||||
}
|
||||
const userIds = Object.keys(this.authProvider.users);
|
||||
return html`
|
||||
<style>
|
||||
.content {
|
||||
max-width: 560px;
|
||||
}
|
||||
.persons {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
.persons.force-small {
|
||||
max-width: 350px;
|
||||
}
|
||||
.person {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
}
|
||||
.person[role="button"] {
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.person[role="button"]:focus-visible {
|
||||
background: rgba(var(--rgb-primary-color), 0.1);
|
||||
}
|
||||
.person p {
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
ha-person-badge {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
--person-badge-font-size: 3em;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
--person-badge-font-size: 2em;
|
||||
}
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
ha-auth-textfield {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
}
|
||||
ha-auth-textfield ha-icon-button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
z-index: 9;
|
||||
}
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 336px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.login-form .person {
|
||||
cursor: default;
|
||||
width: auto;
|
||||
}
|
||||
.login-form ha-auth-textfield {
|
||||
margin-top: 16px;
|
||||
.login-form .person p {
|
||||
font-size: 28px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 32px;
|
||||
line-height: normal;
|
||||
}
|
||||
.login-form ha-person-badge {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
--person-badge-font-size: 3em;
|
||||
}
|
||||
.action {
|
||||
margin: 24px 0 8px;
|
||||
text-align: center;
|
||||
margin: 16px 0 8px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 336px;
|
||||
justify-content: center;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
ha-list-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
ha-button {
|
||||
--mdc-typography-button-text-transform: none;
|
||||
}
|
||||
a.forgot-password {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
button {
|
||||
color: var(--primary-color);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button:focus-visible {
|
||||
background: rgba(var(--rgb-primary-color), 0.1);
|
||||
}
|
||||
</style>
|
||||
${this._error
|
||||
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
|
||||
@ -117,11 +209,39 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
.value=${this.authProvider.users[this._selectedUser]}
|
||||
/>
|
||||
<ha-auth-textfield
|
||||
type="password"
|
||||
.type=${this._unmaskedPassword ? "text" : "password"}
|
||||
id="password"
|
||||
></ha-auth-textfield>
|
||||
name="password"
|
||||
.label=${this.localize(
|
||||
"ui.panel.page-authorize.form.providers.homeassistant.step.init.data.password"
|
||||
)}
|
||||
required
|
||||
autoValidate
|
||||
autocomplete
|
||||
iconTrailing
|
||||
validationMessage="Required"
|
||||
>
|
||||
<ha-icon-button
|
||||
toggles
|
||||
.label=${
|
||||
this.localize(
|
||||
this._unmaskedPassword
|
||||
? "ui.panel.page-authorize.form.hide_password"
|
||||
: "ui.panel.page-authorize.form.show_password"
|
||||
) || (this._unmaskedPassword ? "Hide password" : "Show password")
|
||||
}
|
||||
@click=${this._toggleUnmaskedPassword}
|
||||
.path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
|
||||
></ha-icon-button>
|
||||
</ha-auth-textfield>
|
||||
</div>
|
||||
<div class="action">
|
||||
<div class="action space-between">
|
||||
<mwc-button
|
||||
@click=${this._restart}
|
||||
.disabled=${this._submitting}
|
||||
>
|
||||
${this.localize("ui.panel.page-authorize.form.previous")}
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
raised
|
||||
@click=${this._handleSubmit}
|
||||
@ -130,24 +250,48 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
${this.localize("ui.panel.page-authorize.form.next")}
|
||||
</mwc-button>
|
||||
</div>
|
||||
<div class="action">
|
||||
<a class="forgot-password"
|
||||
href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>${this.localize(
|
||||
"ui.panel.page-authorize.forgot_password"
|
||||
)}</a
|
||||
>
|
||||
</div>
|
||||
</form>`
|
||||
: html`<div class="persons">
|
||||
${Object.keys(this.authProvider.users).map((userId) => {
|
||||
: html`<h1>
|
||||
${this.localize("ui.panel.page-authorize.welcome_home")}
|
||||
</h1>
|
||||
<p>
|
||||
${this.localize("ui.panel.page-authorize.who_is_logging_in")}
|
||||
</p>
|
||||
<div
|
||||
class="persons ${userIds.length < 10 && userIds.length % 4 === 1
|
||||
? "force-small"
|
||||
: ""}"
|
||||
>
|
||||
${userIds.map((userId) => {
|
||||
const person = this._persons![userId];
|
||||
return html`<div
|
||||
class="person"
|
||||
.userId=${userId}
|
||||
@click=${this._personSelected}
|
||||
@keyup=${this._handleKeyUp}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<ha-person-badge .person=${person}></ha-person-badge>
|
||||
<p>${person.name}</p>
|
||||
</div>`;
|
||||
})}
|
||||
</div>
|
||||
<ha-list-item hasMeta role="button" @click=${this._otherLogin}>
|
||||
Other options
|
||||
<ha-icon-next slot="meta"></ha-icon-next>
|
||||
</ha-list-item>`}
|
||||
<div class="action">
|
||||
<button @click=${this._otherLogin} tabindex="0">
|
||||
${this.localize("ui.panel.page-authorize.other_options")}
|
||||
</button>
|
||||
</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -176,24 +320,41 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
this._persons = await (await listPersons()).json();
|
||||
}
|
||||
|
||||
private _restart() {
|
||||
this._selectedUser = undefined;
|
||||
}
|
||||
|
||||
private _toggleUnmaskedPassword() {
|
||||
this._unmaskedPassword = !this._unmaskedPassword;
|
||||
}
|
||||
|
||||
private _handleKeyUp(ev: KeyboardEvent) {
|
||||
if (ev.key === "Enter" || ev.key === " ") {
|
||||
this._personSelected(ev);
|
||||
}
|
||||
}
|
||||
|
||||
private async _personSelected(ev) {
|
||||
const userId = ev.currentTarget.userId;
|
||||
if (this.authProviders?.find((prv) => prv.type === "trusted_networks")) {
|
||||
if (
|
||||
this.ownInstance &&
|
||||
this.authProviders?.find((prv) => prv.type === "trusted_networks")
|
||||
) {
|
||||
try {
|
||||
const flowResponse = await fetch("/auth/login_flow", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify({
|
||||
client_id: this.clientId,
|
||||
handler: ["trusted_networks", null],
|
||||
redirect_uri: this.redirectUri,
|
||||
}),
|
||||
});
|
||||
const flowResponse = await createLoginFlow(
|
||||
this.clientId,
|
||||
this.redirectUri,
|
||||
["trusted_networks", null]
|
||||
);
|
||||
|
||||
const data = await flowResponse.json();
|
||||
|
||||
if (data.type === "create_entry") {
|
||||
this._redirect(data.result);
|
||||
redirectWithAuthCode(
|
||||
this.redirectUri!,
|
||||
data.result,
|
||||
this.oauth2State
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -204,27 +365,24 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
|
||||
const postData = { user: userId, client_id: this.clientId };
|
||||
|
||||
const response = await fetch(`/auth/login_flow/${data.flow_id}`, {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
const response = await submitLoginFlow(data.flow_id, postData);
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
|
||||
if (result.type === "create_entry") {
|
||||
this._redirect(result.result);
|
||||
redirectWithAuthCode(
|
||||
this.redirectUri!,
|
||||
result.result,
|
||||
this.oauth2State
|
||||
);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
throw new Error("Invalid response");
|
||||
}
|
||||
} catch {
|
||||
fetch(`/auth/login_flow/${data.flow_id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "same-origin",
|
||||
}).catch((err) => {
|
||||
deleteLoginFlow(data.flow_id).catch((err) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Error delete obsoleted auth flow", err);
|
||||
});
|
||||
@ -243,17 +401,14 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
return;
|
||||
}
|
||||
|
||||
this._error = undefined;
|
||||
this._submitting = true;
|
||||
|
||||
const flowResponse = await fetch("/auth/login_flow", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify({
|
||||
client_id: this.clientId,
|
||||
handler: ["homeassistant", null],
|
||||
redirect_uri: this.redirectUri,
|
||||
}),
|
||||
});
|
||||
const flowResponse = await createLoginFlow(
|
||||
this.clientId,
|
||||
this.redirectUri,
|
||||
["homeassistant", null]
|
||||
);
|
||||
|
||||
const data = await flowResponse.json();
|
||||
|
||||
@ -265,11 +420,7 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`/auth/login_flow/${data.flow_id}`, {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
const response = await submitLoginFlow(data.flow_id, postData);
|
||||
|
||||
const newStep = await response.json();
|
||||
|
||||
@ -279,7 +430,11 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
}
|
||||
|
||||
if (newStep.type === "create_entry") {
|
||||
this._redirect(newStep.result);
|
||||
redirectWithAuthCode(
|
||||
this.redirectUri!,
|
||||
newStep.result,
|
||||
this.oauth2State
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -287,38 +442,25 @@ export class HaLocalAuthFlow extends LitElement {
|
||||
this._error = this.localize(
|
||||
`ui.panel.page-authorize.form.providers.homeassistant.error.${newStep.errors.base}`
|
||||
);
|
||||
return;
|
||||
throw new Error(this._error);
|
||||
}
|
||||
|
||||
this._step = newStep;
|
||||
} catch (err: any) {
|
||||
} catch {
|
||||
deleteLoginFlow(data.flow_id).catch((err) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Error submitting step", err);
|
||||
this._error = this.localize("ui.panel.page-authorize.form.unknown_error");
|
||||
console.error("Error delete obsoleted auth flow", err);
|
||||
});
|
||||
if (!this._error) {
|
||||
this._error = this.localize(
|
||||
"ui.panel.page-authorize.form.unknown_error"
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
this._submitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
private _redirect(authCode: string) {
|
||||
// OAuth 2: 3.1.2 we need to retain query component of a redirect URI
|
||||
let url = this.redirectUri!;
|
||||
if (!url.includes("?")) {
|
||||
url += "?";
|
||||
} else if (!url.endsWith("&")) {
|
||||
url += "&";
|
||||
}
|
||||
|
||||
url += `code=${encodeURIComponent(authCode)}`;
|
||||
|
||||
if (this.oauth2State) {
|
||||
url += `&state=${encodeURIComponent(this.oauth2State)}`;
|
||||
}
|
||||
url += `&storeToken=true`;
|
||||
|
||||
document.location.assign(url);
|
||||
}
|
||||
|
||||
private _otherLogin() {
|
||||
fireEvent(this, "default-login-flow");
|
||||
}
|
||||
|
||||
@ -21,7 +21,11 @@ export class HaPickAuthProvider extends LitElement {
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
|
||||
<h3>
|
||||
<span
|
||||
>${this.localize("ui.panel.page-authorize.pick_auth_provider")}</span
|
||||
>
|
||||
</h3>
|
||||
<mwc-list>
|
||||
${this.authProviders.map(
|
||||
(provider) => html`
|
||||
@ -45,12 +49,34 @@ export class HaPickAuthProvider extends LitElement {
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
p {
|
||||
margin-top: 0;
|
||||
h3 {
|
||||
margin: 0 -16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
h3:before {
|
||||
border-top: 1px solid var(--divider-color);
|
||||
content: "";
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
h3 span {
|
||||
background: var(--card-background-color);
|
||||
padding: 0 15px;
|
||||
}
|
||||
mwc-list {
|
||||
margin: 0 -16px;
|
||||
--mdc-list-side-padding: 16px;
|
||||
margin: 16px -16px 0;
|
||||
--mdc-list-side-padding: 24px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -49,6 +49,56 @@ export const fetchAuthProviders = () =>
|
||||
credentials: "same-origin",
|
||||
});
|
||||
|
||||
export const createLoginFlow = (
|
||||
client_id: string | undefined,
|
||||
redirect_uri: string | undefined,
|
||||
handler: (string | null)[]
|
||||
) =>
|
||||
fetch("/auth/login_flow", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify({
|
||||
client_id,
|
||||
handler,
|
||||
redirect_uri,
|
||||
}),
|
||||
});
|
||||
|
||||
export const submitLoginFlow = (flow_id: string, data: Record<string, any>) =>
|
||||
fetch(`/auth/login_flow/${flow_id}`, {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
export const deleteLoginFlow = (flow_id) =>
|
||||
fetch(`/auth/login_flow/${flow_id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "same-origin",
|
||||
});
|
||||
|
||||
export const redirectWithAuthCode = (
|
||||
url: string,
|
||||
authCode: string,
|
||||
oauth2State: string | undefined
|
||||
) => {
|
||||
// OAuth 2: 3.1.2 we need to retain query component of a redirect URI
|
||||
if (!url.includes("?")) {
|
||||
url += "?";
|
||||
} else if (!url.endsWith("&")) {
|
||||
url += "&";
|
||||
}
|
||||
|
||||
url += `code=${encodeURIComponent(authCode)}`;
|
||||
|
||||
if (oauth2State) {
|
||||
url += `&state=${encodeURIComponent(oauth2State)}`;
|
||||
}
|
||||
url += `&storeToken=true`;
|
||||
|
||||
document.location.assign(url);
|
||||
};
|
||||
|
||||
export const createAuthForUser = async (
|
||||
hass: HomeAssistant,
|
||||
userId: string,
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5579,16 +5579,24 @@
|
||||
"authorizing": "Log in to your Home Assistant instance",
|
||||
"authorizing_app": "You're about to give the Home Assistant Companion app for {app} access to your Home Assistant instance.",
|
||||
"authorizing_client": "You're about to give {clientId} access to your Home Assistant instance.",
|
||||
"logging_in_with": "Logging in with {authProviderName}.",
|
||||
"pick_auth_provider": "Or log in with",
|
||||
"abort_intro": "Login aborted",
|
||||
"store_token": "Keep me logged in",
|
||||
"help": "Help",
|
||||
"welcome_home": "Welcome home!",
|
||||
"just_checking": "Just checking",
|
||||
"who_is_logging_in": "Who is logging in?",
|
||||
"other_options": "Other login options",
|
||||
"forgot_password": "Forgot password?",
|
||||
"form": {
|
||||
"working": "Please wait",
|
||||
"unknown_error": "Something went wrong",
|
||||
"next": "Log in",
|
||||
"previous": "Previous",
|
||||
"start_over": "Start over",
|
||||
"error": "Error: {error}",
|
||||
"hide_password": "Hide password",
|
||||
"show_password": "Show password",
|
||||
"providers": {
|
||||
"command_line": {
|
||||
"step": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user