github/ha-frontend
1
Fork 0
mirror of https://github.com/home-assistant/frontend synced 2024-09-25 09:39:00 +02:00
Code Releases Activity

Tweaks to user flow (#1473)

Browse Source 
* Tweaks to user flow

* Mobile layout

* Final tweaks
This commit is contained in:
Paulus Schoutsen 2018-07-19 10:51:00 +02:00 committed by GitHub
parent 708447b6f1
commit 964c028c72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 117 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/auth/ha-auth-flow.js
View File

@ -10,6 +10,12 @@ import EventsMixin from '../mixins/events-mixin.js';
class HaAuthFlow extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style>
.action {
margin: 32px 0;
text-align: center;
}
</style>
<template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">
Please wait
</template>
@ -26,7 +32,9 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
<template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
<ha-form data="{{_stepData}}" schema="[[_step.data_schema]]" error="[[_step.errors]]"></ha-form>
</template>
<paper-button on-click="_handleSubmit">[[_computeSubmitCaption(_step.type)]]</paper-button>
<div class='action'>
<paper-button raised on-click="_handleSubmit">[[_computeSubmitCaption(_step.type)]]</paper-button>
</div>
</template>
`;
}
@ -87,7 +95,7 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
}
_computeSubmitCaption(stepType) {
return stepType === 'form' ? 'Submit' : 'Start over';
return stepType === 'form' ? 'Next' : 'Start over';
}
_handleSubmit() {

15
src/auth/ha-pick-auth-provider.js
View File

@ -1,4 +1,5 @@
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-item/paper-item-body.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
@ -11,13 +12,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style>
:host {
text-align: center;
font-family: Roboto;
}
paper-item {
cursor: pointer;
}
p {
margin-top: 0;
}
</style>
<template is="dom-if" if="[[_equal(_state, &quot;loading&quot;)]]">
Loading auth providers.
@ -29,9 +29,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
Error loading
</template>
<template is="dom-if" if="[[_equal(_state, &quot;pick&quot;)]]">
<p>Log in with</p>
<p>Pick an auth provider to log in with:</p>
<template is="dom-repeat" items="[[authProviders]]">
<paper-item on-click="_handlePick">[[item.name]]</paper-item>
<paper-item on-click="_handlePick">
<paper-item-body>[[item.name]]</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</template>
</template>
`;

3
src/authorize.html
View File

@ -2,6 +2,9 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, user-scalable=no'>
<link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
<link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
<title>Home Assistant</title>
<!--EXTRA_SCRIPTS-->
<style>

27
src/entrypoints/authorize.js
View File

@ -15,12 +15,31 @@ class HaAuthorize extends PolymerElement {
return html`
<style include="iron-flex iron-positioning"></style>
<style>
.layout {
padding-top: 20px;
.content {
padding: 20px 16px;
max-width: 360px;
margin: 0 auto;
}
.header {
text-align: center;
font-size: 1.96em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
}
.header img {
margin-right: 16px;
}
</style>
<div class="layout vertical center fit">
<img src="/static/icons/favicon-192x192.png" height="192">
<div class="content layout vertical fit">
<div class='header'>
<img src="/static/icons/favicon-192x192.png" height="52">
Home Assistant
</div>
<p>Logging in to <b>[[clientId]]</b>.</p>

3
src/onboarding.html
View File

@ -2,6 +2,9 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, user-scalable=no'>
<link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
<link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
<title>Home Assistant</title>
<!--EXTRA_SCRIPTS-->
<style>

55
src/onboarding/ha-onboarding.js
View File

@ -14,20 +14,49 @@ class HaOnboarding extends PolymerElement {
return html`
<style include="iron-flex iron-positioning"></style>
<style>
.layout {
padding-top: 20px;
.content {
padding: 20px 16px;
max-width: 400px;
margin: 0 auto;
}
.header {
text-align: center;
font-size: 1.96em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
}
.header img {
margin-right: 16px;
}
h1 {
font-size: 1.2em;
}
.error {
color: red;
font-weight: bold;
}
</style>
<div class="layout vertical center fit">
<img src="/static/icons/favicon-192x192.png" height="192">
<p>Create your owner user account.</p>
<p><i>It is not possible yet to change your password. Coming soon!</i></p>
.action {
margin: 32px 0;
text-align: center;
}
</style>
<div class="content layout vertical fit">
<div class='header'>
<img src="/static/icons/favicon-192x192.png" height="52">
Home Assistant
</div>
<div>
<p>Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?</p>
<p>Let's get started by creating a user account.</p>
</div>
<template is='dom-if' if='[[_error]]'>
<p class='error'>[[_error]]</p>
@ -61,8 +90,8 @@ class HaOnboarding extends PolymerElement {
></paper-input>
<template is='dom-if' if='[[!_loading]]'>
<p>
<paper-button on-click='_submitForm'>Submit</paper-button>
<p class='action'>
<paper-button raised on-click='_submitForm'>Create Account</paper-button>
</p>
</template>
</div>
@ -96,8 +125,12 @@ class HaOnboarding extends PolymerElement {
}
_maybePopulateUsername() {
if (!this._username) {
this._username = this._name.toLowerCase().replace(/ /g, '');
if (this._username) return;
const parts = this._name.split(' ');
if (parts.length) {
this._username = parts[0].toLowerCase();
}
}

1
src/panels/config/dashboard/ha-config-users-menu.js
View File

@ -18,6 +18,7 @@ class HaConfigUsersMenu extends LocalizeMixin(PolymerElement) {
display: block;
}
a {
text-decoration: none;
color: var(--primary-text-color);
}
</style>

26
src/panels/config/users/ha-dialog-add-user.js
View File

@ -32,7 +32,15 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
<div class='error'>[[_errorMsg]]</div>
</template>
<paper-input
autofocus
class='name'
label='Name'
value='{{_name}}'
required
auto-validate
error-message='Required'
on-blur='_maybePopulateUsername'
></paper-input>
<paper-input
class='username'
label='Username'
value='{{_username}}'
@ -79,6 +87,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
value: false,
},
_name: String,
_username: String,
_password: String,
};
@ -98,10 +107,21 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
this._dialogClosedCallback = dialogClosedCallback;
this._loading = false;
this._opened = true;
setTimeout(() => this.shadowRoot.querySelector('paper-input').focus(), 0);
}
_maybePopulateUsername() {
if (this._username) return;
const parts = this._name.split(' ');
if (parts.length) {
this._username = parts[0].toLowerCase();
}
}
async _createUser() {
if (!this._username || !this._password) return;
if (!this._name || !this._username || !this._password) return;
this._loading = true;
this._errorMsg = null;
@ -111,7 +131,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
try {
const userResponse = await this.hass.callWS({
type: 'config/auth/create',
name: this._username,
name: this._name,
});
userId = userResponse.user.id;
} catch (err) {

1
src/panels/config/users/ha-user-picker.js
View File

@ -38,6 +38,7 @@ class HaUserPicker extends EventsMixin(NavigateMixin(LocalizeMixin(PolymerElemen
margin: 16px auto;
}
a {
text-decoration: none;
color: var(--primary-text-color);
}
</style>