@things-factory/auth-ui 7.0.1-alpha.99 → 7.0.1-beta.0

package/client/auth-style-sign.ts

@@ -81,8 +81,8 @@ export const AUTH_STYLE_SIGN = css`
   }
 
   .fingerprint {
-    color: var(--md-sys-color-primary-container);
-    border: 1.5px solid var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    border: 1.5px solid var(--md-sys-color-on-primary-container);
     border-radius: 20%;
     width: 36px;
     height: 36px;

package/client/components/abstract-sign.ts

@@ -58,6 +58,14 @@ export abstract class AbstractSign extends AbstractAuthPage {
           .value=${email}
           autocomplete="username"
           autocapitalize="off"
+          @input=${(e: Event) => {
+            const target = e.target as HTMLInputElement
+            if (target.validity.typeMismatch) {
+              target.setCustomValidity(i18next.t('text.invalid-email'))
+            } else {
+              target.setCustomValidity('')
+            }
+          }}
           ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
         >
       </div>

package/client/components/contact-us.ts

@@ -17,7 +17,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
     return [
       css`
         :host {
-          --md-theme-primary: var(--primary-color);
+          --md-theme-primary: var(--md-sys-color-primary);
         }
 
         * {
@@ -85,7 +85,9 @@ export class ContactUs extends localize(i18next)(LitElement) {
             }}
           ></md-filled-text-field>
         </div>
