tfg-components
v3.0.3
Published
A collection of handy reusable components for The Forshaw Group.
Downloads
1
Readme
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
Models do not belong to a module and so can be imported directly from the package and provided to the application.
import TfgUserToken from "tfg-components";
import TfgRefreshToken from "tfg-components";