diff --git a/packages/person-select/src/dbp-person-select-demo.js b/packages/person-select/src/dbp-person-select-demo.js index a0838df349561fc4730af170a41148726728fc44..2f7e4b089238b190558264373fda4f81e836afd3 100644 --- a/packages/person-select/src/dbp-person-select-demo.js +++ b/packages/person-select/src/dbp-person-select-demo.js @@ -84,6 +84,13 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) { <dbp-person-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" show-reload-button reload-button-title="Click me"></dbp-person-select> </div> </div> + <div class="field"> + <label class="label">Person 3 unsubscribed</label> + <div class="control"> + <dbp-person-select lang="${this.lang}" entry-point-url="${this.entryPointUrl}" show-reload-button reload-button-title="Click me"></dbp-person-select> + </div> + <p>This comonent doesn't get any notification about user's login and will become active.</p> + </div> </form> </div> </section> diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js index 3b2945632113f1cef21c05fc3ec93646f0ad9148..013c0e78a12ea1c924d5598171a929b58a9e1034 100644 --- a/packages/person-select/src/person-select.js +++ b/packages/person-select/src/person-select.js @@ -110,7 +110,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { JSONLD.initialize(this.entryPointUrl, function (jsonld) { that.jsonld = jsonld; - that.active = true; + that.active = that.authenticated(); // we need to poll because maybe the user interface isn't loaded yet // Note: we need to call initSelect2() in a different function so we can access "this" inside initSelect2() @@ -150,7 +150,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { width: '100%', language: this.lang === "de" ? select2LangDe() : select2LangEn(), minimumInputLength: 2, - placeholder: i18n.t('person-select.placeholder'), + placeholder: i18n.t(this.authenticated() ? 'person-select.placeholder' : 'person-select.login-required'), dropdownParent: this.$('#person-select-dropdown'), ajax: { delay: 500, @@ -293,6 +293,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { break; case "auth": JSONLD.doInitializationOnce(this.entryPointUrl, this.auth.token); + this.active = this.authenticated(); break; } }); @@ -318,6 +319,10 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { })); } + authenticated() { + return (this.auth.token || '') !== ''; + } + static get styles() { return [ commonStyles.getThemeCSS(), @@ -366,7 +371,10 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { <div class="field has-addons"> <div class="select2-control control"> <!-- https://select2.org--> - <select id="${this.selectId}" name="person" class="select" ?disabled=${!this.active}>${!this.active ? html`<option value="" disabled selected>${ i18n.t('person-select.login-required')}</option>` : ''}</select> + <select id="${this.selectId}" name="person" class="select" + ?disabled=${!this.active}> + ${!this.authenticated() ? html`<option value="" disabled selected>${ i18n.t('person-select.login-required')}</option>` : ''} + </select> </div> <a class="control button" id="reload-button"