Skip to content

Commit

Permalink
fix(docs): update articles copy
Browse files Browse the repository at this point in the history
  • Loading branch information
nnixaa authored Jun 25, 2018
1 parent 872645c commit f76ce1f
Show file tree
Hide file tree
Showing 15 changed files with 44 additions and 43 deletions.
6 changes: 3 additions & 3 deletions docs/articles/auth-guard.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Protecting application based on user authentication

Let's imaging we have the following application structure:
Let's imagine we have the following application structure:
- `/pages/*` - protected area available only for authenticated users
- `/auth/*` - authentication area (login/register/etc) available for non-authenticated users

Expand Down Expand Up @@ -93,12 +93,12 @@ const routes: Routes = [

```

As the result, it is not possible to access any of the `pages/*` if you are not an authenticated user.
As a result, it is not possible to access any of the `pages/*` if you are not an authenticated user.
<hr>

## Redirect non-authenticated to the login page

Additionally, you may want to redirect directly to `auth/login` when the user is accessing a restricted page.
Additionally, you may want to redirect straight to `auth/login` when the user is accessing a restricted page.
Let's modify our guard a bit to reflect this logic:

```ts
Expand Down
4 changes: 2 additions & 2 deletions docs/articles/auth-install.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

## Install the module

First, let's install the module as it's distributed as an npm package, but make sure you have the [Nebular Theme module up and running](https://akveo.github.io/nebulardocs/installation/add-into-existing-project).
First, let's install the module as it's distributed as npm package. Make sure you have the [Nebular Theme module up and running](https://akveo.github.io/nebulardocs/installation/add-into-existing-project).
Nebular Theme is required to use built-in Auth Components. If you are not going to use those at all, you can use `Auth Module` without the `Nebular Theme` module.

```bash
Expand Down Expand Up @@ -50,7 +50,7 @@ To add a strategy we need to call static `setup` method to pass a list of option

```

We also specified a `forms` key, which configures available options for the Auth Components.
We also specified `forms` key, that configures available options for the Auth Components.
We leave it empty for now and get back to it in the [Configuring UI](docs/auth/configuring-ui) article.
<hr>

Expand Down
10 changes: 5 additions & 5 deletions docs/articles/auth-intro.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Auth Module

The main goal of the Auth module is to provide a pluggable set of components and services for easier setup of the authentication layer for the Angular applications.
The module separates the UI part (login/register/etc components) from the business logic with help of the authentication `Strategies` layer.
The main goal of the Auth module is to provide a pluggable set of components and services for an easier setup of the authentication layer for Angular applications.
The module separates the UI part (login/register/etc components) from the business logic with the help of the authentication `Strategies` layer.

<div class="note note-info">
<div class="note-title">Note</div>
<div class="note-body">
The setup still requires backend services to communicate with.
The setup still requires communication with backend services.
</div>
</div>
<hr>
Expand All @@ -22,9 +22,9 @@ You can use the built-in components or create your custom ones.
<hr>

## Auth Strategies
- `NbDummyAuthStrategy` - simple strategy for testing purposes, could be used to simulate backend responses while API is in the development;
- `NbDummyAuthStrategy` - simple strategy for testing purposes, could be used for simulating backend responses while API is in the development;
- `NbPasswordAuthStrategy` - the most common email/login/password authentication strategy.
- `NbOAuth2AuthStrategy` - the most popular authentication framework that enables applications to obtain limited access to user accounts on an HTTP service.
- `NbOAuth2AuthStrategy` - the most popular authentication framework that enables applications to obtain limited access to user accounts on HTTP service.
<hr>

## Other helper services
Expand Down
14 changes: 7 additions & 7 deletions docs/articles/auth-oauth2.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Strategy

Using `NbOAuth2AuthStrategy` is becomes possible to configure authentication with a lot of 3rd party authentication providers, such as Google, Facebook, etc.
Using `NbOAuth2AuthStrategy` gives possibility to configure authentication with a lot of 3rd party authentication providers, such as Google, Facebook, etc.
There is no need in any backend implementation, as [OAuth2](https://tools.ietf.org/html/rfc6749) protocol enables completely server-less authentication flow as one of the options.

In this article we will setup and configure `NbOAuth2AuthStrategy` for [Google Authentication](https://developers.google.com/identity/protocols/OAuth2UserAgent)
Expand All @@ -9,7 +9,7 @@ based on [Implicit](https://tools.ietf.org/html/rfc6749#section-4.2) flow.

## Step 1. Obtain keys

As first step we need to setup an application and obtain its keys on the authentication server (Google in our case).
As a first step we need to setup an application and obtain its keys on the authentication server (Google in our case).
More details how to do this you can find on [Enable APIs for your project](https://developers.google.com/identity/protocols/OAuth2UserAgent#enable-apis) page.
We won't copy over this part of the article here, but as a result you should have your `client_id` - unique application identifier.
<hr>
Expand Down Expand Up @@ -37,8 +37,8 @@ export class YourModule {
}
```

So we imported `NbAuthModule` and provided a strategy we want to use. If you already have some strategy configuted - don't worry, you can simple append a new one to the `strategies` array.
We also assigned a `name` - `google`. We will use this alias later on to call the strategy.
So we imported `NbAuthModule` and provided a strategy we want to use. If you already have some strategy configurated - don't worry, you can just add a new one to the `strategies` array.
We also assigned a `name` - `google`. Later on we will use this alias to call the strategy.
<hr>

## Step 3. Configure
Expand Down Expand Up @@ -94,7 +94,7 @@ RouterModule.forChild([

## Step 5. Redirect URI

The last configuration bit is to setup the `redirect_uri` parameter. Make sure you added the url to the Google Console as per the [documentation](https://developers.google.com/identity/protocols/OAuth2UserAgent#redirecting).
The last configuration bit is to setup the `redirect_uri` parameter. Make sure you've added the url to the Google Console as per the [documentation](https://developers.google.com/identity/protocols/OAuth2UserAgent#redirecting).

Now let's complete the setup:
```ts
Expand Down Expand Up @@ -128,7 +128,7 @@ export class YourModule {

## Step 6. Complete your components

And finally, let's add some code to our component to initiate the authentication. First - `NbOAuth2LoginComponent`:
And finally, let's add code to our component to initiate the authentication. First - `NbOAuth2LoginComponent`:


```ts
Expand All @@ -155,7 +155,7 @@ export class NbOAuth2LoginComponent implements OnDestroy {
}
```
The code is pretty much straightforward - we call `NbAuthService`.`authenticate` method and pass our strategy alias - `google` subscribing to result.
This will prepare an `authorization` request url and redirect us to google authentication server.
This will prepare `authorization` request url and redirect us to google authentication server.

Now, we need to configure that "callback" url to be able to properly handle response:

Expand Down
2 changes: 1 addition & 1 deletion docs/articles/auth-strategy.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ We assume you already have the Auth module installed inside of your `*.module.ts
});

```
`email` here is an alias we assign to the strategy, so that we can mention it later on dynamically. This also allows us to configure multiple strategies with various configurations in one app.
`email` here is an alias we've assigned to the strategy, so that we can dynamically mention it later. This also allows us to configure multiple strategies with various configurations in one app.
<hr>

## Setup API configuration
Expand Down
10 changes: 5 additions & 5 deletions docs/articles/auth-token.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ you have successfully configured an auth strategy and adjusted auth look & fell
It's time to get a user token after successful authentication to be able to communicate with the server and, for instance, show a username in the header of the application.
Let's assume that your backend returns a JWT token so that we can use the token payload to extract a user info out of it.

Each `Strategy` specifies which token class it's going to use by default. For example, `NbPasswordAuthStrategy` uses `NbAuthSimpleToken`,
Each `Strategy` specifies which token class is going to be used by default. For example, `NbPasswordAuthStrategy` uses `NbAuthSimpleToken`,
and `NbOAuth2AuthProvider` uses `NbAuthOAuth2Token`. It is also possible to specify another token class if it is required, like in the example below.
<hr>

## Configure token type

Let's tell Nebular that we are waiting for a JWT token instead of simple string token,
to do that we just need to provide a respective class. Open your `app.module.ts` and adjust your `Strategy` configuration:
Let's tell Nebular that we are waiting for a JWT token instead of a simple string token.
We just need to provide a respective class to do that. Open your `app.module.ts` and adjust your `Strategy` configuration:

```typescript

Expand Down Expand Up @@ -55,7 +55,7 @@ By default `NbPasswordAuthStrategy` expects that your token is located under the
}
```

We'll assume that our API returns a token as just `{ token: 'some-jwt-token' }` not wrapping your response in a `data` property, let's tell that to Nebular:
We'll assume that our API returns a token as just `{ token: 'some-jwt-token' }` not wrapping your response in `data` property, let's tell that to Nebular:

```typescript

Expand Down Expand Up @@ -91,7 +91,7 @@ Okay, let's use the token to extract a payload and show a username in the header
import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
```

Then, let's create a `user` variable, which will store the token payload inside of the component:
Then, let's create `user` variable, which will store the token payload inside of the component:

```typescript

Expand Down
2 changes: 1 addition & 1 deletion docs/articles/auth-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ export const routes: Routes = [
];
```
That's it. Now you can adjust the components the way you need. Though please make sure to keep the NbAuthService related logic untouched, so that the components may still communicate with the auth strategies.
That's it. Now you can adjust the components in the way you need. Though please make sure to keep the NbAuthService related logic untouched, so that the components may still communicate with the auth strategies.
<hr>
## Where to next
Expand Down
4 changes: 2 additions & 2 deletions docs/articles/backend-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This section describes approaches of integration of Nebular application with bac

Despite there's an option to do CORS requests to API server directly, we don't advise to do so. This way has disadvantages in terms of security and performance. In terms of security when you do CORS request you basically expose your API server URL to everybody. Your API server should take additional measures to make sure some URLs are not accessible, because it is exposed to the web. As for performance, CORS requests require to send preflight OPTIONS request before each HTTP request. This adds additional HTTP overhead.

The solution we suggest is to use proxy for your API server. In this case you can make your app accessible through some sub-url. For example, if your application hosted under url `website.com` and your index file is located at `website.com/index.html`, you can make your API root accessible on `website.com/api`. This is well supported by angular-cli/webpack-dev-server for development setup and by web servers for production setup. Let's review these setups:
The solution we suggest is to use proxy for your API server. In this case you can make your app accessible through some sub-url. For example, if your application's hosted under url `website.com` and your index file is located at `website.com/index.html`, you can make your API root accessible on `website.com/api`. This is well supported by angular-cli/webpack-dev-server for development setup and by web servers for production setup. Let's review these setups:
<hr>

## angular-cli/webpack-dev-server setup
Expand Down Expand Up @@ -36,7 +36,7 @@ That's it. Now you can access `/api` URL from your Nebular application and your

## Production setup

Production setup is not much different from development setup. The only difference is that usually you don't use there angular-cli or webpack-dev-server to host your HTML/CSS/JS. You usually want to use some web server for that. We at Akveo mostly use [nginx](https://nginx.org/en/) for this use case. Below is the sample configuration for this particular web server. For others it is not that much different.
Production setup is not much different from development setup. The only difference is that usually you don't use there angular-cli or webpack-dev-server to host your HTML/CSS/JS. Usually we all use some web server for that. At Akveo we mostly use [nginx](https://nginx.org/en/) for this use case. Below there is a sample configuration for this particular web server. For others it is not that much different.

Usually you create new virtual host with some similar configuration:

Expand Down
2 changes: 1 addition & 1 deletion docs/articles/concept-3rd-party.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Currently Nebular Theme system is integrated with the following 3rd party module
- ng2-smart-table;
- angular2-toaster.

That mean that we created style overriding for these modules, so that you can change component's look & feel using Nebular theme variables.
It means that we've created style overriding for these modules, so that you can change component's look & feel using Nebular theme variables.
For example, if you change the `color-primary` variable, bootstrap components using this color will be changed accordingly.


Expand Down
15 changes: 8 additions & 7 deletions docs/articles/concept-theme-system.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Nebular Theme System

Nebular Theme System - is a set of rules we put into how SCSS files and variables are organized to achieve the following goals:
Nebular Theme System is a set of rules we put into how SCSS files and variables are organized to achieve the following goals:

- ability to flexibly change looks & feel of the application by managing variables, without changing SCSS itself;
- ability to switch between visual themes in a runtime without reloading the page;
Expand Down Expand Up @@ -68,15 +68,15 @@ For example - header component variables:
...
```
As you can see, you have 8 variables for a pretty simple component and from the other side, 6 of them are inherited from the default values.
That means that if you want to create a new theme with a united look & feel of the components - in most cased you would need to change around 10 generic variables, such as `color-bg`, `shadow`, etc
It means that if you want to create a new theme with a united look & feel of the components - in most cases you would need to change around 10 generic variables, such as `color-bg`, `shadow`, etc.
to change the UI completely.

List of component style variables is specified in the component documentation, for example [styles for header component](docs/components/layout/theme#nblayoutheadercomponent).
<hr>

## Variables Usage

Now, if you want to use the variables in your custom style files, all you need to do (of course, after the [successful setup of the Theme System](docs/guides/enabling-theme-system) is call `nb-theme(var-name)` function:
Now, if you want to use the variables in your custom style files, all you need to do (of course, after the [successful setup of the Theme System](docs/guides/enabling-theme-system) is to call `nb-theme(var-name)` function:

```scss
@import '../../../@theme/styles/themes';
Expand All @@ -86,22 +86,23 @@ Now, if you want to use the variables in your custom style files, all you need t
background: nb-theme(card-bg); // and use it
}
```
Depending of the currently enabled theme and the way `card-bg` inherited in your theme - you will get the right color.
Depending on the currently enabled theme and the way `card-bg` inherited in your theme, you will get the right color.
<hr>

## Built-in themes

Currently, there are 2 built-in themes:
- `default` - clean white business theme.
- `cosmic` - dark theme.
- `default` - clean white theme
- `cosmic` - dark theme
- `corporate` - firm business theme

Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme.
<hr>

## Magic of multiple themes with hot-reload

As you can see from the [ngx-admin demo](http://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=doc_page), you can switch themes in the runtime without reloading the page.
That is useful when you have multiple visual themes per user role or want to provide your user with such configuration so that the user can decide which theme works best for him.
It is useful when you have multiple visual themes per user role or want to provide your user with such a configuration so that he can decide which theme works best for him.
The only requirement for the feature to work is to wrap all of your component styles into special mixin `nb-install-component` and use `nb-theme` to get the right value:

```scss
Expand Down
8 changes: 4 additions & 4 deletions docs/articles/enabling-theme-system.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

```

And that's it. In the future, if you need any of the advanced features - you can easily start using them by going through the Normal/Advanced setup steps.
And that is all. In the future, if you need any of the advanced features - you can easily start using them by going through the Normal/Advanced setup steps.
<hr>

## Normal setup
Expand Down Expand Up @@ -63,7 +63,7 @@ $nb-themes: nb-register-theme((

```

3) At this step you already can customize the variables to change components look and behavior. To be able to use these (or new) variables into your custom components, just add an import line into any `*.component.scss` file:
3) At this step you already can customize the variables to change components' look and behavior. To be able to use these (or new) variables into your custom components, just add an import line into any `*.component.scss` file:

```scss
@import '../../../@theme/styles/themes';
Expand Down Expand Up @@ -91,7 +91,7 @@ At this step you will have something similar to the image below:

This setup assumes that you have gone through the *Normal Setup* steps.

1) Assuming you already have the `themes.scss` file with `default` theme from the previous step, let's add there a new theme, which will be based on the `cosmic` Nebular theme and named `dark`:
1) Assuming you already have the `themes.scss` file with `default` theme from the previous step, let's add a new theme there, that will be based on the `cosmic` Nebular theme and named `dark`:

```scss
...
Expand Down Expand Up @@ -172,7 +172,7 @@ At this point when you enable your `dark` theme your page should look like this:
</div>
</div>

Done, now you can change a theme in the runtime. Here's how you can do this from a component:
Done, now you can change a theme in the runtime. Here's how you can do it from a component:

```scss
// include the theme service
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Nebular is a set of essential modules for your next Angular application.

The purpose of the modules is to solve generic tasks faster and more efficient so that you can focus on a business logic and leave routine behind.
The purpose of the modules is to solve generic tasks faster and more efficient so that you can focus on business logic and leave routine behind.

<div class="note note-info">
<div class="note-title">Current state</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/articles/install-into-existing.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Include Bootstrap and default Nebular theme CSS files into your `.angular-cli.js
## Create a page
Now, let's create a simple Nebular page (header + sidebar) in your project. We assume that you have a separate module per page, let's open your `some-page.module.ts` and import necessary layout components:
Now, let's create a simple Nebular page (header + sidebar) in your project. We suppose that you have a separate module per page, let's open your `some-page.module.ts` and import necessary layout components:
```ts
import { RouterModule } from '@angular/router'; // we also need angular router for Nebular to function properly
Expand Down Expand Up @@ -125,7 +125,7 @@ And done! At this step, you should have a page with a simple layout on it lookin
<div class="note-title">Adding into existing page</div>
<div class="note-body">
In case you already have some code on your page and want to mix it with Nebular components you would need to place your page code inside of the Nebular layout.
For Nebular to work it is required to have the `<nb-layout></nb-layout>` component at the top.
`<nb-layout></nb-layout>` is a required root component for Nebular to work.
</div>
</div>
<hr>
Expand Down
Loading

0 comments on commit f76ce1f

Please sign in to comment.