Add members to your website

using the Membership Microservice

This walkthrough will demonstrate how to use the Membership microservices to add member access to your website

  1. Create containers and initial website
  2. Add controller to home component
  3. Add authenticated section to home view
  4. Install membership module
  5. Add a list of members
  6. Create a new member
  7. Allow editing of members

1. Create containers and initial website

Continue from the authentication walkthrough and perform steps 1-8 without the cleanup

2. Add controller to home component

In Visual Studio open 'Scripts\components\home.component.ts' and add a controller


import { Events as AuthEvents, PrincipalFactory, IPrincipalFactory, IUserAuthenticationResult } from "@intalex/auth";

class HomeController implements ng.IController {
    static $inject = ["$scope", PrincipalFactory.NAME];

    private _authenticated: boolean = false;

    constructor($scope: ng.IScope, principal: IPrincipalFactory) {
        /*This line watches for the authenticated event and changes the flag in this controller*/
        $scope.$on(AuthEvents.Authenticated, (e, user: IUserAuthenticationResult) => { this._authenticated = true; });
        /*This line watches for the logged out event and changes the flag in this controller*/
        $scope.$on(AuthEvents.LoggedOut, (e, user) => { this._authenticated = false; });
        /*This line checks the current status of the principal and sets the flag in this controller*/
        if (principal.isAuthenticated) { this._authenticated = true; }
    }

    public get isAuthenticated() { return this._authenticated; }
}

export class HomeComponent implements ng.IComponentOptions {
    static NAME: string = 'homeView';
    templateUrl: any;
    controller: any;
    constructor() {
        this.templateUrl = "/partials/home/index";
        this.controller = HomeController;
    }
}

3. Add authenticated section to home view

Open 'views\home\index.cshtml' and add the <div ng-if="$ctrl.isAuthenticated"> section

    <div class="dashboard-view">
        <h1>Dashboard</h1>

        <div ng-if="$ctrl.isAuthenticated">
            Authenticated
        </div>

        <ix-login-view></ix-login-view>
    </div>

You should now be able to browse the website and see "Authenticated" after logging in (with admin credentials)

4. Install membership module

Open command prompt in the project directory 'src\Intalex.Public.Web' and run npm install

npm install @intalex/membership --save

Open 'src\Intalex.Public.Web\Scripts\main.ts' and add the '@intalex/membership' dependency in the application module

var mod = angular.module("ix.spa.portal", ['ui.router', 'ix.spa.framework', '@intalex/auth', '@intalex/membership']);

Add imports

import { MembershipProvider, IMembershipProvider } from '@intalex/membership';

Add membership module configuration

mod.config([MembershipProvider.NAME + "Provider",
(config: IMembershipProvider) => {
    config.setApiUrl('/api/mem');
}]);

In ‘appsettings.json’ add the membership url mapping

"Mappings": [
      {
        "Rel": "identity",
        "LocalPath": "/api/id",
        "RemoteUrl": "http://localhost:53290/"
      },
      {
        "Rel": "membership",
        "LocalPath": "/api/mem",
        "RemoteUrl": "http://localhost:54291/"
      }
    ]

5. Add a list of members

Open 'views\home\index.cshtml' and add the <ix-list-members> section

    <div class="dashboard-view">
        <h1>Dashboard</h1>

        <div ng-if="$ctrl.isAuthenticated">
        	<ix-list-members></ix-list-members>
        </div>

        <ix-login-view></ix-login-view>
    </div>

A list of members should now show when logged in

6. Create a new member

Open ‘Scripts\components\home.component.ts’ and add the following

import { IMember } from '@intalex/membership';

private _createMember: boolean = false;

public get createMember() { return this._createMember; }

public createNewMember = () => {
     this._createMember = true;
}

public onCreated = (member: IMember) => {
    this._createMember = false;
}

‘Scripts\components\home.component.ts’ should now look like this

import { Events as AuthEvents, PrincipalFactory, IPrincipalFactory, IUserAuthenticationResult } from "@intalex/auth";
import { IMember } from '@intalex/membership';

class HomeController implements ng.IController {
    static $inject = ["$scope", PrincipalFactory.NAME];

    private _authenticated: boolean = false;

    private _createMember: boolean = false;

    constructor($scope: ng.IScope, principal: IPrincipalFactory) {
        /*This line watches for the authenticated event and changes the flag in this controller*/
        $scope.$on(AuthEvents.Authenticated, (e, user: IUserAuthenticationResult) => { this._authenticated = true; });
        /*This line watches for the logged out event and changes the flag in this controller*/
        $scope.$on(AuthEvents.LoggedOut, (e, user) => { this._authenticated = false; });
        /*This line checks the current status of the principal and sets the flag in this controller*/
        if (principal.isAuthenticated) { this._authenticated = true; }
    }

    public get isAuthenticated() { return this._authenticated; }
    public get createMember() { return this._createMember; }

    public createNewMember = () => {
        this._createMember = true;
    }

    public onCreated = (member: IMember) => {
        this._createMember = false;
    }
}

export class HomeComponent implements ng.IComponentOptions {
    static NAME: string = 'homeView';
    templateUrl: any;
    controller: any;
    constructor() {
        this.templateUrl = "/partials/home/index";
        this.controller = HomeController;
    }
}

Open ‘views\home\index.cshtml’ and add a button for creating a new member and add the <ix-create-member> section

<div ng-if="$ctrl.isAuthenticated">
    <ix-list-members></ix-list-members>

    <button class="create-member" ng-click="$ctrl.createNewMember()">Create New Member</button>
    <div ng-if="$ctrl.createMember">
        <ix-create-member on-created="$ctrl.onCreated"></ix-create-member>
    </div>
</div>

After logging in you should now be able to use the ‘Create New Member’ button to display and use the create member component

7. Allow editing of members

Open ‘Scripts\components\home.component.ts’ and add the following

private _editMember: boolean = false;
private _memberToEdit: IMember;

public get editMember() { return this._editMember; }
public get memberToEdit() { return this._memberToEdit; }

public onMemberSelect = (member: IMember) => {
    this._editMember = true;
    this._memberToEdit = member;
}
public onEdited = (member: IMember) => {
    this._editMember = false;
}
public onEditCancelled = () => {
    this._editMember = false;
}

Open ‘views\home\index.cshtml’ and add the following within the ‘isAuthenticated’ div

<div ng-if="$ctrl.editMember">
    <ix-edit-member member="$ctrl.memberToEdit" on-edited="$ctrl.onEdited" on-cancelled="$ctrl.onEditCancelled"></ix-edit-member>
</div>

and change <ix-list-members> to

<ix-list-members on-select="$ctrl.onMemberSelect"></ix-list-members>

Clicking a member in the list will now display the edit member component to allow for editing the selected member

8. Wrapup

Thats the end of this walk-through. The next walkthrough will be to add roles to the members

9. Cleanup

To stop and remove all the docker containers run the following:


docker stop mem_demo_id
docker stop mem_demo_mem
docker stop mem_demo_rmq
docker stop mem_demo_db
docker rm mem_demo_id
docker rm mem_demo_mem
docker rm mem_demo_rmq
docker rm mem_demo_db
docker network rm mem_demo-net