theoomoregbee’s gists

theoomoregbee / index.html

Created July 8, 2017 07:53

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA

	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>AngularAuth</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"

theoomoregbee / app.routes.ts

Last active July 8, 2017 07:58

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA--> router created

	import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
	import { LoginComponent } from './login/login.component';
	import {Routes} from '@angular/router';

	export const APP_ROUTES: Routes = [
	{ path: 'login', component: LoginComponent },
	{ path: '**', component: PageNotFoundComponent }
	];

theoomoregbee / app.module.ts

Created July 8, 2017 07:56

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA-> Adding routes to our module

	imports: [
	BrowserModule,
	FormsModule,
	HttpModule,
	RouterModule.forRoot(APP_ROUTES)
	],

theoomoregbee / api-handler.service.ts

Created July 8, 2017 08:34

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA--> APIHANDLER to handle http interaction

	import { Injectable } from '@angular/core';
	import { Http, ConnectionBackend, RequestOptions, RequestMethod, RequestOptionsArgs, Headers } from "@angular/http";
	import { Observable } from "rxjs/Observable";
	import { environment } from "environments/environment";

	import 'rxjs/add/operator/catch';
	import 'rxjs/add/observable/throw';

	@Injectable()
	export class ApiHandler extends Http {

theoomoregbee / iuser.ts

Created July 8, 2017 14:25

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> User interface

theoomoregbee / user.service.ts

Created July 8, 2017 14:28

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> User service

	import {Injectable} from '@angular/core';
	import {IUser} from "../interfaces/iuser";

	@Injectable()
	export class UserService {
	private user: IUser;

	constructor() {
	}

theoomoregbee / jwt-helper.ts

Created July 8, 2017 14:34

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> JwtHelper

	import {IUser} from "../interfaces/iuser";

	/**
	* @credits for helper class goes to https://github.com/auth0/angular2-jwt
	*/

	export class JwtHelper {

	public urlBase64Decode(str: string): string {
	let output = str.replace(/-/g, '+').replace(/_/g, '/');

theoomoregbee / auth.service.ts

Created July 8, 2017 19:22

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> User service

	import {Injectable} from '@angular/core';
	import {UserService} from "./user.service";
	import {ApiHandler} from "./api-handler.service";
	import {JwtHelper} from "../helpers/jwt-helper";
	import {Observable} from "rxjs";
	import {RequestMethod} from "@angular/http";

	import 'rxjs/add/operator/do';
	import 'rxjs/add/operator/map';

theoomoregbee / login.component.ts

Created July 8, 2017 19:24

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> Login With reactive form

	import {Component, OnInit} from '@angular/core';
	import {AuthService} from "../providers/auth.service";
	import {FormBuilder, Validators} from "@angular/forms";
	import {Router} from "@angular/router";

	@Component({
	selector: 'app-login',
	template: `<div class="container">
	<div class="card card-container">
	<form #f="ngForm" [formGroup]="loginForm" (ngSubmit)="submitted()">

theoomoregbee / dashboard.module.ts

Created July 8, 2017 19:27

EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> Updated route on module

	import {NgModule} from '@angular/core';
	import {CommonModule} from '@angular/common';
	import {DashboardComponent} from './dashboard/dashboard.component';
	import {HomeComponent} from './home/home.component';
	import {SettingsComponent} from './settings/settings.component';
	import {AdminComponent} from './admin/admin.component';
	import {RouterModule} from "@angular/router";
	import {dashboardRoutes} from "./dashboard.routes";

	@NgModule({

Theophilus Omoregbee theoomoregbee