-        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}>${i18next.t('button.submit')}</md-elevated-button>
+        <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
+          >${i18next.t('button.submit')}</md-elevated-button
+        >
         <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
       </md-dialog>
     `

package/client/components/create-domain-popup.ts

@@ -17,7 +17,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
         overflow: auto;
       }
@@ -45,7 +45,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         font: var(--input-font);
 
         flex: 1;

package/client/components/create-role.ts

@@ -13,7 +13,7 @@ class CreateRole extends localize(i18next)(LitElement) {
   static styles = css`
     :host {
       --md-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
       border-radius: var(--border-radius);
@@ -50,10 +50,20 @@ class CreateRole extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <md-filled-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}></md-filled-text-field>
-      <md-filled-text-field type="text" name="description" label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}></md-filled-text-field>
-
-      <md-outlined-button @click=${this.onCreateRole.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
+      <md-filled-text-field
+        type="text"
+        name="name"
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
+      ></md-filled-text-field>
+      <md-filled-text-field
+        type="text"
+        name="description"
+        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
+      ></md-filled-text-field>
+
+      <md-outlined-button @click=${this.onCreateRole.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `
   }
 

package/client/components/create-user.ts

@@ -8,7 +8,7 @@ class CreateUser extends LitElement {
   static styles = css`
     :host {
       --md-text-field-fill-color: var(--theme-white-color);
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
       border-radius: var(--border-radius);
@@ -45,11 +45,21 @@ class CreateUser extends LitElement {
 
   render() {
     return html`
-      <md-outlined-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}></md-outlined-text-field>
-
-      <md-outlined-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-outlined-text-field>
-
-      <md-outlined-button @click=${this.onCreateUser.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
+      <md-outlined-text-field
+        type="text"
+        name="name"
+        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
+      ></md-outlined-text-field>
+
+      <md-outlined-text-field
+        type="email"
+        name="email"
+        label=${String(i18next.t('field.email'))}
+      ></md-outlined-text-field>
+
+      <md-outlined-button @click=${this.onCreateUser.bind(this)}
+        >${String(i18next.t('button.create'))}</md-outlined-button
+      >
     `
   }
 

package/client/components/delete-user-popup.ts

@@ -27,7 +27,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       input {

package/client/components/domain-switch.ts

@@ -41,7 +41,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
       span,
       select {
         flex: 1;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: bold 14px/20px var(--theme-font);
       }
 

package/client/components/my-login-history.ts

@@ -14,7 +14,7 @@ class MyLoginHistory extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
+      background-color: var(--md-sys-color-background);
       padding: var(--padding-wide);
       overflow: auto;
     }

package/client/components/ownership-transfer-popup.ts

@@ -15,7 +15,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
         overflow: auto;
       }

package/client/components/partner-info-card.ts

@@ -21,7 +21,7 @@ export class PartnerInfoCard extends LitElement {
         display: flex;
         max-height: 45vh;
         flex-direction: row;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
         margin: 0;
         padding: 0;
         border-radius: var(--border-radius);
@@ -31,7 +31,7 @@ export class PartnerInfoCard extends LitElement {
       [field-2column] {
         overflow: auto;
         flex: 1;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
         padding: var(--padding-default);
         border-radius: var(--border-radius);
         display: grid;

package/client/components/partner-role-editor.ts

@@ -21,10 +21,10 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         padding: var(--padding-default);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       md-elevated-button {
@@ -52,7 +52,9 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
 
       <div class="button-container">
         <md-elevated-button @click=${this.onSave}>${i18next.t('button.save')}</md-elevated-button>
-        <md-elevated-button @click=${this.onTerminateContract} danger>${i18next.t('button.terminate contract')}</md-elevated-button>
+        <md-elevated-button @click=${this.onTerminateContract} danger
+          >${i18next.t('button.terminate contract')}</md-elevated-button
+        >
       </div>
     `
   }

package/client/components/profile-component.ts

@@ -19,7 +19,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     css`
       :host {
         display: block;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: 15px 0;
       }
       .wrap {
@@ -53,7 +53,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
         background: url(/assets/images/icon-profile.png) center top no-repeat;
         margin: var(--profile-icon-margin);
         padding: 180px 20px 20px 20px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: var(--header-bar-title);
         text-align: center;
       }
@@ -69,7 +69,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         text-transform: capitalize;
         grid-column: 1;
       }
@@ -101,7 +101,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       footer a {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         text-decoration: none;
         font-weight: bold;
       }

package/client/components/role-privilege-editor.ts

@@ -16,16 +16,16 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       div {
         margin: var(--margin-default);
       }
       ul {
         flex: 1;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
         overflow: auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -53,14 +53,14 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
 
       md-elevated-button {
         margin: 5px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       [danger] {
         --md-theme-primary: var(--md-danger-button-primary-color);
       }
       md-outlined-button {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       @media screen and (max-width: 480px) {

package/client/components/user-role-editor.ts

@@ -26,9 +26,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       ul {
         flex: 1;
@@ -46,7 +46,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
       input[readonly] {
         border: none;
         background-color: transparent;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: var(--input-font);
       }
       li {
@@ -58,7 +58,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
       [detail] md-icon {
         --md-icon-size: var(--fontsize-default);
         vertical-align: middle;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [detail] li {
         display: flex;
@@ -76,7 +76,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
       }
 
       md-outlined-button {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       @media screen and (max-width: 480px) {

package/client/entries/auth/activate.ts

@@ -70,9 +70,9 @@ export class AuthActivate extends localize(i18next)(LitElement) {
 
       md-elevated-button {
         --md-theme-primary: var(--auth-button-background-color);
-        --md-theme-on-primary: var(--primary-color);
+        --md-theme-on-primary: var(--md-sys-color-primary);
         --md-button-horizontal-padding: var(--padding-default);
-        --md-button-ink-color: var(--primary-color);
+        --md-button-ink-color: var(--md-sys-color-primary);
       }
 
       contact-us {

package/client/entries/auth/checkin.ts

@@ -26,7 +26,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         height: 100dvh;
       }
       .header {
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         height: var(--checkin-header-height);
       }
       .content {
@@ -37,7 +37,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       .domains {
         margin: var(--margin-wide) 0;
         padding: 0;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
         border: var(--border-dark-color);
         list-style: none;
@@ -47,7 +47,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin-bottom: -1px;
         padding: var(--padding-default) var(--padding-wide);
         font-size: 18px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-align: left;
 
         cursor: pointer;

package/client/entries/auth/forgot-password.ts

@@ -28,7 +28,6 @@ export class ForgotPassword extends AbstractAuthPage {
     const email = this.data?.email || ''
 
     return html`
-      <input id="email" name="email" type="hidden" required .value=${email} />
       <div class="field">
         <md-filled-text-field
           name="email"
@@ -36,8 +35,13 @@ export class ForgotPassword extends AbstractAuthPage {
           label=${String(i18next.t('label.email'))}
           .value=${email}
           required
-          @input=${e => {
-            this.emailInput.value = e.target.value
+          @input=${(e: Event) => {
+            const target = e.target as HTMLInputElement
+            if (target.validity.typeMismatch) {
+              target.setCustomValidity(i18next.t('text.invalid-email'))
+            } else {
+              target.setCustomValidity('')
+            }
           }}
         ></md-filled-text-field>
       </div>

package/client/entries/auth/result.ts

@@ -61,14 +61,14 @@ export class AuthResult extends localize(i18next)(LitElement) {
         background: url(/assets/images/icon-profile.png) center top no-repeat;
         margin: var(--profile-icon-margin);
         padding: 180px 20px 20px 20px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font: var(--header-bar-title);
         text-align: center;
       }
 
       label {
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       #button-area {
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
@@ -76,9 +76,9 @@ export class AuthResult extends localize(i18next)(LitElement) {
       }
       md-elevated-button {
         --md-theme-primary: var(--auth-button-background-color);
-        --md-theme-on-primary: var(--primary-color);
+        --md-theme-on-primary: var(--md-sys-color-primary);
         --md-button-horizontal-padding: var(--padding-default);
-        --md-button-ink-color: var(--primary-color);
+        --md-button-ink-color: var(--md-sys-color-primary);
       }
       .lottie-container {
         width: 100%;

package/client/entries/auth/signup.ts

@@ -31,7 +31,13 @@ export class AuthSignup extends AbstractSign {
 
     return html`
       <div class="field">
-        <md-filled-text-field name="name" type="text" label=${String(i18next.t('field.name'))} .value=${name} required></md-filled-text-field>
+        <md-filled-text-field
+          name="name"
+          type="text"
+          label=${String(i18next.t('field.name'))}
+          .value=${name}
+          required
+        ></md-filled-text-field>
       </div>
       <div class="field">
         <md-filled-text-field
@@ -40,11 +46,17 @@ export class AuthSignup extends AbstractSign {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
+          autocapitalize="off"
           @input=${(e: Event) => {
-            const target = e.target as HTMLFormElement
-            target.setCustomValidity(i18next.t('text.invalid-email'))
+            const target = e.target as HTMLInputElement
+            if (target.validity.typeMismatch) {
+              target.setCustomValidity(i18next.t('text.invalid-email'))
+            } else {
+              target.setCustomValidity('')
+            }
           }}
-        ></md-filled-text-field>
+          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+        >
       </div>
       <div class="field">
         <md-filled-text-field
@@ -64,7 +76,13 @@ export class AuthSignup extends AbstractSign {
         >
       </div>
       <div class="field">
-        <md-filled-text-field id="confirm-password" name="confirm-password" type="password" label=${String(i18next.t('field.confirm password'))} required>
+        <md-filled-text-field
+          id="confirm-password"
+          name="confirm-password"
+          type="password"
+          label=${String(i18next.t('field.confirm password'))}
+          required
+        >
           ></md-filled-text-field
         >
       </div>

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -19,11 +19,11 @@ class OAuth2DecisionPage extends LitElement {
         display: flex;
         flex-direction: column;
 
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--md-sys-color-primary);
         margin: var(--margin-default);
         padding: var(--padding-default);
         font: normal 15px var(--theme-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [field-2column] {

package/client/pages/app-binding/app-binding.ts

@@ -22,7 +22,7 @@ class AppBinding extends connect(store)(PageView) {
 
         position: relative;
 
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
       h2 {
@@ -70,7 +70,7 @@ class AppBinding extends connect(store)(PageView) {
         max-width: var(--content-container-max-width);
       }
       [fieldset-container] {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         border-radius: var(--border-radius);
@@ -237,7 +237,10 @@ class AppBinding extends connect(store)(PageView) {
                 <input id="access-token" type="text" .value=${this.accessToken || ''} readonly />
                 <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 ${accessTokenExp
-                  ? html`<div input-hint>expired in ${new Date(accessTokenExp).toLocaleString()} : ${asyncReplace(this.expTimer(accessTokenExp))}</div>`
+                  ? html`<div input-hint>
+                      expired in ${new Date(accessTokenExp).toLocaleString()} :
+                      ${asyncReplace(this.expTimer(accessTokenExp))}
+                    </div>`
                   : html``}
               </div>
 
@@ -246,7 +249,10 @@ class AppBinding extends connect(store)(PageView) {
                 <input id="refresh-token" type="text" .value=${binding.refreshToken || ''} readonly />
                 <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 ${refreshTokenExp
-                  ? html`<div input-hint>expired in ${new Date(refreshTokenExp).toLocaleString()} : ${asyncReplace(this.expTimer(refreshTokenExp))}</div>`
+                  ? html`<div input-hint>
+                      expired in ${new Date(refreshTokenExp).toLocaleString()} :
+                      ${asyncReplace(this.expTimer(refreshTokenExp))}
+                    </div>`
                   : html``}
               </div>
             </div>

package/client/pages/app-binding/app-bindings.ts

@@ -11,7 +11,7 @@ class AppBindings extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
 
         overflow: auto;
@@ -62,7 +62,7 @@ class AppBindings extends connect(store)(PageView) {
         color: var(--td-color);
       }
       td a {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
 
         display: block;

package/client/pages/appliance/appliance.ts

@@ -21,7 +21,7 @@ class Appliance extends connect(store)(PageView) {
         flex-direction: column;
         overflow-y: auto;
 
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
       h2 {
@@ -58,7 +58,7 @@ class Appliance extends connect(store)(PageView) {
         max-width: var(--content-container-max-width);
       }
       [fieldset-container] {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         border-radius: var(--border-radius);
@@ -201,10 +201,13 @@ class Appliance extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="access-token">${i18next.t('label.access token')}</label>
                 <input id="access-token" type="text" .value=${appliance.accessToken} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>${i18next.t('button.copy')}</button>
+                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
+                  ${i18next.t('button.copy')}
+                </button>
                 ${accessTokenExp
                   ? html`<div input-hint>
-                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} : ${asyncReplace(this.expTimer(accessTokenExp))}
+                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :
+                      ${asyncReplace(this.expTimer(accessTokenExp))}
                     </div>`
                   : html``}
               </div>
@@ -213,7 +216,9 @@ class Appliance extends connect(store)(PageView) {
         </div>
 
         <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>
-        <button @click=${this.generateApplianceSecret.bind(this)}>${i18next.t('button.generate new access token')}</button>
+        <button @click=${this.generateApplianceSecret.bind(this)}>
+          ${i18next.t('button.generate new access token')}
+        </button>
         <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>
       </form>
     `

package/client/pages/appliance/home.ts

@@ -11,7 +11,7 @@ class Appliances extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
 
         overflow: auto;
@@ -96,8 +96,8 @@ class Appliances extends connect(store)(PageView) {
       <div>
         <h2>Registered Appliances</h2>
         <p page-description>
-          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building for. The appliance type can’t be changed after
-          it’s created.
+          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building
+          for. The appliance type can’t be changed after it’s created.
         </p>
         <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>
       </div>

package/client/pages/appliance/register.ts

@@ -12,7 +12,7 @@ class ApplianceRegister extends connect(store)(PageView) {
     return [
       css`
         :host {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           padding: var(--padding-wide);
 
           display: flex;
@@ -34,7 +34,7 @@ class ApplianceRegister extends connect(store)(PageView) {
         }
 
         [form-container] {
-          background-color: var(--theme-white-color);
+          background-color: var(--md-sys-color-surface);
           padding: var(--padding-wide);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);