Welcome To Products Documentation

Documentation for .NET Razor, .NET MVC, Blazor Server Web App (.NET 8) and SaaS Module products.
If you need assistance, feel free to contact us. We operate Monday - Friday (9am-5pm: +2GMT)

Introduction


If you have purchased, thank you so much for being our loyal customer. You're awesome!😍
You are entitled to all the terms you agreed upon your purchase and we will help you get the most out of your products.

This documentation is to help you with your product customization. Please go through the documentation carefully to understand how this product is made and how to edit this properly.

Customization Requirements:

You will need the following sofware tools and knowledge to customize this product:
  1. Visual Studio IDE 2022 or latest.
  2. Web Browser for testing (eg: Mozilla FireFox, Mozilla FireFox for Developers, Google Chrome, Brave, etc.)
  3. Knowledge of HTML, CSS, Javascript, C#, .NET, Database Development (MSSQL, MySQL, etc), ASP.NET Platform, Entity Framework Core, Google OAuth2.0, Microsoft OAuth2.0, Email Integration with Postmark.
  4. Installed ASP.NET Web Application development workflow in your Visual Studio IDE.

If you need assistance and help, we can provide paid help. Please check our website for service packages.

Be careful when editing the producr. If not edited properly, the design layout may break completely.
No support is provided for faulty customization which you may introduce due to poor or improper editing.

Getting Started

For Blazor Web App (for Server in .NET) Customization, you should be interested in the following articles in this documentation:

NOTE:
The Blazor Web App (for Server in .NET) has different folder structure.
  1. The Identity pages are under the Components folder.
  2. The Identity User Custom class is in the Data folder.

  1. Creating Project Database (click here to read)
  2. Database CRUD (click here to read)
  3. Email Sender API (click here to read)
  4. Email Validation API (click here to read)
  5. Project Deployment (click here to read)
  6. Multiple Databases (click here to read)
  7. Custom Tokens (click here to read)
  8. HTML Email Templates (click here to read)

We used Bootstrap 5 and ASP.NET to development this product. You need Visual Studio IDE 2022 (the latest version) and install the ASP.NET Web Application development workload in order to edit and customize the project. If you have these already installed, then you are ready for excitement!😍

The check-list to follow when getting started:

  1. Connect to the Internet and Build (or rebuild) your project.
  2. On success:
    1. Run the project (as debug or without debugging.) The Super Administrator is created automatically.
    The Super Administrator credetials are as follows:
    Username: super
    Password: 123
  3. Sign-in as Super Administrator and checkout the product features.

You can create other new accounts and manage them, see how the System handles Roles and Authorization, etc.

At this point, you cannot Sign-in or Sign-up with your Social Accounts because you have not added your social accounts ClientId and ClientSecret.

