modernize addon: moved from webuniversum to appuniversum, converted to glimmer components #4
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <AuButton @loading={{this.isAuthenticating}} @disabled={{this.isAuthenticating}} {{on "click" this.login}}> | ||
| Meld u aan | ||
| </AuButton> | ||
| {{#if this.errorMessage}} | ||
| <AuAlert @alertIcon="alert-triangle" @alertTitle={{this.errorMessage}} /> | ||
| {{/if}} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,29 @@ | ||
| import { warn } from '@ember/debug'; | ||
| import Component from '@glimmer/component'; | ||
| import { inject as service } from '@ember/service'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
| import { action } from '@ember/object'; | ||
|
|
||
| export default class AcmIdmLoginComponent extends Component { | ||
| @tracked errorMessage = ""; | ||
| @tracked isAuthenticating = false; | ||
| @service session; | ||
|
|
||
| @action | ||
| login() { | ||
| this.errorMessage = ""; | ||
| this.isAuthenticating = true; | ||
| this.session.authenticate('authenticator:torii', 'acmidm-oauth2') | ||
| .catch(reason => { | ||
| warn(reason.error || reason, { id: 'authentication.failure' }); | ||
|
|
||
| if (reason.status == 403) | ||
| this.errorMessage = 'U heeft geen toegang tot deze applicatie.'; | ||
| else | ||
| this.errorMessage = 'Fout bij het aanmelden. Gelieve opnieuw te proberen.'; | ||
| }) | ||
| .finally(() => { | ||
| this.isAuthenticating = false; | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,7 @@ | ||
| <button ...attributes {{on "click" this.logout}}> | ||
|
There was a problem hiding this comment. not sure if this component is really needed since it's just a button wrapper for ember-simple-auth's session invalidation logic (which is not really related to acm/idm either)? There was a problem hiding this comment. (I just wanted to get the conversation started. If this is a wanted change we can deprecate the component first in a separate PR) |
||
| {{#if (has-block)}} | ||
| {{yield}} | ||
| {{else}} | ||
| Meld u af | ||
| {{/if}} | ||
| </button> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| import Component from '@glimmer/component'; | ||
| import { inject as service } from '@ember/service'; | ||
| import { action } from '@ember/object'; | ||
|
|
||
| export default class AcmIdmLogoutComponent extends Component { | ||
| @service session; | ||
|
|
||
| @action | ||
| logout() { | ||
| this.session.invalidate(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <button ...attributes {{on "click" this.switch}} disabled={{this.disabled}}> | ||
| {{#if (has-block)}} | ||
| {{yield}} | ||
| {{else}} | ||
| Wissel van bestuurseenheid | ||
| {{/if}} | ||
| </button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,34 @@ | ||
| import Component from '@glimmer/component'; | ||
| import { getOwner } from '@ember/application'; | ||
| import fetch from 'fetch'; | ||
| import {action} from '@ember/object'; | ||
| import {tracked} from '@glimmer/tracking'; | ||
| export default class AcmIdmSwitchComponent extends Component { | ||
| @tracked disabled = false; | ||
| constructor() { | ||
| super(...arguments); | ||
| const config = getOwner(this).resolveRegistration('config:environment')?.torii; | ||
| const providerConfig = config?.providers ? config.providers["acmidm-oauth2"] : null; | ||
| if (!providerConfig) { | ||
| throw "could not find acmidm-oauth2 configuration, make sure it is set in your application environment"; | ||
| } | ||
| this.logoutUrl = providerConfig.logoutUrl; | ||
| this.clientId = providerConfig.clientId; | ||
| this.returnUrl = providerConfig.returnUrl; | ||
| } | ||
|
|
||
| @action | ||
| async switch() { | ||
| this.disabled = true; | ||
| try { | ||
| await fetch('/sessions/current', { | ||
| method: 'DELETE', | ||
| credentials: 'same-origin' | ||
| }); | ||
| window.location.replace(`${this.logoutUrl}?switch=true&client_id=${this.clientId}&post_logout_redirect_uri=${encodeURIComponent(this.returnUrl)}`); | ||
| } | ||
| catch(e) { | ||
| this.disabled = false; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,10 @@ | |
|
|
||
| <h2 id="title">Welcome to Ember</h2> | ||
|
|
||
| {{outlet}} | ||
|
|
||
| <AcmidmSwitch /> | ||
|
|
||
| <AcmidmLogin /> | ||
|
|
||
| <AcmidmLogout /> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of using (and depending on) Appuniversum, it might be nice to keep these components styling agnostic?
I think this can easily be achieved by yielding state instead of outputting html. That way projects can decide which components to use.
Depending on appuniversum will also create an extra maintenance burden since it will need to be bumped from time to time (especially since it's a 0.x release).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Most projects also seem to implement a "compact" version (which duplicates the logic) of this component for the main header. That would then no longer be needed either.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that's a great idea, but would keep this for backwards compatibility. perhaps adding a deprecation warning in the constructor?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the data-table we took the approach of a styling agnostic addon and another addon that extends it with Appuniversum, but that results in a heavier maintentance burden I must admit (and still makes it a breaking change for this addon atm).
I'm pro the deprecation warning in this PR. It paves the way to a styling agnostic version and thus a breaking release in the future. But I would implement that in a separate PR and not lump it on this one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only see now that there is a PR #5 already 🙈
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I created a follow-up PR as a quick POC of what a styling agnostic version could look like. I don't think the deprecation warnings should be added here since there are no alternatives yet, but I can add them to that PR as well.