diff --git a/.angular-cli.json b/.angular-cli.json
index 6633830990..a2fa2e57f0 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -82,7 +82,8 @@
"assets": [
"assets",
"favicon.ico",
- "favicon.png"
+ "favicon.png",
+ "google46533d2e7a851062.html"
],
"index": "index.html",
"main": "main.ts",
diff --git a/DEV_DOCS.md b/DEV_DOCS.md
index a7fac4bbf2..46cde7d13f 100644
--- a/DEV_DOCS.md
+++ b/DEV_DOCS.md
@@ -45,6 +45,8 @@ We have to:
- theme - `@nebular/theme` npm package, main framework package
- auth - `@nebular/auth` npm package, auth package (login, register, etc)
- icons - `nebular-icons` npm package, cool icons font
+ - security - `@nebular/security` npm package, security framework package
+
## Auth // TODO
diff --git a/README.md b/README.md
index fbe993fae9..8d156959b6 100644
--- a/README.md
+++ b/README.md
@@ -17,11 +17,13 @@ What is included:
- Authentication components (login/register/reset password/restore password).
- Multiple configurable providers (backend connectors).
- Helpers for token management (storing, passing with HTTP requests, etc).
-3) [ ] @nebular/acl - module for roles and permissions management
+3) [x] @nebular/security
+ - Roles and permissions management (ACL)
+ - `*nbIsGranted` conditional directive
4) [ ] @nebular/dashboard - module for draggable/resizable dashboards creation
5) [ ] @nebular/data - application data & state management
6) [x] Admin dashboard starter kit [ngx-admin](http://github.com/akveo/ngx-admin) - application based on Nebular modules with beautiful IOT components.
-7) [ ] More great features!
+7) [ ] More great features to come!
### Demo Application:
@@ -30,10 +32,10 @@ What is included:
### Use cases
-Nebular is a great toolkit if you build a Rich UI application based on Angular, and don't want to spend your time on painful project setup. It provides you with a unified approach for managing styles for various components (3rd party including), pure components tightly connect to Angular and authentication layer easily configurable for your API.
+Nebular is a great toolkit if you build a Rich UI web-application based on Angular, and don't want to spend your time on painful project setup. It provides you with a unified approach for managing styles of various components (3rd party including), pure components tightly connected to Angular and authentication layer easily configurable for your API.
### The purpose
-There are a lot of awesome front-end frameworks out there these days. They provide a massive quantity of useful features making our lives more comfortable. Our intention is not to create a new one as we are pretty much aware of the complexity and amount of work developers put on their creations. But as developers, we feel that nowadays front-end development is disjointed. You have to search for libraries, go through the different installation process, everything looks different, and sometimes it's just annoying that you can't just sit and start going. That's why we are on a mission to assemble together the most usefule modules and libraries, join them with a unified application and graphical interface creating a great toolkit for easier setup.
+There are a lot of awesome front-end frameworks and libraries out there these days. They provide a massive quantity of useful features making our lives more comfortable. Our intention is not to create a new one as we are pretty much aware of the complexity and amount of work developers put on their creations. But as developers, we feel that nowadays front-end development is disjointed. You have to search for libraries, go through the different installation process, everything looks different, and sometimes it's just annoying that you can't just sit and start going. That's why we are on a mission to assemble together the most usefule modules and libraries, join them with a unified application and graphical interface creating a great toolkit for easier setup.
### Documentation
Installation, customization and other useful articles: https://akveo.github.io/nebular
diff --git a/docs/app/homepage/homepage.component.html b/docs/app/homepage/homepage.component.html
index dfa1556a47..c6eeb238fc 100644
--- a/docs/app/homepage/homepage.component.html
+++ b/docs/app/homepage/homepage.component.html
@@ -41,7 +41,7 @@
Nebular
Set of essential modules for your next Angular application.
Nebular's primary goal is to assemble together and connect the most awesome features and libraries
- creating an efficient ecosystem to speed up and simpify the development.
+ creating an efficient ecosystem to speed up and simplify the development.
Now front-end authentication layer is just a matter of a configuration. Concepts.
+
Auth & Security Module
+
Now front-end authentication and authorization are just a matter of a configuration. Auth & Security Concepts.
diff --git a/docs/app/homepage/homepage.component.ts b/docs/app/homepage/homepage.component.ts
index 4a1f4540c3..3637e50907 100644
--- a/docs/app/homepage/homepage.component.ts
+++ b/docs/app/homepage/homepage.component.ts
@@ -117,7 +117,7 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
}
ngOnInit() {
- this.titleService.setTitle('Nebular - full-featured framework based on Angular.');
+ this.titleService.setTitle('Nebular is a set of essential modules for your next Angular application.');
}
ngAfterViewInit() {
diff --git a/docs/articles/index.md b/docs/articles/index.md
index f917b9e759..648d122969 100644
--- a/docs/articles/index.md
+++ b/docs/articles/index.md
@@ -14,7 +14,7 @@ In simpler words, Nebular is a set of modules (components, services & styles) he
## What's included
-What is included:
+Nebular modules are distributed as separated `npm` packages, here's a list of currently available:
- **@nebular/theme**
- Theme System - set of SCSS rules, which allow you to modify application looks & feel by changing style-variables, with fewer custom styles.
@@ -24,7 +24,9 @@ What is included:
- Authentication components (login/register/reset password/restore password).
- Multiple configurable providers (backend connectors).
- Helpers for token management (storing, passing with HTTP requests, etc).
-- *@nebular/acl* - module for roles and permissions management. Coming soon.
+- **@nebular/security** - module for roles and permissions management.
+
+
- *@nebular/dashboard* - module for draggable/resizable dashboards creation. Coming soon.
- *@nebular/data* - application data & state management. Coming soon.
- **Admin dashboard starter kit ngx-admin** - application based on Nebular modules with beautiful IOT components.
diff --git a/docs/articles/security-acl-configuration.md b/docs/articles/security-acl-configuration.md
new file mode 100644
index 0000000000..6e08fcc8d9
--- /dev/null
+++ b/docs/articles/security-acl-configuration.md
@@ -0,0 +1,221 @@
+## Abstract
+
+Permissions control is a general task when it comes to development of more or less complex web application. Your application may have various roles and resources you need to protect.
+ACL (access control list) provides a flexible way of configuring "who can do what against what resource".
+
+In this article we configure a common setup when the app has three roles (`guest`, `user` and `moderator`), the roles have different permissions (`view`, `create`, `remove`)
+and the application contains two type of resources that needs to be protected (`news`, `comments`).
+
+## ACL Configuration
+
+Nebular ACL has a simple way of setting it up. When registering a module you can specify a set of ACL rules by simply providing it as a module configuration.
+
+Let's assume that our guest users can only `view` `news` and `comments`, users can do everything as guests, but also can `create` `comments`, and moderators can also `create` and `remove` `news` and `comments`.
+Now, let's convert this into an ACL configuration object which Nebular can understand. Open your `app.module.ts` and change the `NbSecurityModule.forRoot()` call as follows:
+
+```typescript
+
+@NgModule({
+ imports: [
+ // ...
+
+ NbSecurityModule.forRoot({
+ accessControl: {
+ guest: {
+ view: ['news', 'comments'],
+ },
+ user: {
+ parent: 'guest',
+ create: 'comments',
+ },
+ moderator: {
+ parent: 'user',
+ create: 'news',
+ remove: '*',
+ },
+ },
+ }),
+
+ ],
+
+```
+
+As you can see the configuration is pretty much straightforward, each role can have a list of permissions (view, create, remove) and resources that are allowed for those permissions. We can also specify a `*` resource,
+which means that we have a permission againts any resource (like moderators can remove both news and comments).
+
+
+## Role Configuration
+
+So far we told Nebular Security what roles-permissions-resources our application has. Now we need to specify how Nebular can determine a role of currently authenticated user.
+To do so we need to create a `RoleProvider` with one simple method `getRole`, which returns an `Observable` of a role.
+In a simplest form we can provide this service directly in the main module:
+
+
+```typescript
+// ...
+
+import { of as observableOf } from 'rxjs/observable/of';
+import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
+
+
+@NgModule({
+ imports: [
+ // ...
+
+ NbSecurityModule.forRoot({
+ // ...
+ }),
+
+ ],
+ providers: [
+ // ...
+ {
+ provide: NbRoleProvider,
+ useValue: {
+ getRole: () => {
+ return observableOf('guest');
+ },
+ },
+ },
+ ],
+```
+That's easy we have just provided a role, so that Nebular can determine which user is currently accessing the app.
+The good thing about this configuration is that it's not tightly coupled with the rest of your authentication flow, which gives you a lot of flexibility over it.
+
+But, in our example the role is "hardcoded", which in the real world app would be dynamic and depend on the current user.
+
+Assuming that you already have `Nebular Auth` module fully configured and functioning based on `JWT` we will adjust the example to retrieve a role from the user token.
+
+Let's create a separate `role.provider.ts` service in order not to put a lot of logic into the module itself:
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators/map';
+
+import { NbAuthService, NbAuthJWTToken } from '@nebular/auth';
+import { NbRoleProvider } from '@nebular/security';
+
+
+@Injectable()
+export class RoleProvider implements NbRoleProvider {
+
+ constructor(private authService: NbAuthService) {
+ }
+
+ getRole(): Observable {
+ // ...
+ }
+}
+
+```
+
+Now, let's complete the `getRole` method to extract the role from the token:
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators/map';
+
+import { NbAuthService, NbAuthJWTToken } from '@nebular/auth';
+import { NbRoleProvider } from '@nebular/security';
+
+@Injectable()
+export class RoleProvider implements NbRoleProvider {
+
+ constructor(private authService: NbAuthService) {
+ }
+
+ getRole(): Observable {
+ return this.authService.onTokenChange()
+ .pipe(
+ map((token: NbAuthJWTToken) => {
+ return token ? token.getPayload()['role'] : 'guest';
+ }),
+ );
+ }
+}
+```
+
+So we subscribe to the `tokenChange` observable, which will produce a new token each time authentication change occurres.
+Then we simply get a role from a token (for example simplicity, we assume that token payload always has a role value) or return default `guest` value.
+
+Don't worry if your setup does not use Nebular Auth. You can adjust this code to retrieve a user role from any service of your own.
+
+
+And let's provide the service in the app module:
+
+```typescript
+// ...
+
+import { RoleProvider } from './role.provider';
+import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
+
+
+@NgModule({
+ imports: [
+ // ...
+
+ NbSecurityModule.forRoot({
+ // ...
+ }),
+
+ ],
+ providers: [
+ // ...
+ { provide: NbRoleProvider, useClass: RoleProvider }, // provide the class
+ ],
+```
+
+
+## Usage
+
+Finally, we can move on to the part where we start putting security rules in our app. Let's assume that we have that `Post Comment` button, that should only be shown to authenticated users (with a role `user`).
+So we need to hide the button for guests.
+
+Nebular Security provides us with a simple `*nbIsGranted` conditional directive, which under the hood works as `*ngIf`, showing or hiding a template block based on a user role:
+
+```typescript
+@Component({
+ // ...
+ template: `
+
+ `,
+})
+export class CommentFormComponent {
+// ...
+```
+We just need to pass a `permission` and some `resource` in order to control the button visibility.
+
+For more advanced use cases, we can directly use the `NbAccessChecker` service. It provides you with `isGranted` method , which returns an `Observable` of the ACL check result.
+We can adjust our example to utilize it. In your `comment-form.component.ts`, import the `NbAccessChecker` service.
+
+```typescript
+import { Component } from '@angular/core';
+import { NbAccessChecker } from '@nebular/security';
+
+@Component({
+ // ...
+})
+export class CommentFormComponent {
+
+ constructor(public accessChecker: NbAccessChecker) { }
+}
+```
+
+And let's add an `if` statement to the `Post Comment` button, so that it is only shown when permitted:
+
+```typescript
+@Component({
+ // ...
+ template: `
+
+ `,
+})
+export class CommentFormComponent {
+// ...
+```
+We call `isGranted` method, which listens to the currently provided role and checks it permissions against specified in the ACL configuration.
+Moreover, as it listens to the *role change*, it hides the button if authentication gets changed during the app usage.
+
+Same way we can call the `isGranted` method from any part of the app, including router guards and services, which gives us a transparent and flexibly configurable way to manage user access to various resources.
diff --git a/docs/articles/security-install.md b/docs/articles/security-install.md
new file mode 100644
index 0000000000..7b5a48fba4
--- /dev/null
+++ b/docs/articles/security-install.md
@@ -0,0 +1,44 @@
+
+
Note
+
+ If you use our [ngx-admin starter kit](#/docs/installation/based-on-starter-kit-ngxadmin-ngxadmin) then you already have the Security module in place.
+
+
+
+## Installation steps
+
+1) First, let's install the module as it's distributed as an npm package. Security module doesn't have a dependency on Auth or Theme modules, but it is recommended to use them in conjunction.
+
+
+```bash
+
+npm i @nebular/security
+```
+
+2) Import the module:
+
+```typescript
+
+import { NbSecurityModule } from '@nebular/security
+
+```
+
+3) Now, let's register the module in the root module:
+
+```typescript
+
+@NgModule({
+ imports: [
+ // ...
+
+ NbSecurityModule.forRoot(),
+
+```
+
+Great, at this stage we have installed Nebular Security and ready to configure it.
+
+
+
+## Where to next
+
+- Roles & Permissions [Configuration & Usage](#/docs/security/acl-configuration--usage)
diff --git a/docs/articles/security-intro.md b/docs/articles/security-intro.md
new file mode 100644
index 0000000000..448a5a8a18
--- /dev/null
+++ b/docs/articles/security-intro.md
@@ -0,0 +1,27 @@
+Security is an important part of any adult web application. It is a common task to manage a user access to particular resources.
+Unlike the `Nebular Auth`, which provides a way to `authenticate` a user, `Nebular Security` helps you to `authorize` a user to access some of the application resources.
+
+
+
Warning
+
+ Front-end ACL won't resolve all of the security issues and just provides a better user expiriece for your application.
+ It is essential to duplicate security rules on the back-end side.
+
- 
diff --git a/docs/app/homepage/homepage.component.ts b/docs/app/homepage/homepage.component.ts
index 4a1f4540c3..3637e50907 100644
--- a/docs/app/homepage/homepage.component.ts
+++ b/docs/app/homepage/homepage.component.ts
@@ -117,7 +117,7 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
}
ngOnInit() {
- this.titleService.setTitle('Nebular - full-featured framework based on Angular.');
+ this.titleService.setTitle('Nebular is a set of essential modules for your next Angular application.');
}
ngAfterViewInit() {
diff --git a/docs/articles/index.md b/docs/articles/index.md
index f917b9e759..648d122969 100644
--- a/docs/articles/index.md
+++ b/docs/articles/index.md
@@ -14,7 +14,7 @@ In simpler words, Nebular is a set of modules (components, services & styles) he
## What's included
-What is included:
+Nebular modules are distributed as separated `npm` packages, here's a list of currently available:
- **@nebular/theme**
- Theme System - set of SCSS rules, which allow you to modify application looks & feel by changing style-variables, with fewer custom styles.
@@ -24,7 +24,9 @@ What is included:
- Authentication components (login/register/reset password/restore password).
- Multiple configurable providers (backend connectors).
- Helpers for token management (storing, passing with HTTP requests, etc).
-- *@nebular/acl* - module for roles and permissions management. Coming soon.
+- **@nebular/security** - module for roles and permissions management.
+
+
- *@nebular/dashboard* - module for draggable/resizable dashboards creation. Coming soon.
- *@nebular/data* - application data & state management. Coming soon.
- **Admin dashboard starter kit ngx-admin** - application based on Nebular modules with beautiful IOT components.
diff --git a/docs/articles/security-acl-configuration.md b/docs/articles/security-acl-configuration.md
new file mode 100644
index 0000000000..6e08fcc8d9
--- /dev/null
+++ b/docs/articles/security-acl-configuration.md
@@ -0,0 +1,221 @@
+## Abstract
+
+Permissions control is a general task when it comes to development of more or less complex web application. Your application may have various roles and resources you need to protect.
+ACL (access control list) provides a flexible way of configuring "who can do what against what resource".
+
+In this article we configure a common setup when the app has three roles (`guest`, `user` and `moderator`), the roles have different permissions (`view`, `create`, `remove`)
+and the application contains two type of resources that needs to be protected (`news`, `comments`).
+
+## ACL Configuration
+
+Nebular ACL has a simple way of setting it up. When registering a module you can specify a set of ACL rules by simply providing it as a module configuration.
+
+Let's assume that our guest users can only `view` `news` and `comments`, users can do everything as guests, but also can `create` `comments`, and moderators can also `create` and `remove` `news` and `comments`.
+Now, let's convert this into an ACL configuration object which Nebular can understand. Open your `app.module.ts` and change the `NbSecurityModule.forRoot()` call as follows:
+
+```typescript
+
+@NgModule({
+ imports: [
+ // ...
+
+ NbSecurityModule.forRoot({
+ accessControl: {
+ guest: {
+ view: ['news', 'comments'],
+ },
+ user: {
+ parent: 'guest',
+ create: 'comments',
+ },
+ moderator: {
+ parent: 'user',
+ create: 'news',
+ remove: '*',
+ },
+ },
+ }),
+
+ ],
+
+```
+
+As you can see the configuration is pretty much straightforward, each role can have a list of permissions (view, create, remove) and resources that are allowed for those permissions. We can also specify a `*` resource,
+which means that we have a permission againts any resource (like moderators can remove both news and comments).
+