jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki 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) { class HaAuthFlow extends EventsMixin(PolymerElement) {
static get template() { static get template() {
return html` return html`
<style>
.action {
margin: 32px 0;
text-align: center;
}
</style>
<template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]"> <template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">
Please wait Please wait
</template> </template>
@ -26,7 +32,9 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
<template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]"> <template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
<ha-form data="{{_stepData}}" schema="[[_step.data_schema]]" error="[[_step.errors]]"></ha-form> <ha-form data="{{_stepData}}" schema="[[_step.data_schema]]" error="[[_step.errors]]"></ha-form>
</template> </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> </template>
`; `;
} }
@ -87,7 +95,7 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
} }
_computeSubmitCaption(stepType) { _computeSubmitCaption(stepType) {
return stepType === 'form' ? 'Submit' : 'Start over'; return stepType === 'form' ? 'Next' : 'Start over';
} }
_handleSubmit() { _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.js';
import '@polymer/paper-item/paper-item-body.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
@ -11,13 +12,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
static get template() { static get template() {
return html` return html`
<style> <style>
:host {
text-align: center;
font-family: Roboto;
}
paper-item { paper-item {
cursor: pointer; cursor: pointer;
} }
p {
margin-top: 0;
}
</style> </style>
<template is="dom-if" if="[[_equal(_state, &quot;loading&quot;)]]"> <template is="dom-if" if="[[_equal(_state, &quot;loading&quot;)]]">
Loading auth providers. Loading auth providers.
@ -29,9 +29,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
Error loading Error loading
</template> </template>
<template is="dom-if" if="[[_equal(_state, &quot;pick&quot;)]]"> <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]]"> <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>
</template> </template>
`; `;

3
src/authorize.html
View File

@ -2,6 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> <title>Home Assistant</title>
<!--EXTRA_SCRIPTS--> <!--EXTRA_SCRIPTS-->
<style> <style>

27
src/entrypoints/authorize.js
View File

@ -15,12 +15,31 @@ class HaAuthorize extends PolymerElement {
return html` return html`
<style include="iron-flex iron-positioning"></style> <style include="iron-flex iron-positioning"></style>
<style> <style>
.layout { .content {
padding-top: 20px; 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> </style>
<div class="layout vertical center fit"> <div class="content layout vertical fit">
<img src="/static/icons/favicon-192x192.png" height="192"> <div class='header'>
<img src="/static/icons/favicon-192x192.png" height="52">
Home Assistant
</div>
<p>Logging in to <b>[[clientId]]</b>.</p> <p>Logging in to <b>[[clientId]]</b>.</p>

3
src/onboarding.html
View File

@ -2,6 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> <title>Home Assistant</title>
<!--EXTRA_SCRIPTS--> <!--EXTRA_SCRIPTS-->
<style> <style>

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

@ -14,20 +14,49 @@ class HaOnboarding extends PolymerElement {
return html` return html`
<style include="iron-flex iron-positioning"></style> <style include="iron-flex iron-positioning"></style>
<style> <style>
.layout { .content {
padding-top: 20px; 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 { .error {
color: red; color: red;
font-weight: bold; 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> .action {
<p><i>It is not possible yet to change your password. Coming soon!</i></p> 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]]'> <template is='dom-if' if='[[_error]]'>
<p class='error'>[[_error]]</p> <p class='error'>[[_error]]</p>
@ -61,8 +90,8 @@ class HaOnboarding extends PolymerElement {
></paper-input> ></paper-input>
<template is='dom-if' if='[[!_loading]]'> <template is='dom-if' if='[[!_loading]]'>
<p> <p class='action'>
<paper-button on-click='_submitForm'>Submit</paper-button> <paper-button raised on-click='_submitForm'>Create Account</paper-button>
</p> </p>
</template> </template>
</div> </div>
@ -96,8 +125,12 @@ class HaOnboarding extends PolymerElement {
} }
_maybePopulateUsername() { _maybePopulateUsername() {
if (!this._username) { if (this._username) return;
this._username = this._name.toLowerCase().replace(/ /g, '');
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; display: block;
} }
a { a {
text-decoration: none;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
</style> </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> <div class='error'>[[_errorMsg]]</div>
</template> </template>
<paper-input <paper-input
autofocus class='name'
label='Name'
value='{{_name}}'
required
auto-validate
error-message='Required'
on-blur='_maybePopulateUsername'
></paper-input>
<paper-input
class='username' class='username'
label='Username' label='Username'
value='{{_username}}' value='{{_username}}'
@ -79,6 +87,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
value: false, value: false,
}, },
_name: String,
_username: String, _username: String,
_password: String, _password: String,
}; };
@ -98,10 +107,21 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
this._dialogClosedCallback = dialogClosedCallback; this._dialogClosedCallback = dialogClosedCallback;
this._loading = false; this._loading = false;
this._opened = true; 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() { async _createUser() {
if (!this._username || !this._password) return; if (!this._name || !this._username || !this._password) return;
this._loading = true; this._loading = true;
this._errorMsg = null; this._errorMsg = null;
@ -111,7 +131,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
try { try {
const userResponse = await this.hass.callWS({ const userResponse = await this.hass.callWS({
type: 'config/auth/create', type: 'config/auth/create',
name: this._username, name: this._name,
}); });
userId = userResponse.user.id; userId = userResponse.user.id;
} catch (err) { } 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; margin: 16px auto;
} }
a { a {
text-decoration: none;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
</style> </style>