@things-factory/auth-ui 8.0.46 → 8.0.47

package/client/entries/auth/checkin.ts

@@ -115,13 +115,14 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
   @property({ type: Object }) user: any
 
   @state() searchValue: string = ''
-  @state() showDomainSearch: boolean = false
+  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">
@@ -137,7 +138,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
           ${html`
             <input
               search-input
-              ?visible=${this.showDomainSearch}
+              ?visible=${showDomainSearch}
               type="text"
               placeholder=${i18next.t('label.search_domain')}
               .value=${this.searchValue}
@@ -148,9 +149,9 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
             ? html`
                 <ul class="domains">
                   ${this.domains.map(domain => {
-                    // config에 showDomainSearch 옵션이 켜져있으면 검색 필터링 처리
+                    // 도메인이 5개 이상이면 검색 필터링 처리
                     if (
-                      this.showDomainSearch &&
+                      showDomainSearch &&
                       this.searchValue &&
                       !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
                       !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())
@@ -191,14 +192,13 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
     `
   }
 
-  async updated(changed) {
+  updated(changed) {
     if (changed.has('data')) {
       this.domains = this.data.domains
       this.user = this.data.user
       this.domainTypes = this.data.domainTypes
       this.redirectTo = this.data.redirectTo
 
-      await this.fetchConfig()
       this.requestUpdate()
     }
   }
@@ -207,12 +207,6 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
     location.pathname = url
   }
 
-  async fetchConfig() {
-    const response = await fetch('/get-config')
-    const data = await response.json()
-    this.showDomainSearch = data.showDomainSearch || false
-  }
-
   get applicationMeta() {
     if (!this._applicationMeta) {
       var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')

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

@@ -10,13 +10,12 @@ export declare class AuthCheckIn extends AuthCheckIn_base {
     domainTypes?: string[];
     user: any;
     searchValue: string;
-    showDomainSearch: boolean;
+    DOMAIN_SEARCH_LENGTH: number;
     private _applicationMeta?;
     private redirectTo?;
     render(): import("lit-html").TemplateResult<1>;
-    updated(changed: any): Promise<void>;
+    updated(changed: any): void;
     navigateToUrl(url: any): void;
-    fetchConfig(): Promise<void>;
     get applicationMeta(): {
         icon?: string;
         title?: string;

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

@@ -13,11 +13,12 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
         super(...arguments);
         this.domains = [];
         this.searchValue = '';
-        this.showDomainSearch = false;
+        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">
@@ -32,19 +33,19 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
           ${html `
             <input
               search-input
-              ?visible=${this.showDomainSearch}
+              ?visible=${showDomainSearch}
               type="text"
               placeholder=${i18next.t('label.search_domain')}
               .value=${this.searchValue}
               @input=${e => (this.searchValue = e.target.value)}
             />
           `}
-          ${((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length)
+          ${((_b = this.domains) === null || _b === void 0 ? void 0 : _b.length)
             ? html `
                 <ul class="domains">
                   ${this.domains.map(domain => {
-                // config에 showDomainSearch 옵션이 켜져있으면 검색 필터링 처리
-                if (this.showDomainSearch &&
+                // 도메인이 5개 이상이면 검색 필터링 처리
+                if (showDomainSearch &&
                     this.searchValue &&
                     !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
                     !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())) {
@@ -81,24 +82,18 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
       </div>
     `;
     }
-    async updated(changed) {
+    updated(changed) {
         if (changed.has('data')) {
             this.domains = this.data.domains;
             this.user = this.data.user;
             this.domainTypes = this.data.domainTypes;
             this.redirectTo = this.data.redirectTo;
-            await this.fetchConfig();
             this.requestUpdate();
         }
     }
     navigateToUrl(url) {
         location.pathname = url;
     }
-    async fetchConfig() {
-        const response = await fetch('/get-config');
-        const data = await response.json();
-        this.showDomainSearch = data.showDomainSearch || false;
-    }
     get applicationMeta() {
         if (!this._applicationMeta) {
             var iconLink = document.querySelector('link[rel="application-icon"]');
@@ -227,10 +222,6 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], AuthCheckIn.prototype, "searchValue", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], AuthCheckIn.prototype, "showDomainSearch", 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, 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  @state() showDomainSearch: boolean = false\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          ${html`\n            <input\n              search-input\n              ?visible=${this.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                    // config에 showDomainSearch 옵션이 켜져있으면 검색 필터링 처리\n                    if (\n                      this.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  async 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      await this.fetchConfig()\n      this.requestUpdate()\n    }\n  }\n\n  navigateToUrl(url) {\n    location.pathname = url\n  }\n\n  async fetchConfig() {\n    const response = await fetch('/get-config')\n    const data = await response.json()\n    this.showDomainSearch = data.showDomainSearch || false\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"]}