From e132a4804029db9d44f090a25eb8fb906a29090c Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:22:30 +0300
Subject: [PATCH 01/15] feat(auth): remove bootstrap styles

---
 angular.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/angular.json b/angular.json
index 74e542b05a..61ac2dec46 100644
--- a/angular.json
+++ b/angular.json
@@ -26,7 +26,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -78,7 +77,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -147,7 +145,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
@@ -199,7 +196,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],

From 0a3d379047580ab82e1710fcd9a90b69b49efc85 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:24:44 +0300
Subject: [PATCH 02/15] feat(theme): add box-sizing reset

---
 src/framework/theme/styles/global/_normalize.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/framework/theme/styles/global/_normalize.scss b/src/framework/theme/styles/global/_normalize.scss
index 70ebb3e245..f27c0b612f 100644
--- a/src/framework/theme/styles/global/_normalize.scss
+++ b/src/framework/theme/styles/global/_normalize.scss
@@ -6,3 +6,15 @@
 
 @import '~normalize.css/normalize.css';
 
+html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+

From 873e4208f1da934c1872947eeeb34ef7f08ebe14 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:27:09 +0300
Subject: [PATCH 03/15] refactor(auth): remove auth-block and move styles to
 auth component

---
 src/framework/auth/auth.module.ts             |   3 -
 ....theme.scss => _auth.component.theme.scss} |  16 +-
 .../auth-block/auth-block.component.scss      |  70 -----
 .../auth-block/auth-block.component.ts        |  11 -
 .../auth/components/auth.component.scss       | 141 ++++++++--
 .../auth/components/auth.component.ts         |   8 +-
 src/framework/auth/components/index.ts        |   1 -
 .../components/login/login.component.html     | 177 ++++++------
 .../auth/components/login/login.component.ts  |   3 +-
 .../register/register.component.html          | 259 +++++++++---------
 .../request-password.component.html           | 101 +++----
 .../request-password.component.scss           |   5 -
 .../reset-password.component.html             | 152 +++++-----
 .../reset-password.component.scss             |   5 -
 .../auth/styles/global/_components.scss       |   4 +-
 15 files changed, 485 insertions(+), 471 deletions(-)
 rename src/framework/auth/components/{auth-block/_auth-block.component.theme.scss => _auth.component.theme.scss} (74%)
 delete mode 100644 src/framework/auth/components/auth-block/auth-block.component.scss
 delete mode 100644 src/framework/auth/components/auth-block/auth-block.component.ts

