From f76ce1f6f940584a2488bcff70e6895ebe1632c3 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Mon, 25 Jun 2018 17:34:00 +0300 Subject: [PATCH] fix(docs): update articles copy --- docs/articles/auth-guard.md | 6 +++--- docs/articles/auth-install.md | 4 ++-- docs/articles/auth-intro.md | 10 +++++----- docs/articles/auth-oauth2.md | 14 +++++++------- docs/articles/auth-strategy.md | 2 +- docs/articles/auth-token.md | 10 +++++----- docs/articles/auth-ui.md | 2 +- docs/articles/backend-integration.md | 4 ++-- docs/articles/concept-3rd-party.md | 2 +- docs/articles/concept-theme-system.md | 15 ++++++++------- docs/articles/enabling-theme-system.md | 8 ++++---- docs/articles/index.md | 2 +- docs/articles/install-into-existing.md | 4 ++-- docs/articles/install-starter-kit.md | 2 +- docs/articles/rtl.md | 2 +- 15 files changed, 44 insertions(+), 43 deletions(-) diff --git a/docs/articles/auth-guard.md b/docs/articles/auth-guard.md index e548f32b53..ace11ffce5 100644 --- a/docs/articles/auth-guard.md +++ b/docs/articles/auth-guard.md @@ -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 @@ -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.
## 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 diff --git a/docs/articles/auth-install.md b/docs/articles/auth-install.md index a3bc65f0b5..0ccfdda9b9 100644 --- a/docs/articles/auth-install.md +++ b/docs/articles/auth-install.md @@ -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 @@ -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.
diff --git a/docs/articles/auth-intro.md b/docs/articles/auth-intro.md index ab4f166ee7..b9f8e4790c 100644 --- a/docs/articles/auth-intro.md +++ b/docs/articles/auth-intro.md @@ -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.
Note
- The setup still requires backend services to communicate with. + The setup still requires communication with backend services.
@@ -22,9 +22,9 @@ You can use the built-in components or create your custom ones.
## 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.
## Other helper services diff --git a/docs/articles/auth-oauth2.md b/docs/articles/auth-oauth2.md index 02b2826cb6..a660c60bb0 100644 --- a/docs/articles/auth-oauth2.md +++ b/docs/articles/auth-oauth2.md @@ -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) @@ -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.
@@ -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.
## Step 3. Configure @@ -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 @@ -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 @@ -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: diff --git a/docs/articles/auth-strategy.md b/docs/articles/auth-strategy.md index e70b9c09ff..41eb1254d8 100644 --- a/docs/articles/auth-strategy.md +++ b/docs/articles/auth-strategy.md @@ -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.
## Setup API configuration diff --git a/docs/articles/auth-token.md b/docs/articles/auth-token.md index ea38d0995f..82c6304fd1 100644 --- a/docs/articles/auth-token.md +++ b/docs/articles/auth-token.md @@ -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.
## 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 @@ -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 @@ -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 diff --git a/docs/articles/auth-ui.md b/docs/articles/auth-ui.md index 2273d1c78b..e627ac9dd2 100644 --- a/docs/articles/auth-ui.md +++ b/docs/articles/auth-ui.md @@ -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.
## Where to next diff --git a/docs/articles/backend-integration.md b/docs/articles/backend-integration.md index 5b96659a20..e7a6b9494a 100644 --- a/docs/articles/backend-integration.md +++ b/docs/articles/backend-integration.md @@ -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:
## angular-cli/webpack-dev-server setup @@ -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: diff --git a/docs/articles/concept-3rd-party.md b/docs/articles/concept-3rd-party.md index e7d3638edb..5243898dbf 100644 --- a/docs/articles/concept-3rd-party.md +++ b/docs/articles/concept-3rd-party.md @@ -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. diff --git a/docs/articles/concept-theme-system.md b/docs/articles/concept-theme-system.md index c7323d5614..3a32fc15ae 100644 --- a/docs/articles/concept-theme-system.md +++ b/docs/articles/concept-theme-system.md @@ -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; @@ -68,7 +68,7 @@ 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). @@ -76,7 +76,7 @@ List of component style variables is specified in the component documentation, f ## 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'; @@ -86,14 +86,15 @@ 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.
## 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.
@@ -101,7 +102,7 @@ Themes can also be inherited from each other, `cosmic`, for instance, is inherit ## 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 diff --git a/docs/articles/enabling-theme-system.md b/docs/articles/enabling-theme-system.md index a53e733ca6..b2afb10424 100644 --- a/docs/articles/enabling-theme-system.md +++ b/docs/articles/enabling-theme-system.md @@ -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.
## Normal setup @@ -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'; @@ -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 ... @@ -172,7 +172,7 @@ At this point when you enable your `dark` theme your page should look like this: -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 diff --git a/docs/articles/index.md b/docs/articles/index.md index 906ca46cb7..5bdaba34ab 100644 --- a/docs/articles/index.md +++ b/docs/articles/index.md @@ -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.
Current state
diff --git a/docs/articles/install-into-existing.md b/docs/articles/install-into-existing.md index 8c59f5ab5b..1d63b126b8 100644 --- a/docs/articles/install-into-existing.md +++ b/docs/articles/install-into-existing.md @@ -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 @@ -125,7 +125,7 @@ And done! At this step, you should have a page with a simple layout on it lookin
Adding into existing page
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 `` component at the top. + `` is a required root component for Nebular to work.
diff --git a/docs/articles/install-starter-kit.md b/docs/articles/install-starter-kit.md index 430d5548f7..39249a2c41 100644 --- a/docs/articles/install-starter-kit.md +++ b/docs/articles/install-starter-kit.md @@ -24,7 +24,7 @@ To install ngx-admin on your machine you need to have the following tools instal
## Download the code -After you completed tools setup, you need to download the code of ngx-admin application. The easiest way to do that is to clone GitHub repository: +When you completed tools setup, you need to download the code of ngx-admin application. The easiest way to do that is to clone GitHub repository: ```bash git clone https://github.com/akveo/ngx-admin.git ``` diff --git a/docs/articles/rtl.md b/docs/articles/rtl.md index d502627379..f9e7bf8134 100644 --- a/docs/articles/rtl.md +++ b/docs/articles/rtl.md @@ -2,7 +2,7 @@ All Nebular components support RTL out of the box. -The components that accept a position as a setting now also support logical start and end values, similar to flexbox. Value of start and end depends on current layout direction. For LTR it's left and for RTL - right. +The components that accept a position as a setting now also support logical start and end values, similar to flexbox. The value of start and end depends on current layout direction. For LTR it's left and for RTL - right. For instance, if we need the sidebar to be positioned logically depending on a language direction, then instead of setting it to left we can set its position to start: ```html