giovannicandido / angular-spa Goto Github PK

Finish the logger module and document the usage

• Plug in message storage
• Cache messages before sending back to storage (could be a cloud storage or a do it yourself internal service). This makes the module resilent to network conditions.
• Provide events to developers like: onErrorLogged, onSyncStart, onSyncEnd. This could be used for nice user feedback.
• Global error interceptor (Investigate angular for this)

Suppose we have a topbar and two routes:

• home
• profile

Profiles is protected, home is not
top bar is part of app

Problem: The security directives work only inside profile, if topbar has directives it is not updated.
Looks like databind between AuthService (where login and logout is stored) and the directives is not trigged in some situation.

Needs investigation and tests

Document RefreshTokenInterceptor

Before getUserAccount the token needs to be refreshed

Html has a disabled attribute. Maybe worth using that instead of css class?

Documentation about the interceptors used and reference to the project angular-http-interceptor

Document keycloak listener.

Before I would like to think if this listerner should be maintained because someone could inject the AuthService and listen to the events.

Build and publication in npm gets easier and less error prone.

https://github.com/angular/angular-cli/wiki/stories-create-library

Document Account class.

Before that, getLoginAccount() return a keycloak JSON object and not a Account object. The methods: isAccountInRole(role: string) and *hasAuthority(authority: string): boolean * are not present

Create a reusable loading bar to use in ajax request. Like youtube top loading bar

The project will be integrated to https://github.com/atende/angular-http-interceptor

Provide API's and directives to hide information based on security credentials

Proposal

As a developer, I would like to query information about the current user and:

• Hide or display an element from the DOM
• Apply a class to an element on the DOM

The type of queries I would like:

• User is authenticated
• User is not authenticated
• User is part of a ROLE
• User is part of any ROLE (list of roles)
• User is part of all ROLES (list of roles)
  I would also like to Negate the expression (like user on any role except this ones)

This requirement focus on ROLE base authentication. For fine granted permissions, keycloak has Authorization services that enforce polices, which is way more flexible. See: https://keycloak.gitbooks.io/documentation/authorization_services/topics/overview/overview.html

A new feature must be open to provide integration with the authorization services of keycloak.

Syntax

• secIsAuthenticated
• secIsNotAuthenticated
• secHasRole="ROLE_NAME"
• secHasAllRoles="ROLE_NAME, ROLE_NAME"
• secHasAnyRoles="ROLE_NAME, ROLE_NAME"
• secHasNotRoles="ROLE_NAME, ROLE_NAME"

Every directive has the configurations:

• secAction - The action to perform. Allowed values: hide, remove, addClass
• secClass - The class to be added, you don't need to specify secAction="addClass"

The configuration is tracked by #11

Examples:

<p secIsNotAuthenticated></p> <!-- Hide element from dom if user is not authenticated -->
<p secHasRole="ADMIN" secClass="green"></p> <!-- add class green if user has role ADMIN -->
<p secHasRole="ADMIN" secAction="remove"></p> <!-- remove the element from DOM if user has role ADMIN -->
<p secHasNotRoles="ADMIN" secClass="disabled"></p> <!-- add class disabled if user has role ADMIN -->

When refreshing browser the route LoginGuard takes a time to get the state of logged user, and looks like is refreshing the page more then once?

Investigate how to keep that super fast, this is annoying while developing.

KeycloakListener is saving the token with sessionStorage, but this saved token is used nowhere.

Maybe if the token is used to not initiate a new login on every page refresh...

A modern report component module, that generates views to export in PDF.

The idea is a alternative to JasperReports (without the IDE).

Possible features:

• Master template file
• Orientation (vertical horizontal)
• Support for different paper sizes (A4, A3 etc...)
• Diferent styles
• Common sections (header, footer, detail, etc..)
• Different datasources
• Different format exports (excel, CVS)

Better readme text and SEO for npmjs.org

Upgrade to angular 7

Use webpack instead of rollup, less cognitive overhead and less dependencies

Update dependency to allow angular 4

Support for keycloak security polices

The page: https://angular-spa.netlify.com/auth/directives/ the configuration example has a syntax problem on it.

Would be nice to add a resource example

Delivery of documentation site

When using checkLoginIframe keycloak try to load a iframe page. If that operation return 400 the entire application stops.

Error:

TypeError: Cannot read property 'originalError' of undefined

The library should wrap errors operations and handle it to not break angular.

The promise returned by RefreshTokenHttpInterceptor throw exception if user not logged in.
That affects the application

Automatically move your cards to the right place based on the status and activity of your issues and pull requests.

Problem: Some apps need access to configuration variables that are in the environment, for example: URL for the api server in a cloud or docker cluster, keycloak url, realm and clientId.

This are not so much sensitive data, but are dynamic.

A nice solution would be to expose env variables to the client, that way the container could override the variable on startup and the client will pick up.

This feature need support from the server.

Provide a way to configure default behavior of security directives.

Docs: https://angular-spa.netlify.com/auth/directives/

See #2 for the feature

getLoginAccount() return a keycloak JSON object and not a Account object. The methods: isAccountInRole(role: string) and *hasAuthority(authority: string): boolean * are not present

When keycloak is not online injecting AuthService cause the issue:

VM2081:1 GET http://localhost:9080/auth/realms/master/protocol/openid-connect/login-status-iframe.html

VM2081:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:9080') does not match the recipient window's origin ('null').l @ VM2081:1(anonymous function) @ VM2081:1setSuccess @ VM2081:1C.onload @ VM2081:1wrapFn @ zone.js:698ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154ZoneTask.invoke @ zone.js:335

This makes all aplication to stop working, as angular zone is not protected against exceptions.

The solution is make keycloak run outside the zone

Keycloak.js is included in dependencies, but the docs say its not.

This module depends on keycloak.js javascript adapter, which is not included as a dependency, because you have many options in how to add it.

To facilitate writing tests, inspired on RouterTestingModule from angular.

This should:

• Provide a fake AuthService
• API to fake user and roles