Note
- The package connects firebase auth with nebular/auth so you need `firebase` and `@angular/fire` installed
+ The package connects firebase auth with nebular/auth so you need firebase and @angular/fire installed
and configured for your application. For more instructions please see [@angular/fire docs](https://github.com/angular/angularfire).
Also make sure you import AngularFireAuthModule.
@@ -23,9 +23,9 @@ The package provides the following strategies:
Install Nebular Auth and Nebular Firebase Auth.
- ```sh
- npm i @nebular/auth @nebular/firebase-auth
- ```
+```sh
+npm i @nebular/auth @nebular/firebase-auth
+```
Import the NbAuthModule with some firebase strategies, in that example we use NbFirebasePasswordStrategy.
diff --git a/docs/articles/auth/install.md b/docs/articles/auth/install.md
index 5df5122107..705247c3ff 100644
--- a/docs/articles/auth/install.md
+++ b/docs/articles/auth/install.md
@@ -3,7 +3,7 @@
Note
- If you use our [ngx-admin starter kit](docs/guides/install-based-on-starter-kit) then you already have the Auth module in place.
+ If you use our
ngx-admin starter kit then you already have the Auth module in place.
diff --git a/docs/articles/auth/oauth2.md b/docs/articles/auth/oauth2.md
index e9421764b6..d7cb965970 100644
--- a/docs/articles/auth/oauth2.md
+++ b/docs/articles/auth/oauth2.md
@@ -43,8 +43,8 @@ We also assigned a `name` - `google`. Later on, we will use this alias to call t
## Step 3. Configure
-Let's fill in our strategy with some settings. We add the `client_id` obtained in Step 1. We don't need client_secret for this authentication flow, so we leave it empty.
-Then we set `authorize` endpoint, response_type (which is `token` in our case) and [scope](https://tools.ietf.org/html/rfc6749#section-3.3) of the authentication:
+Let's fill in our strategy with some settings. We add the `client_id` obtained in Step 1. We don't need `client_secret` for this authentication flow, so we leave it empty.
+Then we set `authorize` endpoint, `response_type` (which is `token` in our case) and [scope](https://tools.ietf.org/html/rfc6749#section-3.3) of the authentication:
```ts
@NgModule({
diff --git a/docs/articles/auth/strategy.md b/docs/articles/auth/strategy.md
index b5c6efa01e..6b34204260 100644
--- a/docs/articles/auth/strategy.md
+++ b/docs/articles/auth/strategy.md
@@ -69,7 +69,7 @@ Now, let's add API endpoints. According to the [NbPasswordAuthStrategy documenta
});
```
-Let's assume that our API is localed on a separate server `http://example.com/app-api/v1` and change the `baseEndpoint` accordingly:
+Let's assume that our API is located on a separate server `http://example.com/app-api/v1` and change the `baseEndpoint` accordingly:
```typescript
{
diff --git a/docs/articles/auth/token.md b/docs/articles/auth/token.md
index 2efc9d8ff3..8f40ea0076 100644
--- a/docs/articles/auth/token.md
+++ b/docs/articles/auth/token.md
@@ -18,23 +18,22 @@ Let's tell Nebular that we are waiting for a JWT token instead of a simple strin
We just need to provide a respective class to do that. Open your `app.module.ts` and adjust your `Strategy` configuration:
```typescript
-
@NgModule({
imports: [
- // ...
-
- NbAuthModule.forRoot({
- strategies: [
- NbPasswordAuthStrategy.setup({
- name: 'email',
-
- token: {
- class: NbAuthJWTToken,
- }
- }),
- ],
- forms: {},
- }),
+ // ...
+
+ NbAuthModule.forRoot({
+ strategies: [
+ NbPasswordAuthStrategy.setup({
+ name: 'email',
+
+ token: {
+ class: NbAuthJWTToken,
+ }
+ }),
+ ],
+ forms: {},
+ }),
],
});
@@ -58,25 +57,24 @@ 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 `data` property, let's tell that to Nebular:
```typescript
-
@NgModule({
imports: [
- // ...
-
- NbAuthModule.forRoot({
- strategies: [
- NbPasswordAuthStrategy.setup({
- name: 'email',
-
- token: {
- class: NbAuthJWTToken,
-
- key: 'token', // this parameter tells where to look for the token
- }
- }),
- ],
- forms: {},
- }),
+ // ...
+
+ NbAuthModule.forRoot({
+ strategies: [
+ NbPasswordAuthStrategy.setup({
+ name: 'email',
+
+ token: {
+ class: NbAuthJWTToken,
+
+ key: 'token', // this parameter tells where to look for the token
+ }
+ }),
+ ],
+ forms: {},
+ }),
],
});
@@ -94,7 +92,6 @@ import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
Then, let's create a `user` variable, which will store the token payload inside of the component:
```typescript
-
@Component({
...
})
@@ -110,7 +107,6 @@ Then, let's inject the `NbAuthService` and subscribe to an `onTokenChange` metho
is up-to-date with the information received from the backend and there is no need to additionally refresh/request the data:
```typescript
-
@Component({
...
})
@@ -135,12 +131,9 @@ export class HeaderComponent {
Lastly, let's grab a `user` variable and put it in the template to show the user info. The `nb-user` component is a great fit for this:
-
```typescript
-
@Component({
template: `
-
diff --git a/docs/articles/auth/ui.md b/docs/articles/auth/ui.md
index 8d287882b3..a6f69a79ed 100644
--- a/docs/articles/auth/ui.md
+++ b/docs/articles/auth/ui.md
@@ -15,7 +15,6 @@ Auth module comes with a list of authentication components:
Alongside with the strategies' configuration `AuthModule` also accepts a list of settings for UI side under the `forms` key:
```typescript
-
@NgModule({
imports: [
// ...
@@ -36,7 +35,6 @@ Alongside with the strategies' configuration `AuthModule` also accepts a list of
You can configure each specific form separately, here're the default values:
```typescript
-
export interface NbAuthSocialLink {
link?: string,
url?: string,
@@ -116,47 +114,46 @@ export const defaultSettings: any = {
So, for instance, to remove the redirectDelay setting and disable the success message, we can do the following:
```typescript
-
@NgModule({
imports: [
// ...
NbAuthModule.forRoot({
- strategies: [
- NbPasswordAuthStrategy.setup({
- name: 'email',
- }),
- ],
- forms: {
- login: {
- redirectDelay: 0,
- showMessages: {
- success: true,
- },
- },
- register: {
- redirectDelay: 0,
- showMessages: {
- success: true,
- },
- },
- requestPassword: {
- redirectDelay: 0,
- showMessages: {
- success: true,
- },
- },
- resetPassword: {
- redirectDelay: 0,
- showMessages: {
- success: true,
- },
- },
- logout: {
- redirectDelay: 0,
- },
- },
- }),
+ strategies: [
+ NbPasswordAuthStrategy.setup({
+ name: 'email',
+ }),
+ ],
+ forms: {
+ login: {
+ redirectDelay: 0,
+ showMessages: {
+ success: true,
+ },
+ },
+ register: {
+ redirectDelay: 0,
+ showMessages: {
+ success: true,
+ },
+ },
+ requestPassword: {
+ redirectDelay: 0,
+ showMessages: {
+ success: true,
+ },
+ },
+ resetPassword: {
+ redirectDelay: 0,
+ showMessages: {
+ success: true,
+ },
+ },
+ logout: {
+ redirectDelay: 0,
+ },
+ },
+ }),
],
});
@@ -165,7 +162,6 @@ So, for instance, to remove the redirectDelay setting and disable the success me
If it looks a bit verbose, we can move the repeating part into a variable like this:
```typescript
-
const formSetting: any = {
redirectDelay: 0,
showMessages: {
@@ -178,21 +174,21 @@ const formSetting: any = {
// ...
NbAuthModule.forRoot({
- strategies: [
- NbPasswordAuthStrategy.setup({
- name: 'email',
- }),
- ],
- forms: {
- login: formSetting,
- register: formSetting,
- requestPassword: formSetting,
- resetPassword: formSetting,
- logout: {
- redirectDelay: 0,
- },
- },
- }),
+ strategies: [
+ NbPasswordAuthStrategy.setup({
+ name: 'email',
+ }),
+ ],
+ forms: {
+ login: formSetting,
+ register: formSetting,
+ requestPassword: formSetting,
+ resetPassword: formSetting,
+ logout: {
+ redirectDelay: 0,
+ },
+ },
+ }),
],
});
diff --git a/docs/articles/design-system/enable-customizable-theme.md b/docs/articles/design-system/enable-customizable-theme.md
index 9b657697ef..abe440b6f4 100644
--- a/docs/articles/design-system/enable-customizable-theme.md
+++ b/docs/articles/design-system/enable-customizable-theme.md
@@ -6,7 +6,7 @@ In order to be able to customize theme variables, scss files should be enabled.
Note
- You may already have this setup in place, if you used `ng add @nebular/theme` and selected customizable themes during the installation process.
+ You may already have this setup in place, if you used ng add @nebular/theme and selected customizable themes during the installation process.
diff --git a/docs/articles/design-system/theme.md b/docs/articles/design-system/theme.md
index 0726b2cd94..4e9c096096 100644
--- a/docs/articles/design-system/theme.md
+++ b/docs/articles/design-system/theme.md
@@ -168,9 +168,8 @@ text-caption-font-size: 0.75rem,
text-caption-font-weight: 400,
text-caption-line-height: 1rem,
```
-
-
Adjust these styles to change text style of specific groups of elements.
+
## General Theme Variables
diff --git a/docs/articles/getting-started/where-to-start.md b/docs/articles/getting-started/where-to-start.md
index c74b95d394..5e095368b3 100644
--- a/docs/articles/getting-started/where-to-start.md
+++ b/docs/articles/getting-started/where-to-start.md
@@ -21,5 +21,5 @@ This way you can get help from the community faster, sharing answers with others
## I'm new to Angular or web development in general
Quite often we receive emails and messages from people who ask us for the advice we can give them if they are completely new to software engineering and/or Angular in particular.
-We can't say that there's some general way, unfortunately. Each advice should be aimed at a particular person, his current skills set and goals. T
-hat's why we believe that each person knows better for himself. But in any case, there are multiple resources like https://www.coursera.org/ or https://egghead.io/ which focus on providing online education.
+We can't say that there's some general way, unfortunately. Each advice should be aimed at a particular person, his current skills set and goals.
+That's why we believe that each person knows better for himself. But in any case, there are multiple resources like
or
which focus on providing online education.
diff --git a/docs/articles/guides/create-page.md b/docs/articles/guides/create-page.md
index ab37c1093c..4a90dbd36f 100644
--- a/docs/articles/guides/create-page.md
+++ b/docs/articles/guides/create-page.md
@@ -52,7 +52,7 @@ As a result, you should have a page with a simple layout on it looking similar t
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.
- `` is a required root component for Nebular to work.
+ <nb-layout></nb-layout> is a required root component for Nebular to work.