Skip to content

Commit

Permalink
fix(docs): articles grammar (#1810)
Browse files Browse the repository at this point in the history
  • Loading branch information
nnixaa authored and yggg committed Jul 12, 2019
1 parent 3bba9e2 commit a0efb6b
Show file tree
Hide file tree
Showing 19 changed files with 55 additions and 117 deletions.
2 changes: 1 addition & 1 deletion docs/articles/auth/azure.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Configuring Azure OAuth2 with Nebular Auth

Using `NbOAuth2AuthStrategy` gives possibility to configure authentication with a lot of 3rd party authentication providers, such as Azure in our example.
Using `NbOAuth2AuthStrategy` gives the possibility to configure authentication with a lot of 3rd party authentication providers, such as Azure in our example.
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.

## Complete example
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/auth/custom-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class NgxAuthModule {

```

A couple of required modules for the future components. Also, notice how we imported the `NbAuthModule` but without the `forRoot` call.
A couple of required modules for future components. Also, notice how we imported the `NbAuthModule` but without the `forRoot` call.
This way we imported the declared auth components, such as for example `NbAuthBlock`, so we can use it inside of our components.

Now, let's fill in the routing file:
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/auth/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import { NbPasswordAuthStrategy, NbAuthModule } from '@nebular/auth';
## Configure a strategy
Now, let's configure the module by specifying available strategies, in our case we add `NbPasswordAuthStrategy`.
Now, let's configure the module by specifying available strategies, in our case, we add `NbPasswordAuthStrategy`.
To add a strategy we need to call static `setup` method to pass a list of options:
```ts
Expand Down
4 changes: 2 additions & 2 deletions docs/articles/auth/intro.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Auth Module

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 main goal of the Auth module is to provide a pluggable set of components and services for 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">
Expand All @@ -22,7 +22,7 @@ You can use the built-in components or create your custom ones.
<hr>

## Auth Strategies
- `NbDummyAuthStrategy` - simple strategy for testing purposes, could be used for simulating backend responses while API is in the development;
- `NbDummyAuthStrategy` - a 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 HTTP service.
<hr>
Expand Down
18 changes: 9 additions & 9 deletions docs/articles/auth/oauth2.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Configuring Google OAuth2 with Nebular Auth

Using `NbOAuth2AuthStrategy` gives possibility to configure authentication with a lot of 3rd party authentication providers, such as Google, Facebook, etc.
Using `NbOAuth2AuthStrategy` gives the 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,9 +9,9 @@ based on [Implicit](https://tools.ietf.org/html/rfc6749#section-4.2) flow.

## Step 1. Obtain keys

As a 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 set up 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.
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>

## Step 2. Enable a Strategy
Expand All @@ -38,7 +38,7 @@ export class YourModule {
```

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.
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 @@ -74,7 +74,7 @@ export class YourModule {

## Step 4. Routes

We need at least two routes to be able to organize OAuth2 flow. First one - "login" route, where we can simply have a button to initiate authentication process.
We need at least two routes to be able to organize OAuth2 flow. First one - "login" route, where we can simply have a button to initiate the authentication process.
The second one - so-called "callback" route, we need to handle OAuth2 server response.
Let's add both to our routing referring some empty components:

Expand All @@ -94,7 +94,7 @@ RouterModule.forChild([

## Step 5. Redirect URI

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).
The last configuration bit is to set up 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 @@ -155,9 +155,9 @@ 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 `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:
Now, we need to configure that "callback" URL to be able to properly handle response:

```ts
@Component({
Expand Down Expand Up @@ -187,7 +187,7 @@ export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
}
}
```
Here we call the same `authenticate` method, which will determines that we are in the `redirect` state, handle the response, save your token and redirect you back to your app.
Here we call the same `authenticate` method, which will determine that we are in the `redirect` state, handle the response, save your token and redirect you back to your app.
<hr>

## Complete example
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/auth/redirect.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Redirecting user after login/registration

At this step, we assume that Nebular Auth module is up and running,
At this step, we assume that the Nebular Auth module is up and running,
you have successfully configured an auth strategy and adjusted auth look & fell accordingly with your requirements.

By default, Nebular redirects to the `/` page on success, and stays on the same page on error.
Expand Down
6 changes: 3 additions & 3 deletions docs/articles/auth/strategy.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ In Nebular terms `Auth Strategy` is a class containing authentication logic spec
It accepts user input (login/email/password/token/etc), communicates the input to the backend API and finally provides the resulting output back to the Auth UI layer.
Currently, there are two Auth Strategies available out of the box:

- `NbDummyAuthStrategy` - simple strategy for testing purposes, could be used to simulate backend responses while API is in the development;
- `NbDummyAuthStrategy` - a simple strategy for testing purposes, could be used to simulate backend responses while API is in the development;
- `NbPasswordAuthStrategy` - the most common email/password authentication strategy.

Each Strategy has a list of configurations available with the default values set. But you can adjust the settings based on your requirements.
<hr>

## Configure a strategy

As an example, let's configure API endpoints for the `NbPasswordAuthStrategy`. The strategy is configured by default, please take a look at the [default configuration values](docs/auth/nbpasswordauthstrategy) if you need any custom behaviour.
As an example, let's configure API endpoints for the `NbPasswordAuthStrategy`. The strategy is configured by default, please take a look at the [default configuration values](docs/auth/nbpasswordauthstrategy) if you need any custom behavior.
We assume you already have the Auth module installed inside of your `*.module.ts`:


Expand All @@ -34,7 +34,7 @@ We assume you already have the Auth module installed inside of your `*.module.ts
});

```
`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.
`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
12 changes: 6 additions & 6 deletions docs/articles/auth/token.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

## Receiving user token after login/registration

At this step, we assume that Nebular Auth module is up and running,
At this step, we assume that the Nebular Auth module is up and running,
you have successfully configured an auth strategy and adjusted auth look & fell accordingly with your requirements.

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.
It's time to get a user token after a successful authentication to be able to communicate with the server and, for instance, show 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 user info out of it.

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
## Configure the token type

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:
Expand Down Expand Up @@ -85,13 +85,13 @@ We'll assume that our API returns a token as just `{ token: 'some-jwt-token' }`

## Use token

Okay, let's use the token to extract a payload and show a username in the header. Open your `header.component.ts` and import the following services:
Okay, let's use the token to extract a payload and show username in the header. Open your `header.component.ts` and import the following services:

```typescript
import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
```

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

```typescript

Expand Down
2 changes: 1 addition & 1 deletion docs/articles/getting-started/professional-services.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Professional Services
Evolve your products and apps to expand your markets. Nebular Services are set to help speed up the evolution of your business.
The Nebular team is ready to bring you their expertise with following services.
The Nebular team is ready to bring you their expertise with the following services.

### Theme customization
Let Akveo’s experts help you get more out of your Nebular experience. Modify, extend, and tailor Nebular components and controls to fit your needs. Our developers know the products inside and out, so there's no need to spend hours searching for a solution. We create themes, modules, and components to match your company branding.
Expand Down
4 changes: 2 additions & 2 deletions docs/articles/getting-started/what-is-nebular.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Nebular is a customizable Angular UI Library based on [Eva Design System](https:
Nebular modules are distributed as separated `npm` packages:

- Nebular Theme `@nebular/theme`
- Theme - 4 visual themes, customizable theming engine with custom css properties support.
- UI Components - high quality Angular components no 3rd party dependencies.
- Theme - 4 visual themes, a customizable theming engine with custom css properties support.
- UI Components - high-quality Angular components no 3rd party dependencies.
- Server-side rendering compatibility.
- Right-to-left writing system support for all components.
- Nebular Auth `@nebular/auth`
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/getting-started/where-to-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ it is highly recommended to go through the Angular tutorial beforehand and be fa

## Quickstart tutorials

Based on current setup of your project and your goals, there are two starting points:
Based on the current setup of your project and your goals, there are two starting points:

- [Install Nebular](docs/guides/install-nebular) This tutorial explains how to use Nebular from scratch or if you already have some Angular code.
- [Starting based on our Nebular Admin starter kit](docs/guides/install-based-on-starter-kit) Consider this tutorial if you are building admin or any other back-office application and you need a template as a good starting kit.
Expand Down
10 changes: 5 additions & 5 deletions docs/articles/guides/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'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:
The solution we suggest is to use a 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 All @@ -25,9 +25,9 @@ You should create `proxy.conf.json` file in your application root. The file shou
}
```

In this case you should put URL of your API server instead of `http:https://localhost:3000`.
In this case, you should put URL of your API server instead of `http:https://localhost:3000`.

After that you need to run your angular-cli application using following command
After that, you need to run your angular-cli application using the following command
```bash
ng serve --proxy-config proxy.conf.json
```
Expand All @@ -36,9 +36,9 @@ 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. 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.
Production setup is not much different from the 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:
Normally, you create a new virtual host with some similar configuration:

```nginx
server {
Expand Down
64 changes: 0 additions & 64 deletions docs/articles/guides/bootstrap-integration.md

This file was deleted.

6 changes: 4 additions & 2 deletions docs/articles/guides/custom-icons.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# Register Icon pack

Nebular comes with an `<nb-icon></nb-icon>` component that accepts an `icon="icon-name"` and `pack="icon-pack"` parameters.
By default, Nebular includes only small and limited pack called `nebular-essentials`. This pack consists of essential icons, such as `close-outline`, `checkmark-outline`, etc that are required by the Nebular components (modals, accordions, etc).

By default, Nebular includes only a small and limited pack called `nebular-essentials`. This pack consists of essential icons, such as `close-outline`, `checkmark-outline`, etc that are required by the Nebular components (modals, accordions, etc).

## Eva Icons

Expand Down Expand Up @@ -63,7 +64,8 @@ Then simply register the pack using `NbIconLibraries` service in you `app.compon
<nb-icon icon="star" pack="font-awesome"></nb-icon>
```

Lastly we can set this pack as the default and not specify it implicitly while using `<nb-icon>`:

Lastly, we can set this pack as the default and not specify it implicitly while using `<nb-icon>`:
```ts
import { NbIconLibraries } from '@nebular/theme';

Expand Down
Loading

0 comments on commit a0efb6b

Please sign in to comment.