diff --git a/src/framework/auth/auth.module.ts b/src/framework/auth/auth.module.ts
index 7a03de5d39..6b3a7e6009 100644
--- a/src/framework/auth/auth.module.ts
+++ b/src/framework/auth/auth.module.ts
@@ -45,7 +45,6 @@ import {
 
 import { NbAuthComponent } from './components/auth.component';
 
-import { NbAuthBlockComponent } from './components/auth-block/auth-block.component';
 import { NbLoginComponent } from './components/login/login.component';
 import { NbRegisterComponent } from './components/register/register.component';
 import { NbLogoutComponent } from './components/logout/logout.component';
@@ -99,7 +98,6 @@ export function nbNoOpInterceptorFilter(req: HttpRequest<any>): boolean {
   ],
   declarations: [
     NbAuthComponent,
-    NbAuthBlockComponent,
     NbLoginComponent,
     NbRegisterComponent,
     NbRequestPasswordComponent,
@@ -108,7 +106,6 @@ export function nbNoOpInterceptorFilter(req: HttpRequest<any>): boolean {
   ],
   exports: [
     NbAuthComponent,
-    NbAuthBlockComponent,
     NbLoginComponent,
     NbRegisterComponent,
     NbRequestPasswordComponent,
diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/_auth.component.theme.scss
similarity index 74%
rename from src/framework/auth/components/auth-block/_auth-block.component.theme.scss
rename to src/framework/auth/components/_auth.component.theme.scss
index 7b48d910ea..9173ef932a 100644
--- a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
+++ b/src/framework/auth/components/_auth.component.theme.scss
@@ -4,18 +4,18 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-auth-block-theme() {
-  nb-auth-block {
-
-    .form-text a {
+@mixin nb-auth-theme() {
+  nb-auth {
+    .text-link {
       color: nb-theme(color-fg);
+      font-weight: bold;
     }
 
-    .accept-group {
-      nb-checkbox .custom-control-description {
-        color: nb-theme(color-fg);
-      }
+    .error-message {
+      color: nb-theme(color-danger);
+    }
 
+    .accept-group {
       a {
         color: nb-theme(accept-group-link-color);
       }
diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss
deleted file mode 100644
index 0b86268064..0000000000
--- a/src/framework/auth/components/auth-block/auth-block.component.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-:host /deep/ {
-  // TODO rewrite when develop responsive
-  @media (max-width: 550px) {
-    .accept-group {
-      font-size: 12px;
-      padding: 0;
-    }
-  }
-
-  form {
-    width: 100%;
-  }
-
-  .alert {
-    text-align: center;
-  }
-
-  .title {
-    margin-bottom: 0.75rem;
-    text-align: center;
-  }
-
-  .sub-title {
-    margin-bottom: 2rem;
-    text-align: center;
-  }
-
-  .checkbox {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-weight: normal;
-  }
-
-  .form-group.accept-group {
-    display: flex;
-    justify-content: space-between;
-    margin: 2rem 0;
-
-    .forgot-password {
-      line-height: 2;
-    }
-  }
-
-  .links {
-    text-align: center;
-    margin-top: 1.75rem;
-
-    .socials {
-      margin: 1.5rem 0 2.5rem;
-    }
-
-    .socials a {
-      margin: 0 1rem;
-      text-decoration: none;
-      font-size: 1rem;
-      vertical-align: middle;
-
-      &.with-icon {
-        font-size: 2rem;
-      }
-    }
-  }
-}
diff --git a/src/framework/auth/components/auth-block/auth-block.component.ts b/src/framework/auth/components/auth-block/auth-block.component.ts
deleted file mode 100644
index 95e281f3bc..0000000000
--- a/src/framework/auth/components/auth-block/auth-block.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'nb-auth-block',
-  styleUrls: ['./auth-block.component.scss'],
-  template: `
-    <ng-content></ng-content>
-  `,
-})
-export class NbAuthBlockComponent {
-}
diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss
index 836fec7542..2abc24a4c6 100644
--- a/src/framework/auth/components/auth.component.scss
+++ b/src/framework/auth/components/auth.component.scss
@@ -1,44 +1,139 @@
-:host /deep/ {
-  $auth-layout-padding: 2.5rem;
+@import '../../theme/styles/global/breakpoints';
 
-  nb-layout .layout .layout-container .content .columns nb-layout-column {
-    padding: $auth-layout-padding;
-  }
+:host {
+  $auth-layout-padding: 2.5rem;
 
   nb-card {
+    margin: 0;
     height: calc(100vh - 2 * #{$auth-layout-padding});
   }
 
-  nb-card-header {
-    a {
-      text-decoration: none;
-      i {
-        font-size: 2rem;
-        font-weight: bold;
-      }
+  .navigation .link {
+    text-decoration: none;
+
+    .icon {
+      font-size: 2rem;
+      font-weight: bold;
     }
   }
 
-  nb-card {
-    margin: 0;
-  }
-  .flex-centered {
-      margin: auto;
-  }
   nb-card-body {
     display: flex;
+    width: 100%;
   }
 
-  // TODO rewrite when develop responsive
-  @media (max-width: 550px) {
-    /deep/ nb-layout .layout .layout-container .content .columns nb-layout-column {
-      padding: 0;
-    }
+  .auth-component-container {
+    flex: 1 0 auto;
+    margin: auto;
+    max-width: 35rem;
+  }
 
+  @include media-breakpoint-down(sm) {
     nb-card {
       border-radius: 0;
       height: 100vh;
     }
   }
 
+  /deep/ {
+    nb-layout .layout .layout-container .content .columns nb-layout-column {
+      padding: $auth-layout-padding;
+
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    form {
+      width: 100%;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+
+    .error-message {
+      margin-top: 0.5rem;
+    }
+
+    .alert {
+      text-align: center;
+    }
+
+    .title {
+      margin-top: 0;
+      margin-bottom: 0.75rem;
+      text-align: center;
+    }
+
+    .sub-title {
+      margin-bottom: 2rem;
+      text-align: center;
+    }
+
+    .checkbox {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      font-weight: normal;
+    }
+
+    .form-control-group {
+      margin-bottom: 2rem;
+    }
+
+    .form-control-group.accept-group {
+      display: flex;
+      justify-content: space-between;
+      margin: 2rem 0;
+
+      .forgot-password {
+        line-height: 2;
+      }
+    }
+
+    .links {
+      text-align: center;
+      margin-top: 1.75rem;
+
+      .socials {
+        margin-top: 1.5rem;
+      }
+
+      .socials a {
+        margin: 0 1rem;
+        text-decoration: none;
+        font-size: 1rem;
+        vertical-align: middle;
+
+        &.with-icon {
+          font-size: 2rem;
+        }
+      }
+    }
+
+    .another-action {
+      margin-top: 2rem;
+      text-align: center;
+    }
+
+    .sign-in-or-up {
+      margin-top: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    nb-alert {
+      .alert-title,
+      .alert-message {
+        margin: 0 0 0.5rem;
+      }
+      .alert-message-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
 }
diff --git a/src/framework/auth/components/auth.component.ts b/src/framework/auth/components/auth.component.ts
index 1ba9740970..f48b293e59 100644
--- a/src/framework/auth/components/auth.component.ts
+++ b/src/framework/auth/components/auth.component.ts
@@ -17,12 +17,14 @@ import { takeWhile } from 'rxjs/operators';
       <nb-layout-column>
         <nb-card>
           <nb-card-header>
-            <a href="#" (click)="back()"><i class="nb-arrow-thin-left"></i></a>
+            <nav class="navigation">
+              <a href="#" (click)="back()" class="link" aria-label="Back"><i class="icon nb-arrow-thin-left"></i></a>
+            </nav>
           </nb-card-header>
           <nb-card-body>
-            <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
+            <main class="auth-component-container">
               <router-outlet></router-outlet>
-            </div>
+            </main>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>
diff --git a/src/framework/auth/components/index.ts b/src/framework/auth/components/index.ts
index 45b2149af7..72c4576db3 100644
--- a/src/framework/auth/components/index.ts
+++ b/src/framework/auth/components/index.ts
@@ -1,5 +1,4 @@
 export * from './auth.component';
-export * from './auth-block/auth-block.component';
 export * from './login/login.component';
 export * from './logout/logout.component';
 export * from './register/register.component';
diff --git a/src/framework/auth/components/login/login.component.html b/src/framework/auth/components/login/login.component.html
index ef1d17baf6..92d717a720 100644
--- a/src/framework/auth/components/login/login.component.html
+++ b/src/framework/auth/components/login/login.component.html
@@ -1,105 +1,106 @@
-<nb-auth-block>
-  <h2 class="title">Sign In</h2>
-  <small class="form-text sub-title">Hello! Sign in with your username or email</small>
+<h1 id="title" class="title">Sign In</h1>
+<p class="sub-title">Hello! Sign in with your username or email.</p>
 
-  <form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">
+<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
-      <div><strong>Oh snap!</strong></div>
-      <div *ngFor="let error of errors">{{ error }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success">
-      <div><strong>Hooray!</strong></div>
-      <div *ngFor="let message of messages">{{ message }}</div>
-    </nb-alert>
+<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
 
-    <div class="form-group">
-      <label for="input-email" class="sr-only">Email address</label>
-      <input nbInput
-             [(ngModel)]="user.email"
-             #email="ngModel"
-             name="email"
-             id="input-email"
-             pattern=".+@.+\..+"
-             placeholder="Email address"
-             autofocus
-             fullWidth
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.email.required')">
-      <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-email">Email address:</label>
+    <input nbInput
+           fullWidth
+           [(ngModel)]="user.email"
+           #email="ngModel"
+           name="email"
+           id="input-email"
+           pattern=".+@.+\..+"
+           placeholder="Email address"
+           autofocus
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.email.required')"
+           [attr.aria-invalid]="email.invalid && email.touched ? true : null">
+    <ng-container *ngIf="email.invalid && email.touched">
+      <p class="error-message" *ngIf="email.errors?.required">
         Email is required!
-      </small>
-      <small class="form-text error"
-             *ngIf="email.invalid && email.touched && email.errors?.pattern">
+      </p>
+      <p class="error-message" *ngIf="email.errors?.pattern">
         Email should be the real one!
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-password" class="sr-only">Password</label>
-      <input nbInput
-             [(ngModel)]="user.password"
-             #password="ngModel"
-             name="password"
-             type="password"
-             id="input-password"
-             placeholder="Password"
-             fullWidth
-             [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.password.required')"
-             [minlength]="getConfigValue('forms.validation.password.minLength')"
-             [maxlength]="getConfigValue('forms.validation.password.maxLength')">
-      <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-password">Password:</label>
+    <input nbInput
+           fullWidth
+           [(ngModel)]="user.password"
+           #password="ngModel"
+           name="password"
+           type="password"
+           id="input-password"
+           placeholder="Password"
+           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [minlength]="getConfigValue('forms.validation.password.minLength')"
+           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
+    <ng-container *ngIf="password.invalid && password.touched ">
+      <p class="error-message" *ngIf="password.errors?.required">
         Password is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
+      </p>
+      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{ getConfigValue('forms.validation.password.minLength') }}
         to {{ getConfigValue('forms.validation.password.maxLength') }}
         characters
-      </small>
-    </div>
-
-    <div class="form-group accept-group col-sm-12">
-      <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
-      <a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
-    </div>
-
-    <button nbButton
-            status="success"
-            fullWidth
-            [disabled]="submitted || !form.valid"
-            [class.btn-pulse]="submitted">
-      Sign In
-    </button>
-  </form>
+      </p>
+    </ng-container>
+  </div>
 
-  <div class="links">
+  <div class="form-control-group accept-group">
+    <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
+    <a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
+  </div>
 
-    <ng-container *ngIf="socialLinks && socialLinks.length > 0">
-      <small class="form-text">Or connect with:</small>
+  <button nbButton
+          fullWidth
+          status="success"
+          [disabled]="submitted || !form.valid"
+          [class.btn-pulse]="submitted">
+    Sign In
+  </button>
+</form>
 
-      <div class="socials">
-        <ng-container *ngFor="let socialLink of socialLinks">
-          <a *ngIf="socialLink.link"
-             [routerLink]="socialLink.link"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-          <a *ngIf="socialLink.url"
-             [attr.href]="socialLink.url"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-        </ng-container>
-      </div>
+<section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
+  Or connect with:
+  <div class="socials">
+    <ng-container *ngFor="let socialLink of socialLinks">
+      <a *ngIf="socialLink.link"
+         [routerLink]="socialLink.link"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+      <a *ngIf="socialLink.url"
+         [attr.href]="socialLink.url"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
     </ng-container>
-
-    <small class="form-text">
-      Don't have an account? <a routerLink="../register"><strong>Sign Up</strong></a>
-    </small>
   </div>
-</nb-auth-block>
+</section>
+
+<section class="another-action" aria-label="Register">
+  Don't have an account? <a class="text-link" routerLink="../register">Sign Up</a>
+</section>
diff --git a/src/framework/auth/components/login/login.component.ts b/src/framework/auth/components/login/login.component.ts
index 38bf96195b..394f86a5c0 100644
--- a/src/framework/auth/components/login/login.component.ts
+++ b/src/framework/auth/components/login/login.component.ts
@@ -42,7 +42,8 @@ export class NbLoginComponent {
   }
 
   login(): void {
-    this.errors = this.messages = [];
+    this.errors = [];
+    this.messages = [];
     this.submitted = true;
 
     this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
diff --git a/src/framework/auth/components/register/register.component.html b/src/framework/auth/components/register/register.component.html
index a45f95b6c0..4a64707c81 100644
--- a/src/framework/auth/components/register/register.component.html
+++ b/src/framework/auth/components/register/register.component.html
@@ -1,153 +1,156 @@
-<nb-auth-block>
-  <h2 class="title">Sign Up</h2>
-  <form (ngSubmit)="register()" #form="ngForm">
+<h1 id="title" class="title">Sign Up</h1>
 
-    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
-      <div><strong>Oh snap!</strong></div>
-      <div *ngFor="let error of errors">{{ error }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success">
-      <div><strong>Hooray!</strong></div>
-      <div *ngFor="let message of messages">{{ message }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert>
 
-    <div class="form-group">
-      <label for="input-name" class="sr-only">Full name</label>
-      <input nbInput
-             [(ngModel)]="user.fullName"
-             #fullName="ngModel"
-             id="input-name"
-             name="fullName"
-             placeholder="Full name"
-             autofocus
-             fullWidth
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.fullName.required')"
-             [minlength]="getConfigValue('forms.validation.fullName.minLength')"
-             [maxlength]="getConfigValue('forms.validation.fullName.maxLength')">
-      <small class="form-text error" *ngIf="fullName.invalid && fullName.touched && fullName.errors?.required">
+<form (ngSubmit)="register()" #form="ngForm" aria-labelledby="title">
+
+  <div class="form-control-group">
+    <label class="label" for="input-name">Full name:</label>
+    <input nbInput
+           [(ngModel)]="user.fullName"
+           #fullName="ngModel"
+           id="input-name"
+           name="fullName"
+           placeholder="Full name"
+           autofocus
+           fullWidth
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.fullName.required')"
+           [minlength]="getConfigValue('forms.validation.fullName.minLength')"
+           [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
+           [attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null">
+    <ng-container *ngIf="fullName.invalid && fullName.touched">
+      <p class="error-message" *ngIf="fullName.errors?.required">
         Full name is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="fullName.invalid && fullName.touched && (fullName.errors?.minlength || fullName.errors?.maxlength)">
+      </p>
+      <p class="error-message" *ngIf="fullName.errors?.minlength || fullName.errors?.maxlength">
         Full name should contains
         from {{getConfigValue('forms.validation.fullName.minLength')}}
         to {{getConfigValue('forms.validation.fullName.maxLength')}}
         characters
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-email" class="sr-only">Email address</label>
-      <input nbInput
-             [(ngModel)]="user.email"
-             #email="ngModel"
-             id="input-email"
-             name="email"
-             pattern=".+@.+..+"
-             placeholder="Email address"
-             fullWidth
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.email.required')">
-      <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-email">Email address:</label>
+    <input nbInput
+           [(ngModel)]="user.email"
+           #email="ngModel"
+           id="input-email"
+           name="email"
+           pattern=".+@.+..+"
+           placeholder="Email address"
+           fullWidth
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.email.required')"
+           [attr.aria-invalid]="email.invalid && email.touched ? true : null">
+    <ng-container *ngIf="email.invalid && email.touched">
+      <p class="error-message" *ngIf="email.errors?.required">
         Email is required!
-      </small>
-      <small class="form-text error"
-             *ngIf="email.invalid && email.touched && email.errors?.pattern">
+      </p>
+      <p class="error-message" *ngIf="email.errors?.pattern">
         Email should be the real one!
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-password" class="sr-only">Password</label>
-      <input nbInput
-             [(ngModel)]="user.password"
-             #password="ngModel"
-             type="password"
-             id="input-password"
-             name="password"
-             placeholder="Password"
-             fullWidth
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.password.required')"
-             [minlength]="getConfigValue('forms.validation.password.minLength')"
-             [maxlength]="getConfigValue('forms.validation.password.maxLength')">
-      <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-password">Password:</label>
+    <input nbInput
+           [(ngModel)]="user.password"
+           #password="ngModel"
+           type="password"
+           id="input-password"
+           name="password"
+           placeholder="Password"
+           fullWidth
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [minlength]="getConfigValue('forms.validation.password.minLength')"
+           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
+    <ng-container *ngIf="password.invalid && password.touched">
+      <p class="error-message" *ngIf="password.errors?.required">
         Password is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
+      </p>
+      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{ getConfigValue('forms.validation.password.minLength') }}
         to {{ getConfigValue('forms.validation.password.maxLength') }}
         characters
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-re-password" class="sr-only">Repeat password</label>
-      <input nbInput
-             [(ngModel)]="user.confirmPassword"
-             #rePass="ngModel"
-             type="password"
-             id="input-re-password"
-             name="rePass"
-             placeholder="Confirm Password"
-             fullWidth
-             [status]="email.dirty ? (email.invalid || password.value != rePass.value  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.password.required')">
-      <small class="form-text error"
-             *ngIf="rePass.invalid && rePass.touched && rePass.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-re-password">Repeat password:</label>
+    <input nbInput
+           [(ngModel)]="user.confirmPassword"
+           #rePass="ngModel"
+           type="password"
+           id="input-re-password"
+           name="rePass"
+           placeholder="Confirm Password"
+           fullWidth
+           [status]="email.dirty ? (email.invalid || password.value != rePass.value  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
+    <ng-container *ngIf="rePass.invalid && rePass.touched">
+      <p class="error-message" *ngIf="rePass.errors?.required">
         Password confirmation is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="rePass.touched && password.value != rePass.value && !rePass.errors?.required">
+      </p>
+      <p class="error-message" *ngIf="password.value != rePass.value && !rePass.errors?.required">
         Password does not match the confirm password.
-      </small>
-    </div>
-
-    <div class="form-group accept-group col-sm-12" *ngIf="getConfigValue('forms.register.terms')">
-      <nb-checkbox name="terms" [(ngModel)]="user.terms" [required]="getConfigValue('forms.register.terms')">
-        Agree to <a href="#" target="_blank"><strong>Terms & Conditions</strong></a>
-      </nb-checkbox>
-    </div>
-
-    <button nbButton
-            status="success"
-            fullWidth
-            [disabled]="submitted || !form.valid"
-            [class.btn-pulse]="submitted">
-      Register
-    </button>
-  </form>
+      </p>
+    </ng-container>
+  </div>
 
-  <div class="links">
+  <div class="form-control-group accept-group" *ngIf="getConfigValue('forms.register.terms')">
+    <nb-checkbox name="terms" [(ngModel)]="user.terms" [required]="getConfigValue('forms.register.terms')">
+      Agree to <a href="#" target="_blank"><strong>Terms & Conditions</strong></a>
+    </nb-checkbox>
+  </div>
 
-    <ng-container *ngIf="socialLinks && socialLinks.length > 0">
-      <small class="form-text">Or connect with:</small>
+  <button nbButton
+          fullWidth
+          status="success"
+          [disabled]="submitted || !form.valid"
+          [class.btn-pulse]="submitted">
+    Register
+  </button>
+</form>
 
-      <div class="socials">
-        <ng-container *ngFor="let socialLink of socialLinks">
-          <a *ngIf="socialLink.link"
-             [routerLink]="socialLink.link"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-          <a *ngIf="socialLink.url"
-             [attr.href]="socialLink.url"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-        </ng-container>
-      </div>
+<section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
+  Or connect with:
+  <div class="socials">
+    <ng-container *ngFor="let socialLink of socialLinks">
+      <a *ngIf="socialLink.link"
+         [routerLink]="socialLink.link"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+      <a *ngIf="socialLink.url"
+         [attr.href]="socialLink.url"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
     </ng-container>
-
-    <small class="form-text">
-      Already have an account? <a routerLink="../login"><strong>Sign in</strong></a>
-    </small>
   </div>
-</nb-auth-block>
+</section>
+
+<section class="another-action" aria-label="Sign in">
+  Already have an account? <a class="text-link" routerLink="../login">Sign in</a>
+</section>
diff --git a/src/framework/auth/components/request-password/request-password.component.html b/src/framework/auth/components/request-password/request-password.component.html
index 9da4a87ea9..42fba16964 100644
--- a/src/framework/auth/components/request-password/request-password.component.html
+++ b/src/framework/auth/components/request-password/request-password.component.html
@@ -1,55 +1,60 @@
-<nb-auth-block>
-  <h2 class="title">Forgot Password</h2>
-  <small class="form-text sub-title">Enter your email address and we’ll send a link to reset your password</small>
-  <form (ngSubmit)="requestPass()" #requestPassForm="ngForm">
+<h1 id="title" class="title">Forgot Password</h1>
+<p class="sub-title">Enter your email address and we’ll send a link to reset your password</p>
 
-    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
-      <div><strong>Oh snap!</strong></div>
-      <div *ngFor="let error of errors">{{ error }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.success && messages.length && !submitted" outline="success">
-      <div><strong>Hooray!</strong></div>
-      <div *ngFor="let message of messages">{{ message }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert>
 
-    <div class="form-group">
-      <label for="input-email" class="sr-only">Enter your email address</label>
-      <input nbInput
-             #email="ngModel"
-             [(ngModel)]="user.email"
-             id="input-email"
-             name="email"
-             placeholder="Email address"
-             autofocus
-             fullWidth
-             pattern=".+@.+\..+"
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.email.required')">
-      <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
+<form (ngSubmit)="requestPass()" #requestPassForm="ngForm" aria-labelledby="title">
+
+  <div class="form-control-group">
+    <label class="label" for="input-email">Enter your email address:</label>
+    <input nbInput
+           [(ngModel)]="user.email"
+           #email="ngModel"
+           id="input-email"
+           name="email"
+           pattern=".+@.+\..+"
+           placeholder="Email address"
+           autofocus
+           fullWidth
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.email.required')"
+           [attr.aria-invalid]="email.invalid && email.touched ? true : null">
+    <ng-container *ngIf="email.invalid && email.touched">
+      <p class="error-message" *ngIf="email.errors?.required">
         Email is required!
-      </small>
-      <small class="form-text error"
-             *ngIf="email.invalid && email.touched && email.errors?.pattern">
+      </p>
+      <p class="error-message" *ngIf="email.errors?.pattern">
         Email should be the real one!
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <button nbButton
-            status="success"
-            fullWidth
-            [disabled]="submitted || !requestPassForm.valid"
-            [class.btn-pulse]="submitted">
-      Request password
-    </button>
-  </form>
+  <button nbButton
+          fullWidth
+          status="success"
+          [disabled]="submitted || !requestPassForm.valid"
+          [class.btn-pulse]="submitted">
+    Request password
+  </button>
+</form>
 
-  <div class="links col-sm-12">
-    <small class="form-text">
-      Already have an account? <a routerLink="../login"><strong>Sign In</strong></a>
-    </small>
-    <small class="form-text">
-      <a routerLink="../register"><strong>Sign Up</strong></a>
-    </small>
-  </div>
-</nb-auth-block>
+<section class="sign-in-or-up" aria-label="Sign in or sign up">
+  <p>
+    Already have an account? <a class="text-link" routerLink="../login">Sign In</a>
+  </p>
+  <p>
+    <a routerLink="../register" class="text-link">Sign Up</a>
+  </p>
+</section>
diff --git a/src/framework/auth/components/request-password/request-password.component.scss b/src/framework/auth/components/request-password/request-password.component.scss
index 9ee89d3d76..11a9b4e9f9 100644
--- a/src/framework/auth/components/request-password/request-password.component.scss
+++ b/src/framework/auth/components/request-password/request-password.component.scss
@@ -4,11 +4,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 :host {
-  .links {
-    display: flex;
-    justify-content: space-between;
-  }
-
   .form-group:last-of-type {
     margin-bottom: 3rem;
   }
diff --git a/src/framework/auth/components/reset-password/reset-password.component.html b/src/framework/auth/components/reset-password/reset-password.component.html
index 8c4f65fbad..3f2939fe46 100644
--- a/src/framework/auth/components/reset-password/reset-password.component.html
+++ b/src/framework/auth/components/reset-password/reset-password.component.html
@@ -1,88 +1,90 @@
-<nb-auth-block>
-  <h2 class="title">Change password</h2>
-  <small class="form-text sub-title">Please enter a new password</small>
-  <form (ngSubmit)="resetPass()" #resetPassForm="ngForm">
+<h1 id="title" class="title">Change password</h1>
+<p class="sub-title">Please enter a new password</p>
 
-    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
-      <div><strong>Oh snap!</strong></div>
-      <div *ngFor="let error of errors">{{ error }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success">
-      <div><strong>Hooray!</strong></div>
-      <div *ngFor="let message of messages">{{ message }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert>
 
-    <div class="form-group">
-      <label for="input-password" class="sr-only">New Password</label>
-      <input nbInput
-             [(ngModel)]="user.password"
-             #password="ngModel"
-             type="password"
-             id="input-password"
-             name="password"
-             class="first"
-             placeholder="New Password"
-             autofocus
-             fullWidth
-             [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.password.required')"
-             [minlength]="getConfigValue('forms.validation.password.minLength')"
-             [maxlength]="getConfigValue('forms.validation.password.maxLength')">
-      <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
+<form (ngSubmit)="resetPass()" #resetPassForm="ngForm" aria-labelledby="title">
+
+  <div class="form-control-group">
+    <label class="label" for="input-password">New Password:</label>
+    <input nbInput
+           [(ngModel)]="user.password"
+           #password="ngModel"
+           type="password"
+           id="input-password"
+           name="password"
+           class="first"
+           placeholder="New Password"
+           autofocus
+           fullWidth
+           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [minlength]="getConfigValue('forms.validation.password.minLength')"
+           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
+    <ng-container *ngIf="password.invalid && password.touched">
+      <p class="error-message" *ngIf="password.errors?.required">
         Password is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
+      </p>
+      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{getConfigValue('forms.validation.password.minLength')}}
         to {{getConfigValue('forms.validation.password.maxLength')}}
         characters
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-re-password" class="sr-only">Confirm Password</label>
-      <input nbInput
-             [(ngModel)]="user.confirmPassword"
-             #rePass="ngModel"
-             id="input-re-password"
-             name="rePass"
-             type="password"
-             class="last"
-             placeholder="Confirm Password"
-             fullWidth
-             [status]="rePass.touched
-                 ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
-                 : ''"
-             [required]="getConfigValue('forms.validation.password.required')">
-      <small class="form-text error"
-             *ngIf="rePass.invalid && rePass.touched && rePass.errors?.required">
+  <div class="form-group">
+    <label class="label" for="input-re-password">Confirm Password:</label>
+    <input nbInput
+           [(ngModel)]="user.confirmPassword"
+           #rePass="ngModel"
+           id="input-re-password"
+           name="rePass"
+           type="password"
+           class="last"
+           placeholder="Confirm Password"
+           fullWidth
+           [status]="rePass.touched
+               ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
+               : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
+    <ng-container *ngIf="rePass.touched">
+      <p class="error-message" *ngIf="rePass.invalid && rePass.errors?.required">
         Password confirmation is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="rePass.touched && password.value != rePass.value && !rePass.errors?.required">
+      </p>
+      <p class="error-message" *ngIf="password.value != rePass.value && !rePass.errors?.required">
         Password does not match the confirm password.
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <button nbButton
-            status="success"
-            fullWidth
-            [disabled]="submitted || !resetPassForm.valid"
-            [class.btn-pulse]="submitted">
-      Change password
-    </button>
-  </form>
+  <button nbButton
+          status="success"
+          fullWidth
+          [disabled]="submitted || !resetPassForm.valid"
+          [class.btn-pulse]="submitted">
+    Change password
+  </button>
+</form>
 
-  <div class="links col-sm-12">
-    <small class="form-text">
-      Already have an account? <a routerLink="../login"><strong>Sign In</strong></a>
-    </small>
-    <small class="form-text">
-      <a routerLink="../register"><strong>Sign Up</strong></a>
-    </small>
-  </div>
-</nb-auth-block>
+<section class="sign-in-or-up" aria-label="Sign in or sign up">
+  <p>
+    Already have an account? <a class="text-link" routerLink="../login"><strong>Sign In</strong></a>
+  </p>
+  <p><a class="text-link" routerLink="../register"><strong>Sign Up</strong></a></p>
+</section>
diff --git a/src/framework/auth/components/reset-password/reset-password.component.scss b/src/framework/auth/components/reset-password/reset-password.component.scss
index 9ee89d3d76..11a9b4e9f9 100644
--- a/src/framework/auth/components/reset-password/reset-password.component.scss
+++ b/src/framework/auth/components/reset-password/reset-password.component.scss
@@ -4,11 +4,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 :host {
-  .links {
-    display: flex;
-    justify-content: space-between;
-  }
-
   .form-group:last-of-type {
     margin-bottom: 3rem;
   }
diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss
index 403dc4ca2e..6b6b83a702 100644
--- a/src/framework/auth/styles/global/_components.scss
+++ b/src/framework/auth/styles/global/_components.scss
@@ -4,9 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../components/auth-block/auth-block.component.theme';
+@import '../../components/auth.component.theme';
 
 // Create a theme
 @mixin nb-auth-components() {
-  @include nb-auth-block-theme();
+  @include nb-auth-theme();
 }

From 5e6340347b7dc197324d99d06f8c021272098818 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:27:42 +0300
Subject: [PATCH 04/15] docs(auth): remove auth block component

---
 docs/articles/auth-custom-ui.md | 2 +-
 docs/articles/auth-ui.md        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/articles/auth-custom-ui.md b/docs/articles/auth-custom-ui.md
index e86291a53f..e102507ad2 100644
--- a/docs/articles/auth-custom-ui.md
+++ b/docs/articles/auth-custom-ui.md
@@ -81,7 +81,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.
-This way we imported the declared auth components, such as for example `NbAuthBlock`, so we can use it inside of our components.
+This way we imported the declared auth components, such as for example `NbLoginComponent`, so we can use it inside of our components.
 
 Now, let's fill in the routing file:
 
diff --git a/docs/articles/auth-ui.md b/docs/articles/auth-ui.md
index 8d287882b3..378b3544fe 100644
--- a/docs/articles/auth-ui.md
+++ b/docs/articles/auth-ui.md
@@ -2,7 +2,6 @@
 
 Auth module comes with a list of authentication components:
 
-- `<nb-auth-block></nb-auth-block>` - component-wrapper, provides basic styles for the forms, already included inside of the page-components;
 - `<nb-register></nb-register>` - registration page;
 - `<nb-login></nb-login>` - login page;
 - `<nb-logout></nb-logout>` - logout page - shows "logging out..." message while sending logout request;

From d9345f74dc1627e0c6a9c08daf02aaf50878cbfd Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:28:20 +0300
Subject: [PATCH 05/15] fix(playground): add global auth styles

---
 src/playground/styles/styles.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/playground/styles/styles.scss b/src/playground/styles/styles.scss
index 459de8ec70..cd444ce6fd 100644
--- a/src/playground/styles/styles.scss
+++ b/src/playground/styles/styles.scss
@@ -1,10 +1,10 @@
 @import 'themes';
 @import '../../framework/theme/styles/globals';
-@import '../../framework/bootstrap/styles/globals';
+@import '../../framework/auth/styles/globals';
 
 @include nb-install() {
   @include nb-theme-global();
-  @include nb-bootstrap-global();
+  @include nb-auth-global();
 };
 
 body {

From a1f983262b6644d5a03842d7bf902552dad50679 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 20 Sep 2018 16:29:05 +0300
Subject: [PATCH 06/15] refactor(playground): remove bootstrap styles

---
 .../oauth2-password-login.component.html      |  99 ++++++++++
 .../oauth2-password-login.component.ts        |  63 +------
 .../oauth2-password/oauth2-password.module.ts |   5 +-
 .../auth/login/login.component.html           | 175 +++++++++---------
 4 files changed, 191 insertions(+), 151 deletions(-)
 create mode 100644 src/playground/oauth2-password/oauth2-password-login.component.html

diff --git a/src/playground/oauth2-password/oauth2-password-login.component.html b/src/playground/oauth2-password/oauth2-password-login.component.html
new file mode 100644
index 0000000000..90b3cc1adc
--- /dev/null
+++ b/src/playground/oauth2-password/oauth2-password-login.component.html
@@ -0,0 +1,99 @@
+<nb-layout>
+  <nb-layout-column>
+    <nb-card *ngIf="token">
+      <nb-card-body><h1 class="title">You are currently authenticated</h1>
+        <p></p>
+        <p>Current User Access Token: {{ token.getValue() | json }}</p>
+        <p>Current User Access Token Payload : {{getClaims(token.getValue()) | json}}</p>
+        <p>Current User Refresh Token: {{ token.getRefreshToken() | json }}</p>
+        <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
+      </nb-card-body>
+      <nb-card-body *ngIf="! token"><p>No User Authenticated</p></nb-card-body>
+    </nb-card>
+    <nb-card *ngIf="!token">
+      <nb-card-body class="col-xl-4 col-lg-6 col-md-8 col-sm-12" style="margin:auto;">
+        <section class="auth-component-container" aria-labelledby="title">
+          <h1 id="title" class="title">OAuth2 Sign In with email/password</h1>
+          <p class="sub-title">Hello! Sign in with your username or email</p>
+
+          <nb-alert *ngIf="showMessages.error && errors?.length > 0 && !submitted" outline="danger" role="alert">
+            <p class="alert-title"><b>Oh snap!</b></p>
+            <ul class="alert-message-list">
+              <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+            </ul>
+          </nb-alert>
+
+          <nb-alert *ngIf="showMessages.success && messages?.length > 0 && !submitted" outline="success" role="alert">
+            <p class="alert-title"><b>Hooray!</b></p>
+            <ul class="alert-message-list">
+              <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+            </ul>
+          </nb-alert>
+
+          <form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
+
+            <div class="form-control-group">
+              <label class="label" for="input-email">Email address:</label>
+              <input nbInput
+                     fullWidth
+                     [(ngModel)]="user.email"
+                     #email="ngModel"
+                     name="email"
+                     id="input-email"
+                     pattern=".+@.+..+"
+                     placeholder="Email address"
+                     autofocus
+                     [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+                     [required]="getConfigValue('forms.validation.email.required')"
+                     [attr.aria-invalid]="email.invalid && email.touched ? true : null">
+              <ng-container *ngIf="email.invalid && email.touched">
+                <p class="error-message" *ngIf="email.errors?.required">
+                  Email is required!
+                </p>
+                <p class="error-message" *ngIf="email.errors?.pattern">
+                  Email should be the real one!
+                </p>
+              </ng-container>
+            </div>
+
+            <div class="form-control-group">
+              <label class="label" for="input-password">Password:</label>
+              <input nbInput
+                     fullWidth
+                     [(ngModel)]="user.password"
+                     #password="ngModel"
+                     name="password"
+                     type="password"
+                     id="input-password"
+                     placeholder="Password"
+                     [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
+                     [required]="getConfigValue('forms.validation.password.required')"
+                     [minlength]="getConfigValue('forms.validation.password.minLength')"
+                     [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+                     [attr.aria-invalid]="password.invalid && password.touched ? true : null">
+              <ng-container *ngIf="password.invalid && password.touched ">
+                <p class="error-message" *ngIf="password.errors?.required">
+                  Password is required!
+                </p>
+                <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
+                  Password should contains
+                  from {{ getConfigValue('forms.validation.password.minLength') }}
+                  to {{ getConfigValue('forms.validation.password.maxLength') }}
+                  characters
+                </p>
+              </ng-container>
+            </div>
+
+            <button nbButton
+                    fullWidth
+                    status="success"
+                    [disabled]="submitted || !form.valid"
+                    [class.btn-pulse]="submitted">
+              Sign In
+            </button>
+          </form>
+        </section>
+      </nb-card-body>
+    </nb-card>
+  </nb-layout-column>
+</nb-layout>
diff --git a/src/playground/oauth2-password/oauth2-password-login.component.ts b/src/playground/oauth2-password/oauth2-password-login.component.ts
index 6c0100cb7b..04ec9a6b31 100644
--- a/src/playground/oauth2-password/oauth2-password-login.component.ts
+++ b/src/playground/oauth2-password/oauth2-password-login.component.ts
@@ -17,68 +17,7 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
 
 @Component({
   selector: 'nb-playground-auth',
-  template: `
-    <nb-layout>
-      <nb-layout-column>
-        <nb-card *ngIf="token">
-          <nb-card-body><h2 class="title">You are currently authenticated</h2>
-            <p></p>
-            <p>Current User Access Token: {{ token.getValue() | json }}</p>
-            <p>Current User Access Token Payload : {{getClaims(token.getValue()) | json}}</p>
-            <p>Current User Refresh Token: {{ token.getRefreshToken() | json }}</p>
-            <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
-          </nb-card-body>
-          <nb-card-body *ngIf="! token"><p>No User Authenticated</p></nb-card-body>
-        </nb-card>
-        <nb-card *ngIf="!token">
-          <nb-card-body class="col-xl-4 col-lg-6 col-md-8 col-sm-12" style="margin:auto;">
-            <nb-auth-block><h2 class="title">OAuth2 Sign In with email/password</h2>
-              <small class="form-text sub-title">Hello! Sign in with your username or email</small>
-              <form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">
-                <div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted" class="alert alert-danger"
-                     role="alert">
-                  <div><strong>Oh snap!</strong></div>
-                  <div *ngFor="let error of errors">{{ error }}</div>
-                </div>
-                <div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted"
-                     class="alert alert-success" role="alert">
-                  <div><strong>Hooray!</strong></div>
-                  <div *ngFor="let message of messages">{{ message }}</div>
-                </div>
-                <div class="form-group"><label for="input-email" class="sr-only">Email address</label> <input
-                  name="email" [(ngModel)]="user.email" id="input-email" pattern=".+@.+\..+" class="form-control"
-                  placeholder="Email address" #email="ngModel"
-                  [class.form-control-danger]="email.invalid && email.touched" autofocus
-                  [required]="getConfigValue('forms.validation.email.required')">
-                  <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
-                    Email is required!</small>
-                  <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.pattern">
-                    Email should be the real one!
-                  </small>
-                </div>
-                <div class="form-group"><label for="input-password" class="sr-only">Password</label> <input
-                  name="password" [(ngModel)]="user.password" type="password" id="input-password" class="form-control"
-                  placeholder="Password" #password="ngModel"
-                  [class.form-control-danger]="password.invalid && password.touched"
-                  [required]="getConfigValue('forms.validation.password.required')"
-                  [minlength]="getConfigValue('forms.validation.password.minLength')"
-                  [maxlength]="getConfigValue('forms.validation.password.maxLength')">
-                  <small class="form-text error" *ngIf="password.invalid && password.touched"> Password is required!
-                  </small>
-                  <small class="form-text error" *ngIf="password.invalid && password.touched"> Password should contains
-                    from {{ getConfigValue('forms.validation.password.minLength') }} to
-                    {{ getConfigValue('forms.validation.password.maxLength') }} characters
-                  </small>
-                </div>
-                <button nbButton status="success" hero
-                        [disabled]="submitted || !form.valid" [class.btn-pulse]="submitted"> Sign In
-                </button>
-              </form>
-            </nb-auth-block>
-          </nb-card-body>
-        </nb-card>
-      </nb-layout-column>
-    </nb-layout>    `,
+  templateUrl: './oauth2-password-login.component.html',
 })
 export class NbOAuth2PasswordLoginComponent {
 
diff --git a/src/playground/oauth2-password/oauth2-password.module.ts b/src/playground/oauth2-password/oauth2-password.module.ts
index bdbd2dc69e..257ed5788a 100644
--- a/src/playground/oauth2-password/oauth2-password.module.ts
+++ b/src/playground/oauth2-password/oauth2-password.module.ts
@@ -11,8 +11,7 @@ import { RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 
 import {
-  NbCardModule,
-  NbLayoutModule,
+  NbAlertModule, NbCardModule, NbInputModule, NbLayoutModule,
 } from '@nebular/theme';
 
 import {
@@ -69,6 +68,8 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen
 
     NbCardModule,
     NbLayoutModule,
+    NbAlertModule,
+    NbInputModule,
   ],
   declarations: [
     NbOAuth2PasswordLoginComponent,
diff --git a/src/playground/smart-home/auth/login/login.component.html b/src/playground/smart-home/auth/login/login.component.html
index 28098a7976..5758a0c282 100644
--- a/src/playground/smart-home/auth/login/login.component.html
+++ b/src/playground/smart-home/auth/login/login.component.html
@@ -1,104 +1,105 @@
-<nb-auth-block>
-  <h2 class="title">Sign In</h2>
+<h1 id="title" class="title">Sign In</h1>
 
-  <form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">
+<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger">
-      <div><strong>Oh snap!</strong></div>
-      <div *ngFor="let error of errors">{{ error }}</div>
-    </nb-alert>
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert>
 
-    <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success">
-      <div><strong>Hooray!</strong></div>
-      <div *ngFor="let message of messages">{{ message }}</div>
-    </nb-alert>
+<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
 
-    <div class="form-group">
-      <label for="input-email">Email address</label>
-      <input nbInput
-             [(ngModel)]="user.email"
-             #email="ngModel"
-             name="email"
-             id="input-email"
-             pattern=".+@.+\..+"
-             placeholder="Email address"
-             autofocus
-             fullWidth
-             [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.email.required')">
-      <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-email">Email address:</label>
+    <input nbInput
+           fullWidth
+           [(ngModel)]="user.email"
+           #email="ngModel"
+           name="email"
+           id="input-email"
+           pattern=".+@.+\..+"
+           placeholder="Email address"
+           autofocus
+           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.email.required')"
+           [attr.aria-invalid]="email.invalid && email.touched ? true : null">
+    <ng-container *ngIf="email.invalid && email.touched">
+      <p class="error-message" *ngIf="email.errors?.required">
         Email is required!
-      </small>
-      <small class="form-text error"
-             *ngIf="email.invalid && email.touched && email.errors?.pattern">
+      </p>
+      <p class="error-message" *ngIf="email.errors?.pattern">
         Email should be the real one!
-      </small>
-    </div>
+      </p>
+    </ng-container>
+  </div>
 
-    <div class="form-group">
-      <label for="input-password">Password</label>
-      <input nbInput
-             [(ngModel)]="user.password"
-             #password="ngModel"
-             name="password"
-             type="password"
-             id="input-password"
-             placeholder="Password"
-             fullWidth
-             [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
-             [required]="getConfigValue('forms.validation.password.required')"
-             [minlength]="getConfigValue('forms.validation.password.minLength')"
-             [maxlength]="getConfigValue('forms.validation.password.maxLength')">
-      <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
+  <div class="form-control-group">
+    <label class="label" for="input-password">Password:</label>
+    <input nbInput
+           fullWidth
+           [(ngModel)]="user.password"
+           #password="ngModel"
+           name="password"
+           type="password"
+           id="input-password"
+           placeholder="Password"
+           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
+           [required]="getConfigValue('forms.validation.password.required')"
+           [minlength]="getConfigValue('forms.validation.password.minLength')"
+           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
+    <ng-container *ngIf="password.invalid && password.touched ">
+      <p class="error-message" *ngIf="password.errors?.required">
         Password is required!
-      </small>
-      <small
-        class="form-text error"
-        *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
+      </p>
+      <p class="error-message" *ngIf="(password.errors?.minlength || password.errors?.maxlength)">
         Password should contains
         from {{ getConfigValue('forms.validation.password.minLength') }}
         to {{ getConfigValue('forms.validation.password.maxLength') }}
         characters
-      </small>
-    </div>
-
-    <div class="form-group accept-group col-sm-12">
-      <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
-      <a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
-    </div>
-
-    <button nbButton
-            status="success"
-            fullWidth
-            [disabled]="submitted || !form.valid"
-            [class.btn-pulse]="submitted">
-      Sign In
-    </button>
-  </form>
+      </p>
+    </ng-container>
+  </div>
 
-  <div class="links">
+  <div class="form-control-group accept-group">
+    <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
+    <a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
+  </div>
 
-    <ng-container *ngIf="socialLinks && socialLinks.length > 0">
-      <small class="form-text">Or connect with:</small>
+  <button nbButton
+          fullWidth
+          status="success"
+          [disabled]="submitted || !form.valid"
+          [class.btn-pulse]="submitted">
+    Sign In
+  </button>
+</form>
 
-      <div class="socials">
-        <ng-container *ngFor="let socialLink of socialLinks">
-          <a *ngIf="socialLink.link"
-             [routerLink]="socialLink.link"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-          <a *ngIf="socialLink.url"
-             [attr.href]="socialLink.url"
-             [attr.target]="socialLink.target"
-             [attr.class]="socialLink.icon"
-             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
-        </ng-container>
-      </div>
+<section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
+  Or connect with:
+  <div class="socials">
+    <ng-container *ngFor="let socialLink of socialLinks">
+      <a *ngIf="socialLink.link"
+         [routerLink]="socialLink.link"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+      <a *ngIf="socialLink.url"
+         [attr.href]="socialLink.url"
+         [attr.target]="socialLink.target"
+         [attr.class]="socialLink.icon"
+         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
     </ng-container>
-
-    <small class="form-text">
-      Don't have an account? <a routerLink="../register"><strong>Sign Up</strong></a>
-    </small>
   </div>
-</nb-auth-block>
+</section>
+
+<section class="another-action" aria-label="Register">
+  Don't have an account? <a class="text-link" routerLink="../register">Sign Up</a>
+</section>

From 7b5e4aa0f9e086da8d2dbcfc91b112b17c6a9ff6 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Sun, 23 Sep 2018 18:25:04 +0300
Subject: [PATCH 07/15] refactor(playground): remove bootstrap styles

---
 .../oauth2-password/oauth2-password-login.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/playground/oauth2-password/oauth2-password-login.component.html b/src/playground/oauth2-password/oauth2-password-login.component.html
index 90b3cc1adc..cb8a99d4c8 100644
--- a/src/playground/oauth2-password/oauth2-password-login.component.html
+++ b/src/playground/oauth2-password/oauth2-password-login.component.html
@@ -11,7 +11,7 @@
       <nb-card-body *ngIf="! token"><p>No User Authenticated</p></nb-card-body>
     </nb-card>
     <nb-card *ngIf="!token">
-      <nb-card-body class="col-xl-4 col-lg-6 col-md-8 col-sm-12" style="margin:auto;">
+      <nb-card-body>
         <section class="auth-component-container" aria-labelledby="title">
           <h1 id="title" class="title">OAuth2 Sign In with email/password</h1>
           <p class="sub-title">Hello! Sign in with your username or email</p>

From 5cb087bf78e5e22ae86eae750fdc8abc44af9805 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Sun, 23 Sep 2018 18:40:36 +0300
Subject: [PATCH 08/15] refactor(playground): make nb-auth parent of
 oauth2-password

---
 .../oauth2-password/oauth2-password.module.ts | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/playground/oauth2-password/oauth2-password.module.ts b/src/playground/oauth2-password/oauth2-password.module.ts
index 257ed5788a..84a2c9b886 100644
--- a/src/playground/oauth2-password/oauth2-password.module.ts
+++ b/src/playground/oauth2-password/oauth2-password.module.ts
@@ -15,8 +15,12 @@ import {
 } from '@nebular/theme';
 
 import {
-  NbAuthModule, NbAuthOAuth2JWTToken,
-  NbOAuth2AuthStrategy, NbOAuth2ClientAuthMethod, NbOAuth2GrantType,
+  NbAuthComponent,
+  NbAuthModule,
+  NbAuthOAuth2JWTToken,
+  NbOAuth2AuthStrategy,
+  NbOAuth2ClientAuthMethod,
+  NbOAuth2GrantType,
 } from '@nebular/auth';
 
 import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.component';
@@ -30,8 +34,14 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen
     RouterModule,
     RouterModule.forChild([
       {
-        path: '',
-        component: NbOAuth2PasswordLoginComponent,
+        path: 'auth',
+        component: NbAuthComponent,
+        children: [
+          {
+            path: 'login',
+            component: NbOAuth2PasswordLoginComponent,
+          },
+        ],
       },
     ]),
 
@@ -60,7 +70,7 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen
             requireValidToken: true,
           },
           redirect: {
-            success: '/oauth2-password',
+            success: '/oauth2-password/auth/login',
           },
         }),
       ],

From 5b3ac89d8a195f9c5dbaad5854762753f7abdf67 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 24 Sep 2018 18:13:10 +0300
Subject: [PATCH 09/15] refactor(auth): add nb-auth-block component

---
 docs/articles/auth-custom-ui.md               |   2 +-
 docs/articles/auth-ui.md                      |   1 +
 src/framework/auth/auth.module.ts             |   3 +
 .../_auth-block.component.theme.scss}         |   5 +-
 .../auth-block/auth-block.component.scss      | 105 ++++++++++++++++++
 .../auth-block/auth-block.component.ts        |  17 +++
 .../auth/components/auth.component.scss       |  96 +---------------
 .../auth/components/auth.component.ts         |   4 +-
 src/framework/auth/components/index.ts        |   1 +
 .../auth/styles/global/_components.scss       |   4 +-
 .../oauth2-password-login.component.html      |   4 +-
 .../oauth2-password-login.component.scss      |   3 +
 .../oauth2-password-login.component.ts        |   1 +
 .../oauth2-password/oauth2-password.module.ts |  13 +--
 14 files changed, 145 insertions(+), 114 deletions(-)
 rename src/framework/auth/components/{_auth.component.theme.scss => auth-block/_auth-block.component.theme.scss} (91%)
 create mode 100644 src/framework/auth/components/auth-block/auth-block.component.scss
 create mode 100644 src/framework/auth/components/auth-block/auth-block.component.ts
 create mode 100644 src/playground/oauth2-password/oauth2-password-login.component.scss

diff --git a/docs/articles/auth-custom-ui.md b/docs/articles/auth-custom-ui.md
index e102507ad2..e86291a53f 100644
--- a/docs/articles/auth-custom-ui.md
+++ b/docs/articles/auth-custom-ui.md
@@ -81,7 +81,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.
-This way we imported the declared auth components, such as for example `NbLoginComponent`, so we can use it inside of our components.
+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:
 
diff --git a/docs/articles/auth-ui.md b/docs/articles/auth-ui.md
index 378b3544fe..8d287882b3 100644
--- a/docs/articles/auth-ui.md
+++ b/docs/articles/auth-ui.md
@@ -2,6 +2,7 @@
 
 Auth module comes with a list of authentication components:
 
+- `<nb-auth-block></nb-auth-block>` - component-wrapper, provides basic styles for the forms, already included inside of the page-components;
 - `<nb-register></nb-register>` - registration page;
 - `<nb-login></nb-login>` - login page;
 - `<nb-logout></nb-logout>` - logout page - shows "logging out..." message while sending logout request;
diff --git a/src/framework/auth/auth.module.ts b/src/framework/auth/auth.module.ts
index 6b3a7e6009..7a03de5d39 100644
--- a/src/framework/auth/auth.module.ts
+++ b/src/framework/auth/auth.module.ts
@@ -45,6 +45,7 @@ import {
 
 import { NbAuthComponent } from './components/auth.component';
 
+import { NbAuthBlockComponent } from './components/auth-block/auth-block.component';
 import { NbLoginComponent } from './components/login/login.component';
 import { NbRegisterComponent } from './components/register/register.component';
 import { NbLogoutComponent } from './components/logout/logout.component';
@@ -98,6 +99,7 @@ export function nbNoOpInterceptorFilter(req: HttpRequest<any>): boolean {
   ],
   declarations: [
     NbAuthComponent,
+    NbAuthBlockComponent,
     NbLoginComponent,
     NbRegisterComponent,
     NbRequestPasswordComponent,
@@ -106,6 +108,7 @@ export function nbNoOpInterceptorFilter(req: HttpRequest<any>): boolean {
   ],
   exports: [
     NbAuthComponent,
+    NbAuthBlockComponent,
     NbLoginComponent,
     NbRegisterComponent,
     NbRequestPasswordComponent,
diff --git a/src/framework/auth/components/_auth.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
similarity index 91%
rename from src/framework/auth/components/_auth.component.theme.scss
rename to src/framework/auth/components/auth-block/_auth-block.component.theme.scss
index 9173ef932a..0ee1efea39 100644
--- a/src/framework/auth/components/_auth.component.theme.scss
+++ b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
@@ -4,8 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-auth-theme() {
-  nb-auth {
+@mixin nb-auth-block-theme() {
+  nb-auth-block {
     .text-link {
       color: nb-theme(color-fg);
       font-weight: bold;
@@ -32,3 +32,4 @@
     }
   }
 }
+
diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss
new file mode 100644
index 0000000000..2127b6a64b
--- /dev/null
+++ b/src/framework/auth/components/auth-block/auth-block.component.scss
@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  display: block;
+  width: 100%;
+  max-width: 35rem;
+
+  /deep/ {
+    form {
+      width: 100%;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+
+    .error-message {
+      margin-top: 0.5rem;
+    }
+
+    .alert {
+      text-align: center;
+    }
+
+    .title {
+      margin-top: 0;
+      margin-bottom: 0.75rem;
+      text-align: center;
+    }
+
+    .sub-title {
+      margin-bottom: 2rem;
+      text-align: center;
+    }
+
+    .checkbox {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      font-weight: normal;
+    }
+
+    .form-control-group {
+      margin-bottom: 2rem;
+    }
+
+    .form-control-group.accept-group {
+      display: flex;
+      justify-content: space-between;
+      margin: 2rem 0;
+
+      .forgot-password {
+        line-height: 2;
+      }
+    }
+
+    .links {
+      text-align: center;
+      margin-top: 1.75rem;
+
+      .socials {
+        margin-top: 1.5rem;
+      }
+
+      .socials a {
+        margin: 0 1rem;
+        text-decoration: none;
+        font-size: 1rem;
+        vertical-align: middle;
+
+        &.with-icon {
+          font-size: 2rem;
+        }
+      }
+    }
+
+    .another-action {
+      margin-top: 2rem;
+      text-align: center;
+    }
+
+    .sign-in-or-up {
+      margin-top: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    nb-alert {
+      .alert-title,
+      .alert-message {
+        margin: 0 0 0.5rem;
+      }
+      .alert-message-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+}
diff --git a/src/framework/auth/components/auth-block/auth-block.component.ts b/src/framework/auth/components/auth-block/auth-block.component.ts
new file mode 100644
index 0000000000..e39806ccdf
--- /dev/null
+++ b/src/framework/auth/components/auth-block/auth-block.component.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-auth-block',
+  styleUrls: ['./auth-block.component.scss'],
+  template: `
+    <ng-content></ng-content>
+  `,
+})
+export class NbAuthBlockComponent {
+}
diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss
index 2abc24a4c6..809d2e755a 100644
--- a/src/framework/auth/components/auth.component.scss
+++ b/src/framework/auth/components/auth.component.scss
@@ -22,10 +22,8 @@
     width: 100%;
   }
 
-  .auth-component-container {
-    flex: 1 0 auto;
+  nb-auth-block {
     margin: auto;
-    max-width: 35rem;
   }
 
   @include media-breakpoint-down(sm) {
@@ -43,97 +41,5 @@
         padding: 0;
       }
     }
-
-    form {
-      width: 100%;
-    }
-
-    .label {
-      display: block;
-      margin-bottom: 0.5rem;
-    }
-
-    .error-message {
-      margin-top: 0.5rem;
-    }
-
-    .alert {
-      text-align: center;
-    }
-
-    .title {
-      margin-top: 0;
-      margin-bottom: 0.75rem;
-      text-align: center;
-    }
-
-    .sub-title {
-      margin-bottom: 2rem;
-      text-align: center;
-    }
-
-    .checkbox {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      font-weight: normal;
-    }
-
-    .form-control-group {
-      margin-bottom: 2rem;
-    }
-
-    .form-control-group.accept-group {
-      display: flex;
-      justify-content: space-between;
-      margin: 2rem 0;
-
-      .forgot-password {
-        line-height: 2;
-      }
-    }
-
-    .links {
-      text-align: center;
-      margin-top: 1.75rem;
-
-      .socials {
-        margin-top: 1.5rem;
-      }
-
-      .socials a {
-        margin: 0 1rem;
-        text-decoration: none;
-        font-size: 1rem;
-        vertical-align: middle;
-
-        &.with-icon {
-          font-size: 2rem;
-        }
-      }
-    }
-
-    .another-action {
-      margin-top: 2rem;
-      text-align: center;
-    }
-
-    .sign-in-or-up {
-      margin-top: 2rem;
-      display: flex;
-      justify-content: space-between;
-    }
-
-    nb-alert {
-      .alert-title,
-      .alert-message {
-        margin: 0 0 0.5rem;
-      }
-      .alert-message-list {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-      }
-    }
   }
 }
diff --git a/src/framework/auth/components/auth.component.ts b/src/framework/auth/components/auth.component.ts
index f48b293e59..cd5e020619 100644
--- a/src/framework/auth/components/auth.component.ts
+++ b/src/framework/auth/components/auth.component.ts
@@ -22,9 +22,9 @@ import { takeWhile } from 'rxjs/operators';
             </nav>
           </nb-card-header>
           <nb-card-body>
-            <main class="auth-component-container">
+            <nb-auth-block>
               <router-outlet></router-outlet>
-            </main>
+            </nb-auth-block>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>
diff --git a/src/framework/auth/components/index.ts b/src/framework/auth/components/index.ts
index 72c4576db3..45b2149af7 100644
--- a/src/framework/auth/components/index.ts
+++ b/src/framework/auth/components/index.ts
@@ -1,4 +1,5 @@
 export * from './auth.component';
+export * from './auth-block/auth-block.component';
 export * from './login/login.component';
 export * from './logout/logout.component';
 export * from './register/register.component';
diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss
index 6b6b83a702..403dc4ca2e 100644
--- a/src/framework/auth/styles/global/_components.scss
+++ b/src/framework/auth/styles/global/_components.scss
@@ -4,9 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../components/auth.component.theme';
+@import '../../components/auth-block/auth-block.component.theme';
 
 // Create a theme
 @mixin nb-auth-components() {
-  @include nb-auth-theme();
+  @include nb-auth-block-theme();
 }
diff --git a/src/playground/oauth2-password/oauth2-password-login.component.html b/src/playground/oauth2-password/oauth2-password-login.component.html
index cb8a99d4c8..ce9c3026c1 100644
--- a/src/playground/oauth2-password/oauth2-password-login.component.html
+++ b/src/playground/oauth2-password/oauth2-password-login.component.html
@@ -12,7 +12,7 @@
     </nb-card>
     <nb-card *ngIf="!token">
       <nb-card-body>
-        <section class="auth-component-container" aria-labelledby="title">
+        <nb-auth-block aria-labelledby="title">
           <h1 id="title" class="title">OAuth2 Sign In with email/password</h1>
           <p class="sub-title">Hello! Sign in with your username or email</p>
 
@@ -92,7 +92,7 @@ <h1 id="title" class="title">OAuth2 Sign In with email/password</h1>
               Sign In
             </button>
           </form>
-        </section>
+        </nb-auth-block>
       </nb-card-body>
     </nb-card>
   </nb-layout-column>
diff --git a/src/playground/oauth2-password/oauth2-password-login.component.scss b/src/playground/oauth2-password/oauth2-password-login.component.scss
new file mode 100644
index 0000000000..f807999ea4
--- /dev/null
+++ b/src/playground/oauth2-password/oauth2-password-login.component.scss
@@ -0,0 +1,3 @@
+:host nb-auth-block {
+  margin: 0 auto;
+}
diff --git a/src/playground/oauth2-password/oauth2-password-login.component.ts b/src/playground/oauth2-password/oauth2-password-login.component.ts
index 04ec9a6b31..5ce8ad7038 100644
--- a/src/playground/oauth2-password/oauth2-password-login.component.ts
+++ b/src/playground/oauth2-password/oauth2-password-login.component.ts
@@ -18,6 +18,7 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
 @Component({
   selector: 'nb-playground-auth',
   templateUrl: './oauth2-password-login.component.html',
+  styleUrls: ['./oauth2-password-login.component.scss'],
 })
 export class NbOAuth2PasswordLoginComponent {
 
diff --git a/src/playground/oauth2-password/oauth2-password.module.ts b/src/playground/oauth2-password/oauth2-password.module.ts
index 84a2c9b886..ac31481500 100644
--- a/src/playground/oauth2-password/oauth2-password.module.ts
+++ b/src/playground/oauth2-password/oauth2-password.module.ts
@@ -15,7 +15,6 @@ import {
 } from '@nebular/theme';
 
 import {
-  NbAuthComponent,
   NbAuthModule,
   NbAuthOAuth2JWTToken,
   NbOAuth2AuthStrategy,
@@ -34,14 +33,8 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen
     RouterModule,
     RouterModule.forChild([
       {
-        path: 'auth',
-        component: NbAuthComponent,
-        children: [
-          {
-            path: 'login',
-            component: NbOAuth2PasswordLoginComponent,
-          },
-        ],
+        path: '',
+        component: NbOAuth2PasswordLoginComponent,
       },
     ]),
 
@@ -70,7 +63,7 @@ import { NbOAuth2PasswordLoginComponent } from './oauth2-password-login.componen
             requireValidToken: true,
           },
           redirect: {
-            success: '/oauth2-password/auth/login',
+            success: '/oauth2-password',
           },
         }),
       ],

From 238edf3d7ef5f31c212ab903e68bdf1ef8fb8f21 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 13:40:34 +0300
Subject: [PATCH 10/15] refactor(auth): remove nebular bootstrap dependency

BREAKING CHANGE:

Remove bootstrap from peer dependencies. If you need bootstrap support you can use "bootstrap" package.
---
 src/framework/auth/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/framework/auth/package.json b/src/framework/auth/package.json
index 118c9f2d77..d6b68df8e2 100644
--- a/src/framework/auth/package.json
+++ b/src/framework/auth/package.json
@@ -33,7 +33,6 @@
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@nebular/theme": "2.0.0-rc.10",
-    "@nebular/bootstrap": "2.0.0-rc.10",
     "rxjs": "^6.1.0"
   }
 }

From 96529e0a304e6cdc4b655730929e8c829410a1b0 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 13:43:23 +0300
Subject: [PATCH 11/15] refactor(playground): redirect to login page by default

---
 src/playground/auth/auth-routing.module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/playground/auth/auth-routing.module.ts b/src/playground/auth/auth-routing.module.ts
index f9c4ddb723..ca12d26b2e 100644
--- a/src/playground/auth/auth-routing.module.ts
+++ b/src/playground/auth/auth-routing.module.ts
@@ -32,7 +32,8 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: NbLoginComponent,
+            redirectTo: 'login',
+            pathMatch: 'full',
           },
           {
             path: 'login',

From e7197ca6e8eef0c59c0f59ad4a6c9fa97356d8c8 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 13:44:32 +0300
Subject: [PATCH 12/15] feat(auth): add corporate theme

---
 src/framework/auth/styles/_themes.scss           |  1 +
 src/framework/auth/styles/themes/_corporate.scss | 14 ++++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 src/framework/auth/styles/themes/_corporate.scss

diff --git a/src/framework/auth/styles/_themes.scss b/src/framework/auth/styles/_themes.scss
index 4f09abc7a1..b0475fe714 100644
--- a/src/framework/auth/styles/_themes.scss
+++ b/src/framework/auth/styles/_themes.scss
@@ -1,2 +1,3 @@
 @import 'themes/default';
 @import 'themes/cosmic';
+@import 'themes/corporate';
diff --git a/src/framework/auth/styles/themes/_corporate.scss b/src/framework/auth/styles/themes/_corporate.scss
new file mode 100644
index 0000000000..96f69ba4d8
--- /dev/null
+++ b/src/framework/auth/styles/themes/_corporate.scss
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+$theme: (
+  accept-group-link-color: color-fg,
+
+  socials-color: color-fg,
+  socials-hover-color: color-fg-text,
+);
+
+$nb-themes: nb-register-theme($theme, corporate, corporate);

From df227c4dbeb7ad88a6226e85f26782d206bfb621 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 13:51:27 +0300
Subject: [PATCH 13/15] refactor(auth): use theme variables

---
 .../auth-block/_auth-block.component.theme.scss       |  2 +-
 src/framework/auth/components/auth.component.scss     |  1 -
 .../auth/components/auth.component.theme.scss         | 11 +++++++++++
 src/framework/auth/styles/global/_components.scss     |  2 ++
 4 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 src/framework/auth/components/auth.component.theme.scss

diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
index 0ee1efea39..19279ff64f 100644
--- a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
+++ b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
@@ -8,7 +8,7 @@
   nb-auth-block {
     .text-link {
       color: nb-theme(color-fg);
-      font-weight: bold;
+      font-weight: nb-theme(font-weight-bold);
     }
 
     .error-message {
diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss
index 809d2e755a..d2c4f9f20b 100644
--- a/src/framework/auth/components/auth.component.scss
+++ b/src/framework/auth/components/auth.component.scss
@@ -13,7 +13,6 @@
 
     .icon {
       font-size: 2rem;
-      font-weight: bold;
     }
   }
 
diff --git a/src/framework/auth/components/auth.component.theme.scss b/src/framework/auth/components/auth.component.theme.scss
new file mode 100644
index 0000000000..369fc72a70
--- /dev/null
+++ b/src/framework/auth/components/auth.component.theme.scss
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-auth-theme() {
+  nb-auth .navigation .link .icon {
+    font-weight: nb-theme(font-weight-bold);
+  }
+}
diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss
index 403dc4ca2e..a26d4a3986 100644
--- a/src/framework/auth/styles/global/_components.scss
+++ b/src/framework/auth/styles/global/_components.scss
@@ -4,9 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@import '../../components/auth.component.theme';
 @import '../../components/auth-block/auth-block.component.theme';
 
 // Create a theme
 @mixin nb-auth-components() {
+  @include nb-auth-theme();
   @include nb-auth-block-theme();
 }

From 534f2988ad8c01f26566886a7ea7b5afbe8839e8 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 14:35:08 +0300
Subject: [PATCH 14/15] fix(playground): move styles into scss file

fixes IE "Multiple definitions of a property not allowed in strict mode"
---
 src/app/app.component.scss | 15 +++++++++++++++
 src/app/app.component.ts   | 14 --------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 1bdce5058c..a5bbd1e241 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,18 @@
 .framework-options-bar {
   display: flex;
 }
+
+/deep/ {
+  .options-bar {
+    display: flex;
+    align-items: center;
+  }
+  .options-show {
+    margin-left: auto;
+  }
+  .options-show.fixed {
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 86cbd601fd..98d9e6bc24 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,20 +22,6 @@ import { Component } from '@angular/core';
     </div>
     <router-outlet></router-outlet>
   `,
-  styles: [`
-    .options-bar {
-      display: flex;
-      align-items: center;
-    }
-    .options-show {
-      margin-left: auto;
-    }
-    .options-show.fixed {
-      position: fixed;
-      right: 0;
-      top: 0;
-    }
-  `],
 })
 export class NbAppComponent {
 

From 6d2b04cdf7accdbffff04978ecbfb269073842e7 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 25 Sep 2018 14:38:56 +0300
Subject: [PATCH 15/15] style(auth): rename nb-auth theme file

---
 .../{auth.component.theme.scss => _auth.component.theme.scss}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/framework/auth/components/{auth.component.theme.scss => _auth.component.theme.scss} (100%)

diff --git a/src/framework/auth/components/auth.component.theme.scss b/src/framework/auth/components/_auth.component.theme.scss
similarity index 100%
rename from src/framework/auth/components/auth.component.theme.scss
rename to src/framework/auth/components/_auth.component.theme.scss