User Management

intro

Hello everyone!

Thank you for purchasing solution. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Quick Start Guide

.Net Core Installation

Prerequisites

.NET CORE 5 SDK and VISUAL STUDIO 2019, SQL SERVER

Installation steps

  • Open solution file UserManagement.sln from .Net core folder into visual studio 2019.
  • Right click on solution explorer and Restore nuget packages.
  • Change database connection string in appsettings.Development.json in UserManagement.API project.
  • Open package manager console from visual studio menu --> Tools --> nuget Package Manager --> Package Manager Console
  • In package manager console, Select default project as UserManagement.Domain
  • Run Update-Database command in package manager console which create database and insert intial data.
  • From Solution Explorer, Right click on UserManagement.API project and click on Set as Startup Project from menu.
  • To run project Press F5.

Angular Installation

Prerequisites

Although User Management can be run without any development experience, it would be much easier if you already have some experience. The following instructions allow you to run a local copy on your machine.

Install tools

If you have not yet installed nodejs, please Download and globally install nodejs : https://nodejs.org
Note: download Recommended For Most Users version

A detailed instruction on how to install NodeJS is available here.

Note: Make sure you have Node version >= 4.0 and NPM >= 3 . Also globally installed typescript.

Installing Angular-CLI globally is as simple as running this simple command: npm install -g @angular/cli

After the tools is installed, go inside of the Angular directory and run below command to install dependencies:

Run npm install to install node dependencies defined in package.json.

Running local copy

To run a local copy in development mode, replace REST API URI (apiUrl) variable in environment file inside src --> environments -->environment.ts

execute ng serve and go to http://localhost:4200 in your browser.

To run the local copy in production mode and build the sources, execute ng build --prod. This will builds a production version of the application. All html,css and js code is minified and put to dist folder. The contents of this folder you can to put to your production server when publishing the application.

For Social Media Login

To Allow Social media login, please change Environment variables(googleAppId,facebookAppId) into your src --> environments -->environment.ts

.Net Core Project Structure

The project structure is as follows:

UserManagement.sln/                        * projects solution
│   │
│   ├──UserManagement.API                  * REST API Controller, Dependancy configuration, Auto mapper profile 
│   │
│   ├──UserManagement.MediatR              * Command handler, Query handler, Fluent API validation
│   │
│   ├──UserManagement.Repository           * Each entity repository
│   │
│   ├──UserManagement.Domain               * Entity framework dbContext 
|   |
│   ├──UserManagement.Common               * Generic repository and Unit of work patterns
│   │ 
│   ├──UserManagement.Data           	   * Entity classes and DTO classes
│   │
│   ├──UserManagement.Helper               * Utility classes

Angular Project Structure

The directory structure is as follows:

UserUserManagement/ 
├──src/                       		* source files that will be compiled to javascript
│   │
│   ├──test.ts                		* test
│   │
│   ├──styles.scss            		* globally stylesheet
│   │
│   ├──index.html            		* application layout
│   │
│   ├──main.ts                		* entry file for our browser environment
|   |
│   ├──main.server.ts               * entry file for our server environment
│   │ 
│   ├──polyfills.ts           		* polyfills file
│   │
│   ├──favicon.ico            		* favicon 
│   │
│   ├──app/                   		* application code - our working directory
|   |   |
│   |   ├──app-settings/            * application code - Add save application related to key and value
|   |   |
│   |   ├──core/                   	* components,services and directives - only imported once in the AppModule
|   |   |
│   |   ├──dashboard/               * basic charts and statistics 
|   |   |
│   |   ├──email-send/              * send mail to user from existing save template
|   |   |
│   |   ├──email-smtp-setting/      * save multiple smtp setting and list
|   |   |
│   |   ├──email-template/          * save and list of email templates to send mail 
|   |   |
│   |   ├──login/                   * authentication management
|   |   |
│   |   ├──login-audit/             * login audit list
|   |   |
│   |   ├──n-log/                   * log error for rest api and angular
|   |   |
│   |   ├──role/                   	* role add, edit and list
|   |   |
│   |   ├──screen/                  * list of pages
|   |   |
│   |   ├──screen-operation/        * application wise set possible actions for page.
|   |   |
│   |   ├──operation/               * action add,edit and list.
|   |   |
│   |   ├──session/                 * current logged users 
|   |   |
│   |   ├──shared/                  * shared module
|   |   |
│   |   ├──store/                   * ngrx data setting
|   |   |
│   |   ├──user/                   	* usermanagement
│   │   │
│   │   ├──app.component.ts   		* main application component
│   │   │
│   │   ├──app.component.html 	  	* main application html file
│   │   │
│   │   ├──app.component.scss 		* main application styles
│   │   │
│   │   ├──app.module.ts      		* main application module
│   │   │
│   │   ├──app.routing.ts     		* application routes
│   │   │  
│   │   ├──http-interceptor.module.ts  * set rest service uri for each rest call and manage loading for rest calls
│   │   │
|   │   ├──shared/             		* shared modules folder
│   │
│   ├──environments/         		* environments
│   └──assets/                		* static assets are served here
│ 
├──e2e/                       * will be used for end-to-end tests to ensure functionality for users before deploying
├──angular.json               * used for configuration of project specific settings
├──karma.conf                 * config file for karma testing framework
├──package.json               * contains all dependencies used for production and development
├──README.md                  * read me file
├──tsconfig.app.json          * config app for typescript
├──tsconfig.json              * config for typescript
├──tsconfig.spec.json         * config spec for typescript
└──tslint.json                * Angular-CLI includes an automatic Typescript-Linter, which can be configured with this file

