- ...widgets
-
-````
-
-`data-widget-filter` attribute relates the form with the widgets. Whenever the form is submitted, all the widgets are automatically refreshed with the form fields as the filter.
-
-Instead of the `data-widget-filter` attribute, you can use the `filterForm` parameter of the `WidgetManager` constructor. Example:
-
-````js
-var myWidgetManager = new abp.WidgetManager({
- wrapper: '#MyDashboardWidgetsArea',
- filterForm: '#MyDashboardFilterForm'
-});
-````
-
-##### Filter Callback
-
-You may want to have a better control to provide filters while initializing and refreshing the widgets. In this case, you can use the `filterCallback` option:
-
-````js
-var myWidgetManager = new abp.WidgetManager({
- wrapper: '#MyDashboardWidgetsArea',
- filterCallback: function() {
- return $('#MyDashboardFilterForm').serializeFormToObject();
- }
-});
-````
-
-This example shows the default implementation of the `filterCallback`. You can return any JavaScript object with fields. Example:
-
-````js
-filterCallback: function() {
- return {
- 'startDate': $('#StartDateInput').val(),
- 'endDate': $('#EndDateInput').val()
- };
-}
-````
-
-The returning filters are passed to all widgets on `init` and `refresh`.
-
-### Widget JavaScript API
-
-A widget can define a JavaScript API that is invoked by the `WidgetManager` when needed. The code sample below can be used to start to define an API for a widget.
-
-````js
-(function () {
- abp.widgets.NewUserStatisticWidget = function ($wrapper) {
-
- var getFilters = function () {
- return {
- ...
- };
- }
-
- var refresh = function (filters) {
- ...
- };
-
- var init = function (filters) {
- ...
- };
-
- return {
- getFilters: getFilters,
- init: init,
- refresh: refresh
- };
- };
-})();
-````
-
-`NewUserStatisticWidget` is the name of the widget here. It should match the widget name defined in the server side. All of the functions are optional.
-
-#### getFilters
-
-If the widget has internal custom filters, this function should return the filter object. Example:
-
-````js
-var getFilters = function() {
- return {
- frequency: $wrapper.find('.frequency-filter option:selected').val()
- };
-}
-````
-
-This method is used by the `WidgetManager` while building filters.
-
-#### init
-
-Used to initialize the widget when needed. It has a filter argument that can be used while getting data from server. `init` method is used when `WidgetManager.init()` function is called. It is also called if your widget requires a full re-load on refresh. See the `RefreshUrl` widget option.
-
-#### refresh
-
-Used to refresh the widget when needed. It has a filter argument that can be used while getting data from server. `refresh` method is used whenever `WidgetManager.refresh()` function is called.
-
-## Authorization
-
-Some widgets may need to be available only for authenticated or authorized users. In this case, use the following properties of the `Widget` attribute:
-
-* `RequiresAuthentication` (`bool`): Set to true to make this widget usable only for authentication users (user have logged in to the application).
-* `RequiredPolicies` (`List
+
+}
+
+@if (Model.VisibleExternalProviders.Any())
+{
+
+
+
+
+ @L["Login"]
+ @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled)) + { + + @L["AreYouANewUser"] + @L["Register"] + + } + +
+
+}
+
+@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
+{
+ @L["UseAnotherServiceToLogIn"]
+ +
+ @L["InvalidLoginRequest"]
+ @L["ThereAreNoLoginSchemesConfiguredForThisClient"]
+
+}
+````
+
+Just changed the `@model` to `Acme.BookStore.Web.Pages.Account.CustomLoginModel` to use the customized `PageModel` class. You can change it however your application needs.
+
+## The Source Code
+
+You can find the source code of the completed example [here](https://github.com/abpframework/abp-samples/tree/master/aspnet-core/Authentication-Customization).
+
+## See Also
+
+* [ASP.NET Core (MVC / Razor Pages) User Interface Customization Guide](../UI/AspNetCore/Customization-User-Interface.md).
\ No newline at end of file
diff --git a/docs/en/How-To/Customize-SignIn-Manager.md b/docs/en/How-To/Customize-SignIn-Manager.md
new file mode 100644
index 0000000000..61b6c3b7b5
--- /dev/null
+++ b/docs/en/How-To/Customize-SignIn-Manager.md
@@ -0,0 +1,101 @@
+# How to Customize the SignIn Manager for ABP Applications
+
+After creating a new application using the [application startup template](../Startup-Templates/Application.md), you may want extend or change the default behavior of the SignIn Manager for your authentication and registration flow needs. ABP [Account Module](../Modules/Account.md) uses the [Identity Management Module](../Modules/Identity.md) for SignIn Manager and the [Identity Management Module](../Modules/Identity.md) uses default [Microsoft Identity SignIn Manager](https://github.com/dotnet/aspnetcore/blob/master/src/Identity/Core/src/SignInManager.cs) ([see here](https://github.com/abpframework/abp/blob/be32a55449e270d2d456df3dabdc91f3ffdd4fa9/modules/identity/src/Volo.Abp.Identity.AspNetCore/Volo/Abp/Identity/AspNetCore/AbpIdentityAspNetCoreModule.cs#L17)).
+
+To write your Custom SignIn Manager, you need to extend [Microsoft Identity SignIn Manager](https://github.com/dotnet/aspnetcore/blob/master/src/Identity/Core/src/SignInManager.cs) class and register it to the DI container.
+
+This document explains how to customize the SignIn Manager for your own application.
+
+## Create a CustomSignInManager
+
+Create a new class inheriting the [SignInMager](https://github.com/dotnet/aspnetcore/blob/master/src/Identity/Core/src/SignInManager.cs) of Microsoft Identity package.
+
+````csharp
+public class CustomSignInManager : Microsoft.AspNetCore.Identity.SignInManager
-
-```
-
-> We've used [PrimeNG table](https://www.primefaces.org/primeng/#/table) in this component.
-
-The resulting books page is shown below:
-
-
-
-And this is the folder & file structure by the end of this tutorial:
-
-
-
-
-
-
-
- - Books -
-
-
-
-
- Book name
- Book type
- Publish date
- Price
-
-
-
-
- {%{{{ data.name }}}%}
- {%{{{ booksType[data.type] }}}%}
- {%{{{ data.publishDate | date }}}%}
- {%{{{ data.price }}}%}
-
-
-
-
-
-
-> This tutorial follows the [Angular Style Guide](https://angular.io/guide/styleguide#file-tree).
-
-### Next Part
-
-See the [next part](Part-II.md) of this tutorial.
+* [With ASP.NET Core MVC / Razor Pages UI](../Part-1?UI=MVC)
+* [With Angular UI](../Part-1?UI=NG)
diff --git a/docs/en/Tutorials/Angular/Part-II.md b/docs/en/Tutorials/Angular/Part-II.md
index 6d1c563600..65a7dc5714 100644
--- a/docs/en/Tutorials/Angular/Part-II.md
+++ b/docs/en/Tutorials/Angular/Part-II.md
@@ -1,587 +1,6 @@
-## Angular Tutorial - Part II
+# Tutorials
-### About this Tutorial
+## Application Development
-This is the second part of the Angular tutorial series. See all parts:
-
-- [Part I: Create the project and a book list page](Part-I.md)
-- **Part II: Create, Update and Delete books (this tutorial)**
-- [Part III: Integration Tests](Part-III.md)
-
-You can access to the **source code** of the application from the [GitHub repository](https://github.com/abpframework/abp/tree/dev/samples/BookStore-Angular-MongoDb).
-
-### Creating a New Book
-
-In this section, you will learn how to create a new modal dialog form to create a new book.
-
-#### Type Definition
-
-Create an interface, named `CreateUpdateBookInput` in the `books.ts` as shown below:
-
-```js
-export namespace Books {
- //...
- export interface CreateUpdateBookInput {
- name: string;
- type: BookType;
- publishDate: string;
- price: number;
- }
-}
-```
-
-`CreateUpdateBookInput` interface matches the `CreateUpdateBookDto` in the backend.
-
-#### Service Method
-
-Open the `books.service.ts` and add a new method, named `create` to perform an HTTP POST request to the server:
-
-```js
-create(createBookInput: Books.CreateUpdateBookInput): ObservableNew Book
-
-
-```
-
-Open the `book-list.component.ts` and add `isModalOpen` variable and `createBook` method to show/hide the modal.
-
-```js
-isModalOpen = false;
-
-//...
-
-createBook() {
- this.isModalOpen = true;
-}
-```
-
-
-
-#### Create a Reactive Form
-
-> [Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
-
-Add a `form` variable and inject a `FormBuilder` service to the `book-list.component.ts` as shown below (remember add the import statement).
-
-```js
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-form: FormGroup;
-
-constructor(
- //...
- private fb: FormBuilder
-) {}
-```
-
-> The [FormBuilder](https://angular.io/api/forms/FormBuilder) service provides convenient methods for generating controls. It reduces the amount of boilerplate needed to build complex forms.
-
-Add the `buildForm` method to create book form.
-
-```js
-buildForm() {
- this.form = this.fb.group({
- name: ['', Validators.required],
- type: [null, Validators.required],
- publishDate: [null, Validators.required],
- price: [null, Validators.required],
- });
-}
-```
-
-- The `group` method of `FormBuilder` (`fb`) creates a `FormGroup`.
-- Added `Validators.required` static method that validates the related form element.
-
-Modify the `createBook` method as shown below:
-
-```js
-createBook() {
- this.buildForm();
- this.isModalOpen = true;
-}
-```
-
-#### Create the DOM Elements of the Form
-
-Open `book-list.component.html` and add the form in the body template of the modal.
-
-```html
-
-
- - Books -
-
-
-
-
-
-
-
-
-
- {%{{{ selectedBook.id ? 'Edit' : 'New Book' }}}%}
-
- ...
-
-
-```
-
-The final actions dropdown UI looks like below:
-
-
-
-#### Delete Confirmation Dialog
-
-Open `book-list.component.ts` and inject the `ConfirmationService`.
-
-```js
-import { ConfirmationService } from '@abp/ng.theme.shared';
-//...
-constructor(
- //...
- private confirmationService: ConfirmationService
-)
-```
-
-> `ConfirmationService` is a simple service provided by ABP framework that internally uses the PrimeNG.
-
-Add a delete method to the `BookListComponent`:
-
-```js
-import { ... , DeleteBook } from '../../store/actions';
-import { ... , Toaster } from '@abp/ng.theme.shared';
-//...
-delete(id: string, name: string) {
- this.confirmationService
- .error(`${name} will be deleted. Do you confirm that?`, 'Are you sure?')
- .subscribe(status => {
- if (status === Toaster.Status.confirm) {
- this.store.dispatch(new DeleteBook(id));
- }
- });
-}
-```
-
-The `delete` method shows a confirmation popup and subscribes for the user response. `DeleteBook` action dispatched only if user clicks to the `Yes` button. The confirmation popup looks like below:
-
-
-
-### Next Part
-
-See the [next part](Part-III.md) of this tutorial.
+* [With ASP.NET Core MVC / Razor Pages UI](../Part-1?UI=MVC)
+* [With Angular UI](../Part-1?UI=NG)
diff --git a/docs/en/Tutorials/Angular/Part-III.md b/docs/en/Tutorials/Angular/Part-III.md
index 6601bfb938..65a7dc5714 100644
--- a/docs/en/Tutorials/Angular/Part-III.md
+++ b/docs/en/Tutorials/Angular/Part-III.md
@@ -1,178 +1,6 @@
-## Angular Tutorial - Part III
+# Tutorials
-### About this Tutorial
+## Application Development
-This is the third part of the Angular tutorial series. See all parts:
-
-- [Part I: Create the project and a book list page](Part-I.md)
-- [Part II: Create, Update and Delete books](Part-II.md)
-- **Part III: Integration Tests (this tutorial)**
-
-This part covers the **server side** tests. You can access to the **source code** of the application from the [GitHub repository](https://github.com/abpframework/abp/tree/dev/samples/BookStore-Angular-MongoDb).
-
-### Test Projects in the Solution
-
-There are multiple test projects in the solution:
-
-
-
-Each project is used to test the related application project. Test projects use the following libraries for testing:
-
-* [xunit](https://xunit.github.io/) as the main test framework.
-* [Shoudly](http://shouldly.readthedocs.io/en/latest/) as an assertion library.
-* [NSubstitute](http://nsubstitute.github.io/) as a mocking library.
-
-### Adding Test Data
-
-Startup template contains the `BookStoreTestDataSeedContributor` class in the `Acme.BookStore.TestBase` project that creates some data to run tests on.
-
-Change the `BookStoreTestDataSeedContributor` class as show below:
-
-````C#
-using System;
-using System.Threading.Tasks;
-using Volo.Abp.Data;
-using Volo.Abp.DependencyInjection;
-using Volo.Abp.Domain.Repositories;
-using Volo.Abp.Guids;
-
-namespace Acme.BookStore
-{
- public class BookStoreTestDataSeedContributor
- : IDataSeedContributor, ITransientDependency
- {
- private readonly IRepository