Skip to content

Instantly share code, notes, and snippets.

View theoomoregbee's full-sized avatar
👀

Theophilus Omoregbee theoomoregbee

👀
241 followers · 132 following
View GitHub Profile
@theoomoregbee
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
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
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
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
theoomoregbee / iuser.ts
Created July 8, 2017 14:25
EVERYTHING YOU NEED TO KNOW ON SECURING YOUR ANGULAR 2+ SPA --> User interface
export interface IUser {
id: string;
name: string;
roles: string[];
email: string;
}
@theoomoregbee
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
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
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
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
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({