Steps to create new entity(table) in .Net core.

Below steps are demostrating, How to add User entity.

Step 1: Create User Entity

GO TO ==> UserManagement.Data ==> Entities ==> User.cs

Card image cap
Step 2: Create UserDto Class

GO TO ==> UserManagement.Data ==> Dto ==> Create User Folder ==> UserDto.cs

Card image cap
Step 3: Add User Class into UserContext

GO TO ==> UserManagement.Domain ==> Context ==> Add DbSet in UserContext

Card image cap
Step 4: Add Migration and Create or Update database table

OPEN Package Manager Console ==> Select Default project as UserManagement.Domain

RUN Command ==> Add-Migration User_Created

RUN Command ==> Update-Database

Card image cap
Step 5: Create UserRepository

GO TO ==> UserManagement.Repository Project ==> Create User Folder

Create IUserRepository interface and UserRepository Class

Register IUserReposistory and UserRepository For Dependancy injection into UserManagement.API Project ==> Helpers Folder ==> DependencyInjectionExtension.cs Class

Card image cap
Step 6: User CRUD Operation

GO TO Project ==> UserManagement.MediatR ==> Command Folder ==> User Folder

Create AddUserCommand Class ==> Implement Generic interface IRequest(Mediatr Patterns)

Card image cap
Step 7: Validate AddUserCommand class with FluentAPI

GO TO Project ==> UserManagement.MediatR ==> Validators Folder ==> User Folder

Create AddUserCommandValidator Class ==> Implement Generic interface AbstractValidator (FluentValidation)

Card image cap
Step 8: Create AddUserCommandHandler class for Insert User.

GO TO Project ==> UserManagement.MediatR ==> Handlers Folder ==> User Folder

Create AddUserCommandHandler Class ==> Implement Generic interface IRequestHandler > (Mediatr Patterns)

Card image cap
Step 9: Create Mapping AddUserCommand to User Entity class

GO TO Project ==> UserManagement.API ==> Helpers Folder ==> Mapping Folder

Create UserProfile Class ==> Implement Class Profile (AutoMapper)

Config UserProfile into MapperConfig for register into StartUp.cs Middlerware.

Card image cap
Step 10: Create UserController Class

GO TO Project ==> UserManagement.API ==> Controllers Folder ==> User Folder

Create UserController Class ==> Implement Class Profile (AutoMapper)

Config UserProfile into MapperConfig for register into StartUp.cs Middlerware.

Card image cap

Permission to angular new module

  • Add screen name from screen page
  • Go to Screen Operation page, Select screen opration according to your requirements
  • Go to your module routing file and given claim type as below, 
                                    {
                                path: '', component: UserListComponent,
                                data: { claimType: 'user_list' },
                                canActivate: [AuthGuard]
                                },
                            
                                    <button *hasClaim="'user_edit'" 
                                (click)="editUser(user)">
                                <i class="las la-pen" > </i>
                                Edit
                                </button>

    claimType: {screen/page name}_{operation/ action name}

    hasClaim: structural directive to show and hide action base on claim type

List of functional screens

Angular Project Structure

Angular Project Structure.

Dot net Core Project Structure

Dot net Core Project Structure.

Swagger API Documentation

Swagger API Documentation

Login

Login

Dashboard

Dashboard.

Role List.

Role List.

Add/Edit Role

Add/Edit Role

User List

User List

Add/Edit User

Add/Edit User.

List of Pages or Dialogs

List of Actions.

List of Pages or Dialogs

List of Pages or Dialogs.

Page Action possible Mapping

Page Action possible Mapping.

Current Online User

Mobile View

Current Online User

Mobile View

Email SMTP List

Email SMTP List

Email Template List

Email Template List

Add/Update Email Template

Add/Update Email Template

Send Mail

Send Mail

Login Audit

Login Audit

Log Detail

Log Detail

My Profile

My Profile

Support and Feedback

All questions you can send via the contact form HERE.

I will answer all questions within 24-48h in the order they were received.

Please do not panic if I do not answer too long – I love my buyers and I’ll answer for all questions ;)

Support for my items includes:

  • Answering questions about how to use the item.
  • Answering technical questions about the item (and included third party assets).
  • Help with defects in the item or included third party assets.
  • Item updates to ensure ongoing compatibility and to resolve security vulnerabilities.

Item support does not include:

  • Installation of the item.
  • Hosting, server environment, or software.
  • Support for third party plug-ins.
  • Plugins integration.
  • Support for issues caused by user modifications in the solution’s code, styling and general functionality.

More information about the terms of support you can see here: https://themeforest.net/page/item_support_policy

Conclusion

Thank you for your purchase!

Thanks for reading the Instruction, hope it’s been really helpful and resolved most of your concerns.

Don’t forget to rate if you enjoy the product! It is very important for us to have certain goal.