@things-factory/auth-ui 9.0.2 → 9.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,6 +9,8 @@ export declare class AuthCheckIn extends AuthCheckIn_base {
|
|
|
9
9
|
domains: any[];
|
|
10
10
|
domainTypes?: string[];
|
|
11
11
|
user: any;
|
|
12
|
+
searchValue: string;
|
|
13
|
+
DOMAIN_SEARCH_LENGTH: number;
|
|
12
14
|
private _applicationMeta?;
|
|
13
15
|
private redirectTo?;
|
|
14
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -3,7 +3,7 @@ import '@material/web/icon/icon.js';
|
|
|
3
3
|
import '@material/web/button/elevated-button.js';
|
|
4
4
|
import '@operato/lottie-player';
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
7
|
import { i18next, localize } from '@operato/i18n';
|
|
8
8
|
import { ScrollbarStyles } from '@operato/styles';
|
|
9
9
|
import { isSafari } from '@operato/utils';
|
|
@@ -12,6 +12,8 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.domains = [];
|
|
15
|
+
this.searchValue = '';
|
|
16
|
+
this.DOMAIN_SEARCH_LENGTH = 5;
|
|
15
17
|
}
|
|
16
18
|
static { this.styles = [
|
|
17
19
|
ScrollbarStyles,
|
|
@@ -91,6 +93,7 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
|
|
|
91
93
|
]; }
|
|
92
94
|
render() {
|
|
93
95
|
var { icon, title, description } = this.applicationMeta;
|
|
96
|
+
const showDomainSearch = this.domains?.length >= this.DOMAIN_SEARCH_LENGTH;
|
|
94
97
|
return html `
|
|
95
98
|
<div class="content md-typescale-display-medium">
|
|
96
99
|
<div class="wrap">
|
|
@@ -102,10 +105,28 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
|
|
|
102
105
|
|
|
103
106
|
<h3>${i18next.t('label.select_domain')}</h3>
|
|
104
107
|
|
|
108
|
+
${html `
|
|
109
|
+
<input
|
|
110
|
+
search-input
|
|
111
|
+
?visible=${showDomainSearch}
|
|
112
|
+
type="text"
|
|
113
|
+
placeholder=${i18next.t('label.search_domain')}
|
|
114
|
+
.value=${this.searchValue}
|
|
115
|
+
@input=${e => (this.searchValue = e.target.value)}
|
|
116
|
+
/>
|
|
117
|
+
`}
|
|
105
118
|
${this.domains?.length
|
|
106
119
|
? html `
|
|
107
120
|
<ul class="domains">
|
|
108
|
-
${this.domains.map(domain =>
|
|
121
|
+
${this.domains.map(domain => {
|
|
122
|
+
// 도메인이 5개 이상이면 검색 필터링 처리
|
|
123
|
+
if (showDomainSearch &&
|
|
124
|
+
this.searchValue &&
|
|
125
|
+
!domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
|
|
126
|
+
!domain.description.toLowerCase().includes(this.searchValue.toLowerCase())) {
|
|
127
|
+
return html ``;
|
|
128
|
+
}
|
|
129
|
+
return html `
|
|
109
130
|
<li
|
|
110
131
|
@click=${() => (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
|
|
111
132
|
>
|
|
@@ -113,7 +134,8 @@ let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
|
|
|
113
134
|
<strong>${domain.name}</strong>
|
|
114
135
|
<span>${domain.description} </span>
|
|
115
136
|
</li>
|
|
116
|
-
|
|
137
|
+
`;
|
|
138
|
+
})}
|
|
117
139
|
</ul>
|
|
118
140
|
`
|
|
119
141
|
: html ` <h3>${i18next.t('text.no domain available')}</h3> `}
|
|
@@ -177,6 +199,10 @@ __decorate([
|
|
|
177
199
|
property({ type: Object }),
|
|
178
200
|
__metadata("design:type", Object)
|
|
179
201
|
], AuthCheckIn.prototype, "user", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
state(),
|
|
204
|
+
__metadata("design:type", String)
|
|
205
|
+
], AuthCheckIn.prototype, "searchValue", void 0);
|
|
180
206
|
AuthCheckIn = __decorate([
|
|
181
207
|
customElement('auth-checkin')
|
|
182
208
|
], AuthCheckIn);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
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.js'\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 color: var(--md-sys-color-on-primary-container);\n background-color: var(--md-sys-color-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 @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} </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"]}
|