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

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,16 +84,16 @@ 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);
-        padding: var(--padding-default) var(--padding-wide);
+        background-color: var(--md-sys-color-tertiary-container);
+        padding: var(--spacing-medium) var(--spacing-large);
         box-shadow: var(--box-shadow);
       }
 
@@ -87,16 +105,16 @@ export class HomePage extends localize(i18next)(LitElement) {
 
       legend {
         margin: 0;
-        padding: var(--padding-narrow) 0 var(--padding-default) 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
         font-weight: bold;
         color: var(--legend-color);
         text-transform: uppercase;
       }
 
       input {
-        border: var(--border-dark-color);
+        border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--input-padding);
+        padding: var(--spacing-medium);
         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 {
@@ -147,10 +165,10 @@ export class HomePage extends localize(i18next)(LitElement) {
         }
         input[type='text'] {
           width: calc(100% - 20px);
-          margin: var(--margin-narrow) 0 var(--margin-default) 0;
+          margin: var(--spacing-small) 0 var(--spacing-medium) 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,19 +22,22 @@ class AppBinding extends connect(store)(PageView) {
 
         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);
       }
+
       [icon] {
         position: absolute;
         top: 10px;
@@ -40,68 +45,77 @@ class AppBinding extends connect(store)(PageView) {
 
         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 {
-        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;
-      }
-      form {
-        max-width: var(--content-container-max-width);
-      }
       [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 {
+          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,
       [button-in-field] {
         background-color: var(--button-background-color);
@@ -112,14 +126,16 @@ class AppBinding 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 {
         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;
@@ -127,10 +143,12 @@ class AppBinding 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;
@@ -164,7 +182,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

@@ -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,20 +14,28 @@ class AppBindings 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;
       }
-      mwc-button {
-        margin-right: 0;
+
+      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);
@@ -33,18 +44,22 @@ class AppBindings 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);
@@ -55,22 +70,26 @@ class AppBindings 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(--primary-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;
       }
@@ -114,7 +133,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>
     `
   }