@things-factory/auth-ui 8.0.0-beta.1 → 8.0.0-beta.4

package/client/pages/user/user-management.ts

@@ -1,223 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import '@things-factory/component-ui'
-import '../../components/invite-user'
-import '../../components/ownership-transfer-popup'
-import '../../components/user-role-editor'
-import '../../components/create-user'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { PageView } from '@operato/shell'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-@customElement('user-management')
-export class UserManagement extends localize(i18next)(PageView) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-        overflow: auto;
-      }
-
-      @media screen and (max-width: 600px) {
-        :host {
-          padding: var(--spacing-small);
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) domainUsers: any[] = []
-  @property({ type: Object }) owner: any
-  @property({ type: String }) currentTab: string = ''
-  @property({ type: Boolean }) passwordResettable: boolean = false
-  @property({ type: Boolean }) userCreatable: boolean = false
-
-  @query('#user-list') userListElement!: HTMLElement & { close: () => void }
-
-  get context() {
-    return {
-      title: i18next.t('text.user management'),
-      help: 'auth/users'
-    }
-  }
-
-  render() {
-    const groupingUser = (this.domainUsers || []).reduce(
-      (groupingUser, user) => {
-        const userType = user.userType
-        if (!groupingUser[userType]) {
-          groupingUser[userType] = []
-        }
-        user.activated = user.status === 'activated'
-        groupingUser[userType].push(user)
-
-        return groupingUser
-      },
-      {
-        admin: [],
-        user: [],
-        application: [],
-        appliance: []
-      }
-    )
-
-    const USER_TYPES = {
-      USER: i18next.t('label.user'),
-      APPLICATION: i18next.t('label.application'),
-      APPLIANCE: i18next.t('text.appliance')
-    }
-
-    const userSet = {
-      [USER_TYPES.USER]: [...groupingUser.user, ...groupingUser.admin],
-      [USER_TYPES.APPLICATION]: groupingUser.application,
-      [USER_TYPES.APPLIANCE]: groupingUser.appliance
-    }
-
-    return html`
-      ${this.userCreatable
-        ? html`<create-user
-            @create-user=${async event => {
-              const user = event.detail
-              user.userType = 'user'
-
-              await this.createUser(user)
-            }}
-          ></create-user>`
-        : ''}
-      <quick-find-list
-        id="user-list"
-        .data=${userSet}
-        @tabChanged=${e => (this.currentTab = e.detail.currentTabKey)}
-        .headerRenderer=${user => {
-          return !user.activated
-            ? html`
-                <md-icon>do_disturb</md-icon>
-                ${user.name}
-              `
-            : html` ${user.owner ? html` <md-icon>supervisor_account</md-icon> ` : ''} ${user.name} `
-        }}
-        .contentRenderer=${user =>
-          html` <user-role-editor
-            .user=${user}
-            .domainOwner=${this.owner}
-            .activate=${user.activated}
-            @userUpdated=${this.refreshUsers.bind(this)}
-            @ownershipTransferred=${this.refreshUsers.bind(this)}
-            .passwordResettable=${this.passwordResettable}
-          ></user-role-editor>`}
-      ></quick-find-list>
-
-      ${this.currentTab === USER_TYPES.USER
-        ? html`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>`
-        : ''}
-    `
-  }
-
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      this.refreshUsers()
-      this.checkPasswordResettable()
-      this.checkUserCreatable()
-    }
-  }
-
-  async refreshUsers() {
-    const domainUsersResp = await client.query({
-      query: gql`
-        query {
-          users {
-            items {
-              id
-              username
-              name
-              email
-              userType
-              status
-              owner
-            }
-          }
-        }
-      `,
-      context: gqlContext()
-    })
-
-    if (!domainUsersResp.errors?.length) {
-      this.domainUsers = domainUsersResp.data.users.items || []
-      this.owner = this.domainUsers.filter(user => user.owner)[0] || {}
-      this.userListElement?.close()
-    }
-  }
-
-  async checkPasswordResettable() {
-    const response = await client.query({
-      query: gql`
-        query {
-          checkResettablePasswordToDefault
-        }
-      `
-    })
-
-    if (!response.errors) {
-      this.passwordResettable = response.data.checkResettablePasswordToDefault
-    }
-  }
-
-  async checkUserCreatable() {
-    const response = await client.query({
-      query: gql`
-        query {
-          checkDefaultPassword
-        }
-      `
-    })
-
-    if (!response.errors) {
-      this.userCreatable = response.data.checkDefaultPassword
-    }
-  }
-
-  async createUser(user: { username: string; name: string; email: string }) {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.are_you_sure_to_x_user', { x: i18next.t('button.create') }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation createUser($user: NewUser!) {
-            createUser(user: $user) {
-              name
-            }
-          }
-        `,
-        variables: { user },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        await OxPrompt.open({
-          title: i18next.t('text.completed'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-
-        await this.refreshUsers()
-      }
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/route.ts

@@ -1,67 +0,0 @@
-export default function route(page) {
-  switch (page) {
-    case 'profile':
-      import(
-        /* webpackPrefetch: true */
-        /* webpackChunkName: "profile" */
-        './pages/profile.js'
-      )
-      return page
-
-    case 'appliance-register':
-      import('./pages/appliance/register')
-      return page
-
-    case 'application':
-      import('./pages/application/application')
-      return page
-
-    case 'applications':
-      import('./pages/application/applications')
-      return page
-
-    case 'application-register':
-      import('./pages/application/register')
-      return page
-
-    case 'app-bindings':
-      import('./pages/app-binding/app-bindings')
-      return page
-
-    case 'app-binding':
-      import('./pages/app-binding/app-binding')
-      return page
-
-    case 'appliance-home':
-      import('./pages/appliance/home')
-      return page
-
-    case 'appliance':
-      import('./pages/appliance/appliance')
-      return page
-
-    case 'roles':
-      import('./pages/role/role-management')
-      return page
-
-    case 'users':
-      import('./pages/user/user-management')
-      return page
-
-    case 'partners':
-      import('./pages/partner/partner-management')
-      return page
-
-    case 'domains':
-      import('./pages/domain/domain-management')
-      return page
-
-    case 'attributes':
-      import('./pages/attribute/attribute-set-management.js')
-      return page
-
-    case 'auth-providers':
-      import('./pages/auth-provider/auth-provider-management.js')
-      return page
-  }
-}

package/client/themes/auth-theme.css

@@ -1,65 +0,0 @@
-body {
-  /* login page style*/
-  --auth-brand-name: bold 20px var(--theme-font);
-  --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-  --auth-brand-welcome-msg: normal 12px var(--theme-font);
-
-  --auth-title-font: bold 32px var(--theme-font);
-  --auth-description-font: normal 12px var(--theme-font);
-  --auth-description-padding: 5px 5px 15px 5px;
-
-  --auth-input-font: normal 18px/24px var(--theme-font);
-  --auth-input-border: 1px solid rgba(0, 0, 0, 0.4);
-  --auth-input-border-light: 1px solid rgba(255, 255, 255, 0.8);
-  --auth-input-color: var(--md-sys-color-on-primary);
-
-  --auth-button-background-color: var(--md-sys-color-surface-variant);
-  --auth-button-background-focus-color: var(--status-success-color);
-  --auth-button-font: bold 20px var(--theme-font);
-  --auth-button-padding: 9px 12px 7px 12px;
-
-  /* profile page style*/
-  --profile-brand-width: 150px;
-  --profile-brand-height: 45px;
-  --profile-brand-padding: 30px auto 20px auto;
-
-  --profile-wrap-max-width: 550px;
-  --profile-icon-margin: 7% 0 0 0;
-
-  --auth-input-field-width: 100%;
-  --auth-input-field-font: normal 16px var(--theme-font);
-
-  --change-password-field-font: var(--auth-input-field-font);
-  --change-password-field-border: 1px solid rgba(0, 0, 0, 0.2);
-  --change-password-field-border-radius: var(--border-radius);
-  --change-password-field-margin: var(--margin-narrow) 0;
-  --change-password-field-padding: var(--padding-default);
-  --change-password-field-width: var(--auth-input-field-width);
-
-  --auth-special-page-padding: 250px 0 100px 0;
-
-  /* domain select page style*/
-  --checkin-background-color: var(--md-sys-color-background);
-  --checkin-header-height: 45px;
-  --checkin-header-background-color: var(--md-sys-color-primary);
-  --checkin-header-title-font: bold 19px var(--theme-font);
-  --checkin-header-title-color: var(--md-sys-color-on-primary);
-  --checkin-wrap-max-width: 500px;
-  --checkin-wrap-padding: var(--padding-wide);
-}
-
-@media only screen and (max-width: 460px) {
-  body {
-    /* profile page style*/
-    --profile-wrap-max-width: 85vw;
-
-    --auth-input-field-font: normal 20px var(--theme-font);
-  }
-}
-
-@media (min-width: 461px) and (max-width: 1024px) {
-  body {
-    /* profile page style*/
-    --auth-input-field-font: normal 20px var(--theme-font);
-  }
-}

package/client/utils/password-rule.ts

@@ -1,37 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export { generatePasswordPatternRegExp } from '@operato/utils'
-
-export function generatePasswordPatternHelp({
-  lowerCase = true,
-  upperCase = true,
-  digit = true,
-  specialCharacter = true,
-  allowRepeat = false,
-  useTightPattern = true,
-  useLoosePattern = false,
-  tightCharacterLength = 8,
-  looseCharacterLength = 15
-} = {}) {
-  var descriptions: string[] = []
-
-  if (useLoosePattern) {
-    descriptions.push(`more than ${looseCharacterLength} characters`)
-  }
-
-  if (useTightPattern) {
-    !useLoosePattern &&
-      descriptions.push(
-        i18next.t('text.pattern_minimum_charaters', {
-          length: tightCharacterLength
-        })
-      )
-    lowerCase && descriptions.push(i18next.t('text.pattern_atleast_1_lowercase'))
-    upperCase && descriptions.push(i18next.t('text.pattern_atleast_1_uppercase'))
-    digit && descriptions.push(i18next.t('text.pattern_atleast_1_digit'))
-    specialCharacter && descriptions.push(i18next.t('text.pattern_atleast_1_special'))
-    !allowRepeat && descriptions.push(i18next.t('text.pattern_not_allowed'))
-  }
-
-  return descriptions.join(', ')
-}