@things-factory/auth-ui 7.0.0-alpha.9 → 7.0.0

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'
@@ -18,79 +20,131 @@ class Appliance extends connect(store)(PageView) {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
+        position: relative;
 
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color);
-        text-transform: var(--label-text-transform);
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
       }
-      input {
-        border: var(--border-dark-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
 
-        flex: 1;
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
       }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
+
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+
+        text-decoration: none;
       }
-      form {
-        max-width: var(--content-container-max-width);
+
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
+
       [fieldset-container] {
-        background-color: var(--theme-white-color);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+
+        input,
+        select {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
       button,
+      input[type='submit'],
       [button-in-field] {
         background-color: var(--button-background-color);
         border: var(--button-border);
@@ -100,14 +154,17 @@ class Appliance extends connect(store)(PageView) {
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }
-      button:hover {
+
+      button:hover,
+      input[type='submit']:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -115,10 +172,12 @@ class Appliance extends connect(store)(PageView) {
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;
@@ -150,7 +209,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>
 

package/client/pages/appliance/home.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -11,17 +14,28 @@ class Appliances extends connect(store)(PageView) {
   static styles = [
     css`
       :host {
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
 
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
+        float: right;
+        margin-top: var(--spacing-medium);
+        text-transform: capitalize;
+      }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -30,18 +44,22 @@ class Appliances extends connect(store)(PageView) {
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -52,29 +70,33 @@ class Appliances extends connect(store)(PageView) {
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
-        color: var(--secondary-text-color);
+        color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
 
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
       }
     `
@@ -99,7 +121,7 @@ class Appliances extends connect(store)(PageView) {
           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

@@ -12,8 +12,8 @@ class ApplianceRegister extends connect(store)(PageView) {
     return [
       css`
         :host {
-          background-color: var(--main-section-background-color);
-          padding: var(--padding-wide);
+          background-color: var(--md-sys-color-background);
+          padding: var(--spacing-large);
 
           display: flex;
           flex-direction: column;
@@ -34,8 +34,8 @@ class ApplianceRegister extends connect(store)(PageView) {
         }
 
         [form-container] {
-          background-color: var(--theme-white-color);
-          padding: var(--padding-wide);
+          background-color: var(--md-sys-color-surface);
+          padding: var(--spacing-large);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           min-width: 60%;
@@ -45,11 +45,11 @@ class ApplianceRegister extends connect(store)(PageView) {
         }
         label {
           font: var(--label-font);
-          color: var(--label-color);
+          color: var(--label-color, var(--md-sys-color-on-surface));
           text-transform: var(--label-text-transform);
         }
         input {
-          border: var(--border-dark-color);
+          border: var(--border-dim-color);
           border-radius: var(--border-radius);
           margin: var(--input-margin);
           padding: var(--input-padding);
@@ -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>

package/client/pages/application/application.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'
@@ -18,107 +20,163 @@ class Application extends connect(store)(PageView) {
         flex-direction: column;
         overflow-y: auto;
         position: relative;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
       }
+
       h2 {
-        display: flex;
-        align-items: center;
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
+
       [icon] {
         position: absolute;
         top: 10px;
         right: 10px;
         max-width: 80px;
       }
+
       [icon] img {
         max-width: 100%;
         max-height: 100%;
       }
-      label {
-        font: var(--label-font);
-        color: var(--label-color);
-        text-transform: var(--label-text-transform);
-      }
-      input,
-      select {
-        border: var(--border-dark-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        flex: 1;
-      }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
+
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+
+        text-decoration: none;
       }
-      form {
-        max-width: var(--content-container-max-width);
+
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
+
       [fieldset-container] {
-        background-color: var(--theme-white-color);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+
+        input,
+        select {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
+      button,
+      input[type='submit'],
+      [button-in-field] {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+        float: right;
+        text-decoration: none;
+      }
+
+      button:hover,
+      input[type='submit']:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+
       [button-in-field] {
+        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
-        top: 24px;
-        right: 4px;
+        top: 12px;
+        right: 0;
+        max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      .button-container {
-        margin-top: var(--margin-wide);
-        text-align: right;
-      }
-      .button-container mwc-button {
-        margin-left: var(--margin-narrow);
-      }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;
@@ -145,7 +203,7 @@ class Application extends connect(store)(PageView) {
 
     return html`
       <div>
-        <h2><mwc-icon>apps</mwc-icon>&nbsp;${app.name}</h2>
+        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>
         <p page-description>${app.description}</p>
       </div>
 
@@ -211,28 +269,14 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="auth-url">auth URL</label>
                 <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 The endpoint for authorization server. This is used to get the authorization code.
               </div>
 
               <div field grid-span>
                 <label for="access-token-url">access token URL</label>
                 <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 The endpoint for authentication server. This is used to exchange the authorization code for an access
                 token.
               </div>
@@ -247,36 +291,24 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="app-key">appKey</label>
                 <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
               </div>
 
               <div field grid-span>
                 <label for="app-secret">appSecret</label>
                 <input id="app-secret" type="text" .value=${app.appSecret} readonly />
-                <mwc-button
-                  dense
-                  unelevated
-                  button-in-field
-                  clipboard-copy
-                  @click=${e => e.preventDefault()}
-                  label="copy"
-                ></mwc-button>
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
               </div>
             </div>
           </fieldset>
         </div>
 
         <div class="button-container">
-          <mwc-button raised danger label="delete this app" @click=${this.deleteApplication.bind(this)}></mwc-button>
-          <mwc-button raised label="update" @click=${this.updateApplication.bind(this)}></mwc-button>
-          <mwc-button outlined label="generate new secret"></mwc-button>
+          <button danger @click=${this.deleteApplication.bind(this)}>
+            <md-icon>delete_forever</md-icon>delete this app
+          </button>
+          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
+          <button><md-icon>passkey</md-icon>generate new secret</button>
         </div>
       </form>
     `