@things-factory/auth-ui 7.0.1-alpha.88 → 7.0.1-alpha.90

package/client/entries/auth/checkin.ts

@@ -1,5 +1,6 @@
-import '@material/mwc-button'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import '@operato/lottie-player'
 
 import { css, html, LitElement } from 'lit'
@@ -59,7 +60,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         font: normal var(--fontsize-default) var(--theme-font);
         color: var(--secondary-text-color);
       }
-      li mwc-icon {
+      li md-icon {
         float: right;
         margin: 2px 0 0 0;
         opacity: 0.5;
@@ -67,12 +68,12 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       .button-container {
         text-align: center;
       }
-      .button-container mwc-button {
+      .button-container md-elevated-button {
         margin-left: var(--margin-narrow);
       }
 
       @media (max-width: 450px) {
-        .button-container mwc-button {
+        .button-container md-elevated-button {
           width: 100%;
           margin: var(--margin-default) 0 0 0;
         }
@@ -93,7 +94,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
     var { icon, title, description } = this.applicationMeta
 
     return html`
-      <div class="content">
+      <div class="content md-typescale-display-medium">
         <div class="wrap">
           <div class="auth-brand">
             <img src=${icon || ''} />
@@ -110,11 +111,9 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
                     domain => html`
                       <li
                         @click=${() =>
-                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(
-                            this.redirectTo || '/'
-                          )}`)}
+                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
                       >
-                        <mwc-icon>keyboard_arrow_right</mwc-icon>
+                        <md-icon>keyboard_arrow_right</md-icon>
                         <strong>${domain.name}</strong>
                         <span>${domain.description}</span>
                       </li>
@@ -125,18 +124,15 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
             : html` <h3>${i18next.t('text.no domain available')}</h3> `}
 
           <div class="button-container">
-            <mwc-button
-              raised
-              label=${String(i18next.t('button.logout'))}
-              @click="${() => (location.pathname = '/auth/signout')}"
-            ></mwc-button>
+            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}
+              >${String(i18next.t('button.logout'))}</md-elevated-button
+            >
 
             ${this.domainType?.toLowerCase() === 'company'
-              ? html`<mwc-button
-                  raised
-                  label=${String(i18next.t('button.register business domain'))}
+              ? html`<md-elevated-button
                   @click=${e => (location.href = `/public/business-register?email=${this.user?.email}`)}
-                ></mwc-button> `
+                  >${String(i18next.t('button.register business domain'))}</md-elevated-button
+                > `
               : ''}
           </div>
 

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

@@ -1,4 +1,6 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/text-button.js'
+
 import '@operato/i18n/ox-i18n.js'
 import '../../components/profile-component'
 
@@ -28,7 +30,7 @@ export class ForgotPassword extends AbstractAuthPage {
     return html`
       <input id="email" name="email" type="hidden" required .value=${email} />
       <div class="field">
-        <mwc-textfield
+        <md-filled-text-field
           name="email"
           type="email"
           label=${String(i18next.t('label.email'))}
@@ -37,18 +39,18 @@ export class ForgotPassword extends AbstractAuthPage {
           @input=${e => {
             this.emailInput.value = e.target.value
           }}
-        ></mwc-textfield>
+        ></md-filled-text-field>
       </div>
-      <mwc-button id="submit-button" class="ui button" type="submit" raised @click=${e => this._onSubmit(e)}>
+      <md-elevated-button id="submit-button" class="ui button" type="submit" @click=${e => this._onSubmit(e)}>
         <ox-i18n msgid="button.submit"></ox-i18n>
-      </mwc-button>
+      </md-elevated-button>
     `
   }
 
   get links() {
     return html`
       <a class="link" href="/auth/signin">
-        <mwc-button><ox-i18n msgid="field.sign in"></ox-i18n></mwc-button>
+        <md-text-button><ox-i18n msgid="field.sign in"></ox-i18n></md-text-button>
       </a>
     `
   }

package/client/entries/auth/result.ts

@@ -1,6 +1,7 @@
-import '@material/mwc-button'
-import '../../components/profile-component'
+import '@material/web/button/elevated-button.js'
+
 import '@operato/lottie-player'
+import '../../components/profile-component'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -73,11 +74,11 @@ export class AuthResult extends localize(i18next)(LitElement) {
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         padding-top: 10px;
       }
-      mwc-button {
-        --mdc-theme-primary: var(--auth-button-background-color);
-        --mdc-theme-on-primary: var(--primary-color);
-        --mdc-button-horizontal-padding: var(--padding-default);
-        --mdc-button-ink-color: var(--primary-color);
+      md-elevated-button {
+        --md-theme-primary: var(--auth-button-background-color);
+        --md-theme-on-primary: var(--primary-color);
+        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-ink-color: var(--primary-color);
       }
       .lottie-container {
         width: 100%;
@@ -151,14 +152,14 @@ export class AuthResult extends localize(i18next)(LitElement) {
           <p></p>
         </div>
         <div id="button-area">
-          <mwc-button
-            icon="home"
-            raised
-            label="${i18next.t('button.go to home')}"
+          <md-elevated-button
             @click=${e => {
               window.location.replace('/auth/signin')
             }}
-          ></mwc-button>
+          >
+            <md-icon slot="icon">home</md-icon>
+            ${i18next.t('button.go to home')}
+          </md-elevated-button>
         </div>
 
         ${isSafari()

package/client/entries/auth/signup.ts

@@ -26,28 +26,28 @@ export class AuthSignup extends AbstractSign {
   get formfields() {
     const { name = '', email = '' } = this.data || {}
 
+    // .validationMessage=${this.passwordHelp || ''}
+    // .validationMessage=${String(i18next.t('text.passwords do not match'))}
+
     return html`
       <div class="field">
-        <mwc-textfield
-          name="name"
-          type="text"
-          label=${String(i18next.t('field.name'))}
-          .value=${name}
-          required
-        ></mwc-textfield>
+        <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">
-        <mwc-textfield
+        <md-filled-text-field
           name="email"
           type="email"
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          .validationMessage=${String(i18next.t('text.invalid-email'))}
-        ></mwc-textfield>
+          @input=${(e: Event) => {
+            const target = e.target as HTMLFormElement
+            target.setCustomValidity(i18next.t('text.invalid-email'))
+          }}
+        ></md-filled-text-field>
       </div>
       <div class="field">
-        <mwc-textfield
+        <md-filled-text-field
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
@@ -59,22 +59,18 @@ export class AuthSignup extends AbstractSign {
             var val = e.target.value
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
           }}
-          .validationMessage=${this.passwordHelp || ''}
-        ></mwc-textfield>
+        >
+          ></md-filled-text-field
+        >
       </div>
       <div class="field">
-        <mwc-textfield
-          id="confirm-password"
-          name="confirm-password"
-          type="password"
-          label=${String(i18next.t('field.confirm password'))}
-          required
-          .validationMessage=${String(i18next.t('text.passwords do not match'))}
-        ></mwc-textfield>
+        <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>
-      <mwc-button class="ui button" raised @click=${e => this._onSubmit(e)}>
+      <md-elevated-button class="ui button" @click=${e => this._onSubmit(e)}>
         <ox-i18n msgid="field.${this.pageName}"></ox-i18n>
-      </mwc-button>
+      </md-elevated-button>
     `
   }
 
@@ -86,7 +82,7 @@ export class AuthSignup extends AbstractSign {
   get links() {
     return html`
       <a class="link" href="/auth/signin">
-        <mwc-button><ox-i18n msgid="field.sign in"></ox-i18n></mwc-button>
+        <md-text-button><ox-i18n msgid="field.sign in"></ox-i18n></md-text-button>
       </a>
     `
   }

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

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -33,7 +33,7 @@ class OAuth2DecisionErrorPage extends LitElement {
         <input name="state" type="text" value="${this.req.state}" hidden />
         <input name="email" type="text" value="${this.user.email}" hidden />
 
-        <mwc-button raised @click="${() => history.back()}">Move back</mwc-button>
+        <md-elevated-button raised @click="${() => history.back()}">Move back</md-elevated-button>
       </form>
     `
   }

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

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 import '../../components/role-selector'
 
 import gql from 'graphql-tag'
@@ -8,60 +8,65 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('oauth2-decision')
 class OAuth2DecisionPage extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-
-      border: 1px solid var(--primary-color);
-      margin: var(--margin-default);
-      padding: var(--padding-default);
-      font: normal 15px var(--theme-font);
-      color: var(--secondary-color);
-    }
-    [field-2column] {
-      border-radius: var(--border-radius);
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 5px 15px;
-      clear: both;
-      max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--padding-default);
-    }
-    input {
-      border: var(--border-dark-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
-    }
-    label {
-      display: flex;
-      flex-direction: column;
-      font: var(--label-font);
-      color: var(--label-color);
-      text-transform: var(--label-text-transform);
-    }
-    [buttons] {
-      margin: 0;
-      padding: var(--padding-default);
-      background-color: rgba(var(--primary-color-rgb), 0.2);
-    }
-    mwc-button {
-      margin-right: var(--padding-narrow);
-    }
-    [danger] {
-      --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-    }
-  `
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        border: 1px solid var(--primary-color);
+        margin: var(--margin-default);
+        padding: var(--padding-default);
+        font: normal 15px var(--theme-font);
+        color: var(--secondary-color);
+      }
+
+      [field-2column] {
+        border-radius: var(--border-radius);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 5px 15px;
+        clear: both;
+        max-width: var(--input-container-max-width);
+      }
+
+      [field] {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: var(--padding-default);
+      }
+
+      input {
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        min-width: 250px;
+        font: var(--input-font);
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+
+      md-elevated-button {
+        margin-right: var(--padding-narrow);
+      }
+
+      [danger] {
+        --md-theme-primary: var(--md-danger-button-primary-color);
+      }
+    `
+  ]
 
   @property({ type: Object }) data: any = {}
   @property({ type: Object }) user: any = {}
@@ -109,9 +114,9 @@ class OAuth2DecisionPage extends LitElement {
 
       <role-selector .roleCategory="${this.domain.name}" .roles="${this.roles}"></role-selector>
 
-      <div buttons>
-        <mwc-button @click="${() => this.decision(true)}" raised label="Allow"></mwc-button>
-        <mwc-button @click="${() => this.decision(false)}" raised danger label="Deny"></mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click="${() => this.decision(true)}" raised label="Allow"></md-elevated-button>
+        <md-elevated-button @click="${() => this.decision(false)}" raised danger label="Deny"></md-elevated-button>
       </div>
     `
   }

package/client/entries/public/home.ts

@@ -1,8 +1,10 @@
-import '@material/mwc-icon-button'
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
+import '@material/web/button/text-button.js'
+import '@material/web/button/elevated-button.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { i18next, localize } from '@operato/i18n'
 
@@ -15,19 +17,33 @@ export class HomePage extends localize(i18next)(LitElement) {
         position: relative;
       }
 
-      [home] {
+      .signin {
         position: absolute;
-        left: 20px;
+        right: 20px;
         top: 10px;
-        font-size: 2em;
-        color: var(--primary-color);
+        display: inline-block;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary-container);
+        border: none;
+        border-radius: 4px;
+        text-align: center;
+        text-decoration: none;
+        transition:
+          background-color 0.3s,
+          transform 0.3s;
       }
 
-      [signin] {
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        font-size: 2em;
+      .signin:hover {
+        background-color: var(--md-sys-color-on-primary-container);
+        transform: translateY(-2px);
+      }
+
+      .signin:active {
+        background-color: var(--md-sys-color-primary-container);
+        transform: translateY(0);
       }
 
       [message] {
@@ -96,7 +112,7 @@ export class HomePage extends localize(i18next)(LitElement) {
       input {
         border: var(--border-dark-color);
         border-radius: var(--border-radius);
-        padding: var(--input-padding);
+        padding: var(--padding-default);
         font: var(--input-font);
       }
 
@@ -150,7 +166,7 @@ export class HomePage extends localize(i18next)(LitElement) {
           margin: var(--margin-narrow) 0 var(--margin-default) 0;
           text-align: center;
         }
-        fieldset mwc-button {
+        fieldset md-text-button {
           width: 100%;
         }
       }
@@ -171,8 +187,15 @@ export class HomePage extends localize(i18next)(LitElement) {
     const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'
 
     return html`
-      <mwc-icon-button home icon="home" @click=${e => (window.location.href = '/')}></mwc-icon-button>
-      <mwc-button signin dense @click=${e => (window.location.href = '/auth/signin')}>sign in</mwc-button>
+      <a
+        class="signin"
+        @click=${e => {
+          e.preventDefault()
+          window.location.href = '/auth/signin'
+        }}
+      >
+        ${i18next.t('button.sign_in')}</a
+      >
 
       <div message>
         <strong>${tagline}</strong> ${explanation1} <br />
@@ -181,14 +204,13 @@ export class HomePage extends localize(i18next)(LitElement) {
       </div>
 
       <div ticket>
-        <div brand><img src=${icon} /></div>
+        <div brand><img src=${ifDefined(icon)} /></div>
         <div content>
-          <form action="/auth/join" accept-charset="utf-8" name="join" method="POST">
+          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
             <fieldset>
               <legend>${title} invitation ticket</legend>
               <input type="text" name="email" placeholder="Enter your email address" />
               <input type="submit" value="join now" />
-              <!-- help this button, pls <mwc-button raised label="join now"></mwc-button> -->
             </fieldset>
           </form>
         </div>

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import Clipboard from 'clipboard'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -164,7 +166,7 @@ class AppBinding extends connect(store)(PageView) {
 
     return html`
       <div>
-        <h2><mwc-icon>link</mwc-icon>&nbsp;${app.name}</h2>
+        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>
         <p page-description>${app.description}</p>
       </div>
 
@@ -235,10 +237,7 @@ 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>
 
@@ -247,10 +246,7 @@ 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

@@ -16,7 +16,7 @@ class AppBindings extends connect(store)(PageView) {
 
         overflow: auto;
       }
-      mwc-button {
+      md-elevated-button {
         margin-right: 0;
         float: right;
       }
@@ -114,7 +114,7 @@ class AppBindings extends connect(store)(PageView) {
           `
         )}
       </table>
-      <mwc-button raised @click=${e => navigate('applications')} label="registered applications .."></mwc-button>
+      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
     `
   }
 

package/client/pages/appliance/appliance.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import Clipboard from 'clipboard'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -150,7 +152,7 @@ class Appliance extends connect(store)(PageView) {
 
     return html`
       <div>
-        <h2><mwc-icon>devices</mwc-icon>&nbsp;${appliance.name}</h2>
+        <h2><md-icon>devices</md-icon>&nbsp;${appliance.name}</h2>
         <p page-description>${appliance.description}</p>
       </div>
 
@@ -199,13 +201,10 @@ 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>
@@ -214,9 +213,7 @@ 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

@@ -96,10 +96,10 @@ 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>
-        <mwc-button raised @click=${e => navigate('appliance-register')} label="register new appliance"></mwc-button>
+        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>
       </div>
 
       <table>

package/client/pages/appliance/register.ts

@@ -136,7 +136,7 @@ class ApplianceRegister extends connect(store)(PageView) {
               <input id="netmask" type="text" name="netmask" />
             </div>
 
-            <mwc-button grid-span @click=${this.createAppliance.bind(this)} raised label="register"></mwc-button>
+            <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>
           </div>
         </form>
       </div>