@things-factory/auth-ui 8.0.0-beta.8 → 8.0.0

package/client/entries/public/home.ts

@@ -0,0 +1,246 @@
+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'
+
+@customElement('home-page')
+export class HomePage extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .signin {
+        position: absolute;
+        right: 20px;
+        top: 10px;
+        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: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(--md-sys-color-secondary-container);
+        padding: 60px 50px 0 50px;
+        color: var(--md-sys-color-on-secondary-container);
+        text-align: center;
+        font-size: 20px;
+      }
+
+      [message] strong {
+        display: block;
+        font-size: 2.5rem;
+      }
+
+      [message] img {
+        width: 800px;
+        max-width: 90%;
+        display: block;
+        margin: auto;
+        margin-top: -15px;
+      }
+
+      [ticket] {
+        display: grid;
+        grid-template-columns: 96px 1fr;
+        width: 450px;
+        margin: auto;
+        margin-top: -20px;
+        margin-bottom: 60px;
+      }
+
+      [brand] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 12px;
+        overflow: hidden;
+        background-color: var(--md-sys-color-primary);
+        box-shadow: var(--box-shadow);
+        border-right: 3px dotted var(--md-sys-color-secondary-container);
+        text-align: center;
+      }
+
+      [ticket] [content] {
+        border-radius: 12px;
+        background-color: var(--md-sys-color-tertiary-container);
+        padding: var(--spacing-medium) var(--spacing-large);
+        box-shadow: var(--box-shadow);
+      }
+
+      fieldset {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      legend {
+        margin: 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
+        font-weight: bold;
+        color: var(--legend-color);
+        text-transform: uppercase;
+      }
+
+      input {
+        border: var(--md-sys-color-outline);
+        border-radius: var(--border-radius);
+        padding: var(--spacing-medium);
+        font: var(--input-font);
+      }
+
+      input[type='text'] {
+        min-width: 190px;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      @media screen and (max-width: 480px) {
+        [message] {
+          padding: 60px 10px 0 10px;
+          text-align: center;
+          font-size: 14px;
+        }
+        [message] strong {
+          margin-bottom: 15px;
+          font-size: 1.6rem;
+          line-height: 1.2em;
+        }
+        [message] img {
+          max-width: 100%;
+        }
+
+        legend {
+          padding: 0;
+        }
+
+        [ticket] {
+          display: grid;
+          grid-template-columns: 0 1fr;
+          width: 90%;
+          margin: auto;
+          margin-top: -15px;
+          margin-bottom: 60px;
+        }
+        [brand] {
+          border: 0;
+        }
+        [content] {
+          border: 1px solid var(--md-sys-color-primary);
+        }
+
+        fieldset {
+          text-align: center;
+        }
+        input[type='text'] {
+          width: calc(100% - 20px);
+          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
+          text-align: center;
+        }
+        fieldset md-text-button {
+          width: 100%;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: true }) tagline?: string
+  @property({ type: String, attribute: true }) explanation1?: string
+  @property({ type: String, attribute: true }) explanation2?: string
+
+  private _applicationMeta?: { icon?: string; title?: string; description?: string }
+
+  render() {
+    var { icon, title } = this.applicationMeta
+
+    const tagline = this.tagline || `Join the ${title} Business Program`
+    const explanation1 = this.explanation1 || 'Create your free account today.'
+    const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'
+
+    return html`
+      <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 />
+        ${explanation2}
+        <img src="/assets/images/invitation.png" />
+      </div>
+
+      <div ticket>
+        <div brand><img src=${ifDefined(icon)} /></div>
+        <div content>
+          <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" />
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    `
+  }
+
+  @query('input[type=text]') firstInput!: HTMLInputElement
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.firstInput.focus()
+    }, 100)
+  }
+
+  get applicationMeta() {
+    if (!this._applicationMeta) {
+      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
+      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
+      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
+
+      this._applicationMeta = {
+        icon: iconLink?.href,
+        title: titleMeta ? titleMeta.content : 'Things Factory',
+        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+      }
+    }
+
+    return this._applicationMeta
+  }
+}

package/client/index.ts

@@ -0,0 +1,124 @@
+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/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 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 })
+  ) {
+    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')
+          }
+        }
+      })
+
+    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')
+          }
+        }
+      })
+
+    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')
+          }
+        }
+      })
+
+    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')
+          }
+        }
+      })
+
+    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 })) {
+    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')
+          }
+        }
+      })
+
+    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')
+          }
+        }
+      })
+  }
+}