@things-factory/auth-ui 7.0.1-alpha.1 → 7.0.1-alpha.100

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,25 +17,41 @@ 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-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-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 {
+        color: var(--md-sys-color-tertiary-container);
+        background-color: var(--md-sys-color-on-tertiary-container);
+        transform: translateY(-2px);
+      }
+
+      .signin:active {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        transform: translateY(0);
       }
 
       [message] {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-secondary-container);
         padding: 60px 50px 0 50px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         text-align: center;
         font-size: 20px;
       }
@@ -66,15 +84,15 @@ export class HomePage extends localize(i18next)(LitElement) {
         align-items: center;
         border-radius: 12px;
         overflow: hidden;
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         box-shadow: var(--box-shadow);
-        border-right: 3px dotted var(--main-section-background-color);
+        border-right: 3px dotted var(--md-sys-color-secondary-container);
         text-align: center;
       }
 
       [ticket] [content] {
         border-radius: 12px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-tertiary-container);
         padding: var(--padding-default) var(--padding-wide);
         box-shadow: var(--box-shadow);
       }
@@ -94,9 +112,9 @@ export class HomePage extends localize(i18next)(LitElement) {
       }
 
       input {
-        border: var(--border-dark-color);
+        border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--input-padding);
+        padding: var(--padding-default);
         font: var(--input-font);
       }
 
@@ -139,7 +157,7 @@ export class HomePage extends localize(i18next)(LitElement) {
           border: 0;
         }
         [content] {
-          border: 1px solid var(--primary-color);
+          border: 1px solid var(--md-sys-color-primary);
         }
 
         fieldset {
@@ -150,7 +168,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 +189,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 +206,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/index.ts

@@ -1,97 +1,124 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html } from 'lit-html'
 
 import { navigate, store } from '@operato/shell'
-import { ADD_MORENDA } from '@things-factory/more-base'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
 import { hasPrivilege } from '@things-factory/auth-base/dist-client'
 
 export * from './components/role-selector.js'
 export * from './components/domain-switch.js'
 export * from './components/invite-user.js'
 
-export async function setAuthManagementMenus() {
+export type AuthManagementMenuOptions = {
+  role?: boolean
+  appliance?: boolean
+  application?: boolean
+  user?: boolean
+  authProvider?: boolean
+  domain?: boolean
+  attribute?: boolean
+}
+
+export async function setAuthManagementMenus(options?: any) {
+  const {
+    role = true,
+    appliance = true,
+    application = true,
+    user = true,
+    authProvider = true,
+    domain = true,
+    attribute = true
+  } = options || {}
+
   if (
     await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })
   ) {
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>how_to_reg</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.role_management"></ox-i18n> `,
-        action: () => {
-          navigate('roles')
+    role &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>how_to_reg</md-icon> `,
+          name: html` <ox-i18n msgid="text.role_management"></ox-i18n> `,
+          action: () => {
+            navigate('roles')
+          }
         }
-      }
-    })
+      })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>devices</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.appliance"></ox-i18n> `,
-        action: () => {
-          navigate('appliance-home')
+    appliance &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>devices</md-icon> `,
+          name: html` <ox-i18n msgid="text.appliance"></ox-i18n> `,
+          action: () => {
+            navigate('appliance-home')
+          }
         }
-      }
-    })
+      })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>apps</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.application management"></ox-i18n> `,
-        action: () => {
-          navigate('applications')
+    application &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>apps</md-icon> `,
+          name: html` <ox-i18n msgid="text.application management"></ox-i18n> `,
+          action: () => {
+            navigate('applications')
+          }
         }
-      }
-    })
+      })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>people</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.user management"></ox-i18n> `,
-        action: () => {
-          navigate('users')
+    user &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>people</md-icon> `,
+          name: html` <ox-i18n msgid="text.user management"></ox-i18n> `,
+          action: () => {
+            navigate('users')
+          }
         }
-      }
-    })
+      })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>badge</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
-        action: () => {
-          navigate('auth-providers')
+    authProvider &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>badge</md-icon> `,
+          name: html` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
+          action: () => {
+            navigate('auth-providers')
+          }
         }
-      }
-    })
+      })
   }
 
   if (await hasPrivilege({ superUserGranted: true })) {
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>business</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.domain management"></ox-i18n> `,
-        action: () => {
-          navigate('domains')
+    domain &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>business</md-icon> `,
+          name: html` <ox-i18n msgid="text.domain management"></ox-i18n> `,
+          action: () => {
+            navigate('domains')
+          }
         }
-      }
-    })
+      })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>dataset</mwc-icon> `,
-        name: html` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
-        action: () => {
-          navigate('attributes')
+    attribute &&
+      store.dispatch({
+        type: ADD_MORENDA,
+        morenda: {
+          icon: html` <md-icon>dataset</md-icon> `,
+          name: html` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
+          action: () => {
+            navigate('attributes')
+          }
         }
-      }
-    })
+      })
   }
 }

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'
@@ -20,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 {
@@ -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>
 

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

@@ -11,12 +11,12 @@ 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;
       }
-      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'
@@ -19,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 {
@@ -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>
 

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;
@@ -99,7 +99,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,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;
@@ -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'
@@ -8,17 +10,19 @@ import { APPLICATION_TYPES } from '../../constants/application'
 
 import { client } from '@operato/graphql'
 import { navigate, PageView, store } from '@operato/shell'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('application-page')
 class Application extends connect(store)(PageView) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
         position: relative;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
       h2 {
@@ -53,15 +57,12 @@ class Application extends connect(store)(PageView) {
         border: var(--border-dark-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
-        padding: var(--input-padding);
+        padding: 9px;
         font: var(--input-font);
         flex: 1;
       }
       select:focus,
       input:focus,
-      button {
-        outline: none;
-      }
       form {
         max-width: var(--content-container-max-width);
       }
@@ -102,23 +103,19 @@ class Application extends connect(store)(PageView) {
       }
       [button-in-field] {
         position: absolute;
-        top: 24px;
-        right: 4px;
+        top: 16px;
+        right: 2px;
+        padding: 0;
+        border-radius: 0;
       }
       [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);
+        --md-theme-primary: var(--md-danger-button-primary-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;
@@ -145,7 +142,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 +208,18 @@ 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>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-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>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-button
+                >
                 The endpoint for authentication server. This is used to exchange the authorization code for an access
                 token.
               </div>
@@ -247,36 +234,28 @@ 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>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-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>
+                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
+                  >copy</md-text-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>
     `

package/client/pages/application/applications.ts

@@ -11,13 +11,13 @@ class Applications 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;
       }
 
-      [outlined] {
+      md-outlined-button {
         float: right;
         margin-top: var(--margin-default);
       }
@@ -102,14 +102,11 @@ class Applications extends connect(store)(PageView) {
         <p page-description>
           What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
         </p>
-        <mwc-button
-          raised
-          @click=${e => navigate('application-register')}
-          label="register new application"
-        ></mwc-button>
+        <md-elevated-button @click=${e => navigate('application-register')}
+          >register new application</md-elevated-button
+        >
       </div>
 
-      <!-- <div> -->
       <table>
         <tr>
           <th>app name</th>
@@ -134,8 +131,7 @@ class Applications extends connect(store)(PageView) {
         )}
       </table>
 
-      <mwc-button outlined @click=${e => navigate('app-bindings')} label="bound applications .."></mwc-button>
-      <!-- </div> -->
+      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>
     `
   }