|Version | Framework | |--- |--- | | 3.0.1 | Angular |
npm install test-code-protectionBy default all the features are disable, so you need to configure the features that you want to use. The configuration is an interface with the next structure:
~~~
interface Configuration {
preventDeveloperTools ?: boolean;
windowBlur ?: Action;
visibilityChange ?: Action;
debuggerOn ?: Action;
timeout ?: TimerAction;
}
~~~
| Attribute | Type | Description|
|---|---|---|
| preventDeveloperTools | boolena| Disable the context menu and the shotcuts used for access to Developer Tools|
| windowBlur | Action | Detects when the document is not active and excecutes the configured task |
| visibilityChange | Action| Detects when the window is not active and excecutes the configured task |
| debuggerOn | Action| Detects when the developer tools window is active and excecutes the configured task |
| timeout |TimerAction | Enable a timer and excecutes the configured task whent the timeout|
> Action & TimerAction
> ~~~
> interface Action {
> enabled: boolean;
> behavior ?: ActionBehavior;
> }
> interface TimerAction extends Action {
> maxTime?: number;
> }
> ~~~
> | Attribute | Type | Description |
> |---|---|---|
> | enabled | boolean| Enable/disable the task|
> | behavior | ActionBehavior | Sets the behavior triggered when the user's action is detected |
> | maxTime (only for timeout)| number | Sets the time to wait in miliseconds before the timer action be triggerred |
> ActionBehavior
> | Value | Description |
> |---|---|
> | ERROR_MESSAGE | The directives will notify an error |
> | REDIRECT | Redirects the user to the component defined through the redirectionToComponent attribute |
#### Example
~~~
{
preventDeveloperTools : true,
windowBlur : {enabled : true, behavior : ActionBehavior.ERROR_MESSAGE},
visibilityChange : {enabled : true, behavior : ActionBehavior.ERROR_MESSAGE},
debuggerOn : {enabled: false, behavior : ActionBehavior.ERROR_MESSAGE},
timeout: {enabled: false, behavior : ActionBehavior.ERROR_MESSAGE, maxTime: 5 60 1000}
};
~~~
#### Description
Global code protections is an Angular Directive that allows the developer to prevent some user's behavior along all the app.
#### How to use
Just add the global-code-protection tag in the HTML file and set your custom configuration through the [configuration] attribute.
> - If some configuration attribute has as ActionBehavior the "REDIRECT" value, the redirection will be to the "redirectionToComponent" attribute, so add the route you want the user to be redirected
> - If some configuration attribute has as ActionBehavior the "ERROR_MESSAGE" value, the error will be notified through the "(onerror)" event, so set your method's name that will manage the errors
~~~
redirectionToComponent="error"
(onerror)="onerror($event)">
~~~
> Suggestion
> Use this directive in app.component.html