@things-factory/auth-ui 8.0.41 → 8.0.47

package/client/entries/auth/checkin.ts

@@ -4,7 +4,7 @@ import '@material/web/button/elevated-button.js'
 import '@operato/lottie-player'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
@@ -81,6 +81,24 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin-left: var(--spacing-small);
       }
 
+      input[search-input] {
+        width: 250px;
+        height: 35px;
+        margin-top: 10px;
+        border-radius: 5px;
+        padding: 3px 10px;
+        font-size: 17px;
+        color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-surface);
+        border: var(--border-dim-color);
+        font-weight: 500;
+        display: none;
+      }
+
+      input[search-input][visible] {
+        display: inline-block;
+      }
+
       @media (max-width: 450px) {
         .button-container md-elevated-button {
           width: 100%;
@@ -96,11 +114,15 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
   @property({ type: Array }) domainTypes?: string[]
   @property({ type: Object }) user: any
 
+  @state() searchValue: string = ''
+  DOMAIN_SEARCH_LENGTH = 5
+
   private _applicationMeta?: { icon?: string; title?: string; description?: string }
   private redirectTo?: string
 
   render() {
     var { icon, title, description } = this.applicationMeta
+    const showDomainSearch = this.domains?.length >= this.DOMAIN_SEARCH_LENGTH
 
     return html`
       <div class="content md-typescale-display-medium">
@@ -113,11 +135,31 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
 
           <h3>${i18next.t('label.select_domain')}</h3>
 
+          ${html`
+            <input
+              search-input
+              ?visible=${showDomainSearch}
+              type="text"
+              placeholder=${i18next.t('label.search_domain')}
+              .value=${this.searchValue}
+              @input=${e => (this.searchValue = e.target.value)}
+            />
+          `}
           ${this.domains?.length
             ? html`
                 <ul class="domains">
-                  ${this.domains.map(
-                    domain => html`
+                  ${this.domains.map(domain => {
+                    // 도메인이 5개 이상이면 검색 필터링 처리
+                    if (
+                      showDomainSearch &&
+                      this.searchValue &&
+                      !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
+                      !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())
+                    ) {
+                      return html``
+                    }
+
+                    return html`
                       <li
                         @click=${() =>
                           (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
@@ -127,7 +169,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
                         <span>${domain.description}&nbsp;</span>
                       </li>
                     `
-                  )}
+                  })}
                 </ul>
               `
             : html` <h3>${i18next.t('text.no domain available')}</h3> `}

package/dist-client/entries/auth/checkin.d.ts

@@ -9,6 +9,8 @@ export declare class AuthCheckIn extends AuthCheckIn_base {
     domains: any[];
     domainTypes?: string[];
     user: any;
+    searchValue: string;
+    DOMAIN_SEARCH_LENGTH: number;
     private _applicationMeta?;
     private redirectTo?;
     render(): import("lit-html").TemplateResult<1>;

package/dist-client/entries/auth/checkin.js

@@ -3,7 +3,7 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
 import '@operato/lottie-player';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { isSafari } from '@operato/utils';
@@ -12,10 +12,13 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         this.domains = [];
+        this.searchValue = '';
+        this.DOMAIN_SEARCH_LENGTH = 5;
     }
     render() {
-        var _a;
+        var _a, _b;
         var { icon, title, description } = this.applicationMeta;
+        const showDomainSearch = ((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length) >= this.DOMAIN_SEARCH_LENGTH;
         return html `
       <div class="content md-typescale-display-medium">
         <div class="wrap">
@@ -27,10 +30,28 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
 
           <h3>${i18next.t('label.select_domain')}</h3>
 
-          ${((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length)
+          ${html `
+            <input
+              search-input
+              ?visible=${showDomainSearch}
+              type="text"
+              placeholder=${i18next.t('label.search_domain')}
+              .value=${this.searchValue}
+              @input=${e => (this.searchValue = e.target.value)}
+            />
+          `}
+          ${((_b = this.domains) === null || _b === void 0 ? void 0 : _b.length)
             ? html `
                 <ul class="domains">
-                  ${this.domains.map(domain => html `
+                  ${this.domains.map(domain => {
+                // 도메인이 5개 이상이면 검색 필터링 처리
+                if (showDomainSearch &&
+                    this.searchValue &&
+                    !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
+                    !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())) {
+                    return html ``;
+                }
+                return html `
                       <li
                         @click=${() => (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
                       >
@@ -38,7 +59,8 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
                         <strong>${domain.name}</strong>
                         <span>${domain.description}&nbsp;</span>
                       </li>
-                    `)}
+                    `;
+            })}
                 </ul>
               `
             : html ` <h3>${i18next.t('text.no domain available')}</h3> `}
@@ -153,6 +175,24 @@ AuthCheckIn.styles = [
         margin-left: var(--spacing-small);
       }
 
+      input[search-input] {
+        width: 250px;
+        height: 35px;
+        margin-top: 10px;
+        border-radius: 5px;
+        padding: 3px 10px;
+        font-size: 17px;
+        color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-surface);
+        border: var(--border-dim-color);
+        font-weight: 500;
+        display: none;
+      }
+
+      input[search-input][visible] {
+        display: inline-block;
+      }
+
       @media (max-width: 450px) {
         .button-container md-elevated-button {
           width: 100%;
@@ -178,6 +218,10 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], AuthCheckIn.prototype, "user", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AuthCheckIn.prototype, "searchValue", void 0);
 AuthCheckIn = __decorate([
     customElement('auth-checkin')
 ], AuthCheckIn);

package/dist-client/entries/auth/checkin.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .header {\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        height: var(--checkin-header-height);\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .domains {\n        margin: var(--spacing-large) 0;\n        padding: 0;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        list-style: none;\n      }\n\n      li {\n        border-bottom: var(--border-dim-color);\n        padding: var(--spacing-medium) var(--spacing-large);\n        font-size: 18px;\n        text-align: left;\n\n        cursor: pointer;\n      }\n\n      li:hover {\n        background-color: var(--md-sys-color-primary-container);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      li span {\n        display: block;\n        font: normal var(--fontsize-default) var(--theme-font);\n      }\n\n      li md-icon {\n        float: right;\n        margin: 10px 0 0 0;\n        opacity: 0.5;\n      }\n\n      .button-container {\n        text-align: center;\n      }\n\n      .button-container md-elevated-button {\n        margin-left: var(--spacing-small);\n      }\n\n      @media (max-width: 450px) {\n        .button-container md-elevated-button {\n          width: 100%;\n          margin: var(--spacing-medium) 0 0 0;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Array }) domainTypes?: string[]\n  @property({ type: Object }) user: any\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n  private redirectTo?: string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon || ''} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <h3>${i18next.t('label.select_domain')}</h3>\n\n          ${this.domains?.length\n            ? html`\n                <ul class=\"domains\">\n                  ${this.domains.map(\n                    domain => html`\n                      <li\n                        @click=${() =>\n                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}\n                      >\n                        <md-icon>keyboard_arrow_right</md-icon>\n                        <strong>${domain.name}</strong>\n                        <span>${domain.description}&nbsp;</span>\n                      </li>\n                    `\n                  )}\n                </ul>\n              `\n            : html` <h3>${i18next.t('text.no domain available')}</h3> `}\n\n          <div class=\"button-container\">\n            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n              >${String(i18next.t('button.logout'))}</md-elevated-button\n            >\n          </div>\n\n          ${isSafari()\n            ? html``\n            : html`\n                <div class=\"lottie-container\">\n                  <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n                </div>\n              `}\n        </div>\n      </div>\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.domains = this.data.domains\n      this.user = this.data.user\n      this.domainTypes = this.data.domainTypes\n      this.redirectTo = this.data.redirectTo\n\n      this.requestUpdate()\n    }\n  }\n\n  navigateToUrl(url) {\n    location.pathname = url\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .header {\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        height: var(--checkin-header-height);\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .domains {\n        margin: var(--spacing-large) 0;\n        padding: 0;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        list-style: none;\n      }\n\n      li {\n        border-bottom: var(--border-dim-color);\n        padding: var(--spacing-medium) var(--spacing-large);\n        font-size: 18px;\n        text-align: left;\n\n        cursor: pointer;\n      }\n\n      li:hover {\n        background-color: var(--md-sys-color-primary-container);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      li span {\n        display: block;\n        font: normal var(--fontsize-default) var(--theme-font);\n      }\n\n      li md-icon {\n        float: right;\n        margin: 10px 0 0 0;\n        opacity: 0.5;\n      }\n\n      .button-container {\n        text-align: center;\n      }\n\n      .button-container md-elevated-button {\n        margin-left: var(--spacing-small);\n      }\n\n      input[search-input] {\n        width: 250px;\n        height: 35px;\n        margin-top: 10px;\n        border-radius: 5px;\n        padding: 3px 10px;\n        font-size: 17px;\n        color: var(--md-sys-color-primary);\n        background: var(--md-sys-color-surface);\n        border: var(--border-dim-color);\n        font-weight: 500;\n        display: none;\n      }\n\n      input[search-input][visible] {\n        display: inline-block;\n      }\n\n      @media (max-width: 450px) {\n        .button-container md-elevated-button {\n          width: 100%;\n          margin: var(--spacing-medium) 0 0 0;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Array }) domainTypes?: string[]\n  @property({ type: Object }) user: any\n\n  @state() searchValue: string = ''\n  DOMAIN_SEARCH_LENGTH = 5\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n  private redirectTo?: string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const showDomainSearch = this.domains?.length >= this.DOMAIN_SEARCH_LENGTH\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon || ''} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <h3>${i18next.t('label.select_domain')}</h3>\n\n          ${html`\n            <input\n              search-input\n              ?visible=${showDomainSearch}\n              type=\"text\"\n              placeholder=${i18next.t('label.search_domain')}\n              .value=${this.searchValue}\n              @input=${e => (this.searchValue = e.target.value)}\n            />\n          `}\n          ${this.domains?.length\n            ? html`\n                <ul class=\"domains\">\n                  ${this.domains.map(domain => {\n                    // 도메인이 5개 이상이면 검색 필터링 처리\n                    if (\n                      showDomainSearch &&\n                      this.searchValue &&\n                      !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&\n                      !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())\n                    ) {\n                      return html``\n                    }\n\n                    return html`\n                      <li\n                        @click=${() =>\n                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}\n                      >\n                        <md-icon>keyboard_arrow_right</md-icon>\n                        <strong>${domain.name}</strong>\n                        <span>${domain.description}&nbsp;</span>\n                      </li>\n                    `\n                  })}\n                </ul>\n              `\n            : html` <h3>${i18next.t('text.no domain available')}</h3> `}\n\n          <div class=\"button-container\">\n            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n              >${String(i18next.t('button.logout'))}</md-elevated-button\n            >\n          </div>\n\n          ${isSafari()\n            ? html``\n            : html`\n                <div class=\"lottie-container\">\n                  <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n                </div>\n              `}\n        </div>\n      </div>\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.domains = this.data.domains\n      this.user = this.data.user\n      this.domainTypes = this.data.domainTypes\n      this.redirectTo = this.data.redirectTo\n\n      this.requestUpdate()\n    }\n  }\n\n  navigateToUrl(url) {\n    location.pathname = url\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}