How to add social ClientId and ClientSecret.

  1. Create a Google App and Microsoft App then obtain your ClientId and ClientSecret from each provider.
    Follow these instruction to learn how you can create these apps:
  2. Go to your project files and open the appsettings.json file then add your authentication keys as follows:
    "OAuth": {
     "Google": {
    "ClientId": "your-client-id-comes-in-here",
    "ClientSecret": "your-client-secret-comes-in-here"
    },
    "Microsoft": {
    "ClientId": "your-client-id-comes-in-here",
    "ClientSecret": "your-client-secret-comes-in-here"
    }
                                                    
  3. That's all! Save and build the project, then run. You can now Sign-up and Sign-in with Google and Microsoft.
  4. Do not forget to publish your apps (Google OAuth2.0) from the console which you used to create the client keys as above.

Download Visual Studio IDE & .NET

If you have already downloaded Visual Studio IDE 2022 or higher, you may choose to skip this stage. You can check the supported .NET version for this product from the website. We recommend you to install the ASP.NET Web Application development workflow when installing Visual Studio IDE.

Create Project Database

Creating MSSQL Server Database (The Default Project Database)

We have used Entity Framework Core as the Object Relational Mapper (ORM) for the default project database MSSQL Server. You can use Entity Framework Core for any database of your choice. Learn more about Entity Framework Core from their documentation found here.

The default database name for the project is found in the appsettings.json file. See the exmaple below:

MSSQLServerConnection": "Server=(localdb)\\mssqllocaldb;Database=the-database-name-comes-here;Trusted_Connection=True;MultipleActiveResultSets=true

Creating and updating the Database, using Entity Framework Core, is simply and straight-forward. Please follow these steps:

  1. Open Package Manager Console. Go to View > Other Windows > Package Manager Console
  2. When the window opens, usually at the bottom of Visual Studio IDE, type: Add-Migration CreateDatabase and press Enter. 'CreateDatabase' is the migration name, you can choose to give it any meaningful name that you will recognize.
  3. Entity Framework Core will create all the database tables, then:
  4. Type: Update-database and press Enter. The database will be created.

In your project files, you will see a new folder/directory named Migrations which contains all your migration history and what was created including a snapshot of the migration.

Done! You can now use your database.

Edit Database Seed Data

  1. Open the Project files and go-to DataContext > AppDbContext.
  2. You will see the seed data and all the necessary seeding information. You can customize the data:
    protected override void OnModelCreating(ModelBuilder builder)
    {
        // seeding default data. Go to definition and edit/customize
        builder.Seed();
    
        // base call
        base.OnModelCreating(builder);
    }
                                                    

Demo Super Administrator User Account

We have setup limitations on the Demo Super Administrator account so that anyone who tests the system can have access to the Demo Super Administrator account. Imagine this scenario:
Someone sign-in to the Demo Super Admin and changes the account email, username and password or enable 2-Factor Authentication. This will cause the demo account to be accessible only to that particular individual while denying access to the rest who may be interested in testing the System (Free Evaluation) through the Demo Super Administrator account.
To that effect, we have intentionally disabled critical account setting on the Demo Super Admin Account only and set a few limits. After purchase, you can remove the limitations as you edit and customize the system.
Here are a few limitations we have placed for the Demo Super Admin User Account, only:
  1. Cannot delete the account
  2. Cannot change account username
  3. Cannot change account password
  4. Cannot remove Demo Super Admin user from the Super Administrator role
  5. Cannot change account email
  6. Cannot set up Two-factor Authentication
  7. Cannot change account information
To remove the limitations, please read below:
  1. Locate the following pages and remove the following code:
    Locate: Areas/Identity/Pages/Account/Manage
    1. ChangePassword.cshtml.cs
    2. ChangeUsername.cshtml.cs
    3. DeletePersonalData.cshtml.cs
    4. Email.cshtml.cs
    5. EnableAuthenticator.cshtml.cs
    6. PersonalInformation.cshtml.cs
    7. RemoveRoleMember.cshtml.cs
  2. Remove the following code block from the .cshtml.cs files located above:
    // remove this code when you buy the product.
    // It prevents demo users from deleting a Super Administrator
    if (user.Id == SuperAdministratorId.Get)
    {
        // code logic...
    }
    

Database CRUD Operations

We use Entity Framework Core (EFCore) to manage the underlining database. Our implementation supports dependancy injection for better performance therefore we advice that you follow the exmaple below when interacting with the database:

  1. In any given class, inject the IDbContextFactory like this:
                                            
    public class AnyClass(IDbContextFactory< AppDbContext > dbContextFactory)
  2. Make a readonly field like this:
    private readonly IDbContextFactory< AppDbContext > dbContextFactory = dbContextFactory;
  3. In any method/function, create a context like this:
    using var dbContext = await dbContextFactory.CreateDbContextAsync();
  4. Create/Add an entity:
    await dbContext.AddAsync(Entity);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes
  5. Create/Add many entities:
    await dbContext.AddRangeAsync(EntityArray);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes
  6. Read entity/entities:
    var user = await dbContext.Users.FirstOrDefaultAsync(x => x.Id == "12345");
    var users = await dbContext.Users.AsNoTracking().ToListAsync();
    var usersWith2FaEnabled = await dbContext.Users.AsNoTracking().Where(x=> x.TwoFactorEnabled).ToListAsync();
    var usersFromNewYork = await dbContext.Users.AsNoTracking().Where(x=> x.City == "New York").ToListAsync();
  7. Update an entity:
    dbContext.Update(Entity);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes
  8. Update many entities:
    dbContext.UpdateRange(Entity);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes
  9. Delete an entity:
    dbContext.Remove(Entity);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes
  10. Delete many entities:
    dbContext.RemoveRange(Entity);
    await dbContext.SaveChangesAsync(); // do not forget to always save changes

Extend IdentityUser Class

Extending the IdentityUser is simple and straight-forward. We have provided a class to help you ass your own custom properties and user features. Follow the steps below:

  1. Go to your project files and locate DataModels > ApplicationUser > ApplicationUserModel
  2. The ApplicationUserModel is the class that extends the IdentityUser class.
  3. You can add your custom properties and features to this class. Build and run. Done.

Project wwwroot Files

Project SCSS files

Locate the wwwroot folder and reveal all the scss files.

  1. Authentication pages: theme switcher: components/scss/floating-theme-switcher.scss
  2. Password meter: components/scss/password-meter.scss
  3. Authentication pages: css/authentication/authentication.scss
  4. Custom bootstrap: custom-bootstrap/customBootstrap.scss
  5. General styles: css/general.scss

Project Javascript Files

Locate the wwwroot folder and reveal all the javascript files.

  1. All project javascript files: wwwroot/js/...

Adding custom Javascript

Locate the wwwroot folder and open the js folder.

  1. All project javascript files: wwwroot/js/..., therefore add your files in here.

Project Font Families

Locate the wwwroot folder and open the fonts folder.

  1. All project font families are in here: wwwroot/fonts/..., therefore add your fonts in here.

Customize Bootstrap Colors

Locate the wwwroot folder and open the custom-bootstrap > customBootstrap.scss folder.

  1. Customize the Bootstrap colors in this file.

Countries Json Files

Locate the wwwroot folder and open the countries-json folder.

  1. Customize the countries and states.

Country Flags

Locate the wwwroot folder and open the countries-flags folder.

  1. All flags are in this folder.

Email Sender API

We have integrated Postmark API as the email sender service. You are free to implement your own service. To learn more about Postmark, please visit their website.

The Postmark API integration uses dependancy injection and some helper classes. See below to learn more about customizing the API:
  1. Open your project files and locate HelperClasses > EmailManager > Sender
  2. In this directory, you will see the following classes:
    1. IEmailSenderService.cs: the interface implemented by the class that sends an email message.
    2. EmailSender.cs: the class that implements IEmailSenderService.cs and sends an email message.
    3. EmailSenderResult.cs: the response after attempting to send an email.
  3. The EmailSender.cs class takes the Postmark FromEmail and Postmark ClientId which will be used to authenticate your postmark account and sends an email on successful authentication.
  4. The Postmark ClientId and Postmark FromEmail are taken from the appsettings.json file.
    "PostMark": {
    "FromEmail": "your-from-email-whose-domain-is-authenticated-in-postmark",
    "ClientId": "postmark-client-id"
    },
                                                        
  5. Populate these values with your own FromEmail and ClientId, then you are ready to send emails. You can learn more about how to get these values from Postmark Developer Documentation.

Email Validation API

Email Validation With Abstract API

We use Abstract API for Email Validation. You are free to implement your own Email Validation Service.

To learn how we have used Abstract API please continue reading:
  1. Go to your project files and locate HelperClasses > API > EmailValidation > AbstractAPI.
  2. We have used Dependancy injection to implement the API and the result are 3 helper classes, as follows:
    1. IAbstractEmailService.cs: the interface that will be implemented by the class that will validate an email address.
    2. AbstractEmailService.cs: the class that implements the IAbstractEmailService.cs class and actually validates a given email address.
    3. AbstractEmailResponse.cs: the validation response which contains vital information about the validation process.
    4. You can learn more about the validation and response from this resource.
    5. When you have your Abstract API details, you can save them in the appsettings.json file like below:
      "AbstractApi": {
      "Email": {
          "ApiKey": "your-abstract-api-key",
          "BaseUrl": "https://emailvalidation.abstractapi.com/v1/" // the base URL (do not change)
      }
                                                                  
  3. When the Super Admin or Admin enables Email Validation for new sign-ups, the Abstract API will kick in and go to work, in real-time.

Solution Name & Logo

You can add your solution logo to wwwroot, in an img folder and use it across your solution. If the img folder does not exist, you can create a new one.

How to change the solution (end-product) name:
  1. Go to your project file and locate HelperClasses > SystemName
  2. We have used Dependancy Injection to get the name across the system. Inject the ISystemName.cs in any class then call the GetName property. It is readonly and returns a name as a string.

Solution Deployment

Deploying your solution is simple and straight-forward. If you have deloyed an ASP.NET Website or Web App before then the process will be familiar. TO learn how to deploy your project made with our products, please follow this complete documentation.

Multiple Databases

Our products support all the database providers that suppport .NET and Entity Framework Core. Here is a list of databases you can use:
  1. MSSQL Server
  2. MySQL
  3. PostgreSQL
  4. SQLite
  5. MongoDb
  6. AWS
  7. Azure
  8. Google Cloud SQL
  9. Oracle Database
  10. etc...
  11. See the complete list of supported database providers from this resource.

Role-Based Authorization

You can add authorization in a simple manner by adding role checks like below:
[Authorize(Roles = "Administrator")]
public class AdministrationController : Controller
{
    public IActionResult Index() => Content("Administrator");
}
                            
To learn more about how we have implemented roles, please read below:
  1. Open your project files and locate Roles
  2. You will find 3 classes:
    1. PermissionsStore.cs: the class that stores all the permissions.
    2. RolePermissions.cs: this class is intentionally left empty to help you add your custom code and then implement it. if you wish.
    3. SystemRoles.cs: the class with default system roles (27)

Account Activity Logging

By default, the system logs upto 35 different and unique account events, all in realtime. The logging is deactivated by defauult and will be turned ON by the Admin or Super Admin. They have the choice of selectively turning ON activities to monitor, ie. they can choose to turn on Failed Password events and ignore Account Lockout events.
We have used dependancy injection to implement activity logging. To learn more, see below:
  1. Go to your project files and locate HelperClasses > AccountActivityLogging
  2. You will see 2 classes:
    1. IAccountActivityLogger.cs: the interface to be implemented by the logger class.
    2. AccountActivityLogger.cs: the class that logs all activities.
    You can open the class and reveal how we are logging activities.

Claims-Based Authorization

Our products support role and claims based authorization. The implementation is identical to .NET implementation. To learn more please follow the links below:
  1. Claims Based Authorization: Learn more from this documentation.
  2. Policy Based Authorization: Learn more from this documentation.
  3. Role Based Authorization: Learn more from this documentation.

IP Geolocation

We have deprecated IP Based Geolation to prevent opinionated design. We offer paid services to design a custom service that resolves IPs and return IP data ie. City, Country, ISP Name, ISP Business Name, Date, Location, etc. If you are interested in this service, please contact us.

Custom Tokens

We have developed custom tokens for critical services such as Passwordless Authentication, etc. TO learn more please read below:
  1. Open HelperClasses > Tokens
  2. You will see the custom tokens we have developed and you can customize them.

HTML Email Templates

Our default emails are HTML Formatted. You can customize the templates by providing your own HTML code. To reveal the templates, please read on:
  1. We have implemented Dependancy Injection to call an HTML Template for sending as an email message in an email body.
  2. Locate the HelperClasses > EmailManager > Templates
  3. You will see 2 classes:
    1. IEmailTemplate.cs: the class that will be implemented by the class that creates a template.
    2. EmailTemplate.cs: the class that creates an HTML template and returns it to the caller.
    3. You can inject the IEmailTemplate.cs class and call for a template to be created and returned.
    4. Call a template this way:
      var untrustedDeviceEmailAlertTemplate = await emailTemplate.NewDeviceSignedInAsync(user, untrustedNewSigninEvent, trustDeviceUrlCallbackUrl);
      1. await emailTemplate.NewDeviceSignedInAsync...: calling for a NewDeviceSignin template to be created.
      2. user: the user whose account is in question.
      3. untrustedNewSigninEvent: the type of event. You can learn more about these events by going to the Definition of the variable.
      4. trustDeviceUrlCallbackUrl: the call-back url embedded in an email upon which the user could take action such as Trust Device.
      5. untrustedDeviceEmailAlertTemplate: the returned HTML template as a string.
    5. Pass the returned string (which contains HTML Email Data) to the email message body.
  4. We provide paid assistance to develop custom templates. If you need our service, please contact us.

Support Desk

Please remember you have purchased a very affordable product and you have not paid for a full-time development agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature unless you are eligible for Priority Support. Support is provided on the terms you agreed on when you purchased your product. Please be patient, polite and respectful.

Support for products includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
By default, item support does not include (unless you have bought a customization enabled Package):
  • * Customization and installation services
  • * Support for third party software and plug-ins
If you have bought the customization package, we will:
  • * Do minor customization services only
We will not:
  • * Develop a product for you
  • * Install tools, our own or third-party for you
  • * Fix bugs you have introduced
  • * Fix compatibility issues.
If you hope to receive customization support, please contact us first BEFORE purchase to confirm if we will support your case.
Before seeking support, please...
  • * Make sure your question is a valid product Issue and not a customization request (unless you have bought a customization package).
  • * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  • * Make sure to double check the FAQs.
  • * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  • * If you have customized your product and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the product you are having issues with when requesting support.

License, Terms, etc.

  1. Terms and Conditions of Use: click here to read.
  2. Refund Policy: click here to read.
  3. Purchase Terms: click here to read.
  4. Privacy Policy: click here to read.
  5. Support Policy: click here to read.

PayPal Module

Our PayPal SaaS Module is well documented, within the product as code comments. Every code step is well commented to provide guidance.