tfg-components v3.0.3

TfgComponents

A collection of handy reusable components for The Forshaw Group.

Services

Services do not belong to a module and so can be imported directly from the package and provided to the application

TokenAuth Service

The TokenAuth service is responsible for setting/retriving the access_token for the app, along with holding the authenicated/not authenicated state for the application. If a access token look valid, then authService.isAuthed() will evaluate to true, if there is no token or it is marked as expired it will evaluate to false.

    
    providers: [
        {
            provide: TfgTokenAuthService,
            useFactory: createTfgTokenAuthService,
            deps: [Router, HttpClient]
        }
    ]

    export function createTfgTokenAuthService(_router: Router, http: HttpClient){
        return new TfgTokenAuthService(_router, http)
    }

Later versions of this service will allow you to set your own custom setters/getters.

Http Intercept service

This service intercepts all http requests and ensures they are authenicated with the access_token.

The refresh service also handles refresh tokens. If a request results in a 401, meaning the token is invalid, it will attempt to use the refresh token at hand to get a new access_token (at the refresh_url), if this also results in a 401 then it call logout() which will clear the local storage of the expires/invalid tokens.

If the token refresh is successful, then the valid token will be stored, the original request reattempted, and the data provided to the original calling function.

    
    providers: [
        {
            provide: TfgHttpInterceptRefreshService,
            useFactory: createHttpInterceptRefreshService,
            deps: [Router, ActivatedRoute,HttpClient]
        }
    ]

    export function createHttpInterceptRefreshService(router:Router, activatedRoute: ActivatedRoute, http: HttpClient ){
        return new TfgHttpInterceptRefreshService(router,activatedRoute,http,"http://108.128.141.162:8001");
    }

Basic CRUD Service (Abstract Class)

This is a angular service and astract class. This means it can only be used when extended by another class and can be used as a template for services. It provides methods for commonly used REST/CRUD api calls.

It can be used when creating a service e.g. jobsService.ts

    // In your app.ts file
    import { TfgComponentsModule } from "tfg-components";

    // Import this base class into the component you wish to make
    import { BasicCRUDService } from "tfg-components";
    
    
    JobsService extends BasicCRUDSerice(){

        construtor(deps:Deps){
            super(deps);
        }

        loadJobs(query:any){
            return this.loadObject(this.api + "/jobs", query).toPromise();
        }

    }

BasicPage (Abstract Class)

This is a page component and abstract class.

It can be used when creating a page e.g. JobsListPageComponent.ts

    // In your app.ts file
    import { TfgComponentsModule } from "tfg-components";

    // Import this base class into the component you wish to make
    import { BasicPageComponent } from "tfg-components";
    

    
    component JobsListPageComponent (){

        construtor(deps:Deps){
            super(deps);
        }

        displayMessage(message){
            // Pass the messages from the page, to the service responsible for displaying messages at app-level.
            this.appService.displayMessage(message);
        }

        loadData(){
            this.pageError = false;
            this.loading = true;
            this.loadJobs().then(done=>{

                this.loading = false;

            }).catch(err=>{

                let isFullPageError = false;
                this.handleHttpErrors(err, isFullPageError);

            })
        }

    }

TFGComponentsModule

import { TfgComponentsModule } from "tfg-components";

This module depends on material design.

Navbar Component (coming soon)

THIS COMPONENT IS COMING SOON!

    <!-- In app.html -->
    <lib-navbar></lib-navbar>

Sidenav Component

Give it a title, icon and a path and it will give you a nicely formatted sidenav. Also contains a link back to your profile.

    
    <!-- app.html -->
    <lib-sidenav
    [tabs]="tabs"
    [profile_url]="environment.profile_url"
    ></lib-sidenav>

    // in app.ts
    tabs = [
    {
      "title" : "Dashboard",
      "icon" : "fa fa-home",
      "path" : "/dashboard"
    },
    {
      "title" : "Item One",
      "icon" : "fa fa-home",
      "path" : "/itemone"
    } 
    ]

TfgError500Page Component

A full page displaying an error has occured and requesting a refresh.

    
    <!-- ?.html -->
    <lib-sidenav
    [tabs]="tabs"
    [profile_url]="environment.profile_url"
    ></lib-sidenav>

    // in ?.ts

TfgBigLoader Component

A loading animation, standardised for TFG.

    
    <!-- ?.html -->
    <lib-sidenav
    [tabs]="tabs"
    [profile_url]="environment.profile_url"
    ></lib-sidenav>

    // in ?.ts

TfgPageHeader Component

A loading animation, standardised for TFG.

    // in ?.ts
    <tfg-page-header
        [error]="error"
        [errorText]="'There was an error while loading this page'"
        [title]="'Welcome' + tokenService.first_name">
    </tfg-page-header>

LoginModule

import { TfgLoginModule } from "tfg-components";

Staging Login Button

Test your app in development and staging by adding a 'Staging Login' button.

This button allows you set your access token with fully customised user details (or you can choose from a list)

This removes the need to start and repeatedly configure your single sign on, in development/staging and reduces dependanices/complexieties when testing your app.

    
    <tfg-staging-login-button
        [secret]="'shhh123shhh123'"
        [demo_users]="demo_users"
        [init]="demo_users[0]">
    </tfg-staging-login-button>

   // in app.ts
   demo_users = [
       {
           "id" : 1
       }
   ]

Login page

This provides a login page for all applications to use. You must configure where you want the login page to redirect to.

    const loginConfig:LoginConfig = {
        login_url : environment.sso_login_url
    }

  imports: [
    LoginModule.forRoot(loginConfig)
  ]

Models

    import TfgUserToken from "tfg-components";
    import TfgRefreshToken from "tfg-components";