Flow 1: Simple flow: No email/phone verification

Author: sarthak-clappia

angular.json

@@ -23,9 +23,17 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js",
+              "node_modules/aws-sdk/dist/aws-sdk.min.js"
+
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -20,9 +20,13 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^2.2.2",
+    "amazon-cognito-identity-js": "^2.0.19",
+    "aws-sdk": "^2.282.1",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
     "rxjs": "^6.0.0",
     "zone.js": "~0.8.26"
   },

package.json

@@ -1,10 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SignInComponent } from './signin/signin.component';
+
+import { IndexComponent} from './index/index.component';
+
+import { SignInComponent as F1SignInComponent} from './f1/signin/signin.component';
+import { SignUpComponent as F1SignUpComponent } from './f1/signup/signup.component';
+import { IndexComponent as F1IndexComponent } from './f1/index/index.component';
+import { DashboardComponent as F1DashboardComponent} from './f1/dashboard/dashboard.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/', pathMatch: 'full' },
-  { path: 'signin', component: SignInComponent },
+  { path: '', component: IndexComponent },
+
+  { path: 'f1', component: F1IndexComponent },
+  { path: 'f1/signin', component: F1SignInComponent },
+  { path: 'f1/signup', component: F1SignUpComponent },
+  { path: 'f1/dashboard', component: F1DashboardComponent },
 ];
 
 @NgModule({

src/app/app-routing.module.ts

@@ -1,7 +1,3 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<nav>
-  <a routerLink="/signin">Sign In</a>
-</nav>
 <router-outlet></router-outlet>
 
 

src/app/app.component.html

@@ -1,22 +1,38 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { SignInComponent } from './signin/signin.component';
-import { AppRoutingModule } from './/app-routing.module';
+import { IndexComponent } from './index/index.component';
+import { AppRoutingModule } from './app-routing.module';
+
+import { IndexComponent as F1IndexComponent} from './f1/index/index.component';
+import { SignInComponent as F1SignInComponent } from './f1/signin/signin.component';
+import { SignUpComponent as F1SignUpComponent } from './f1/signup/signup.component';
+import { HeaderComponent as F1HeaderComponent} from './f1/header/header.component';
+import { DashboardComponent as F1DashboardComponent} from './f1/dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    SignInComponent
+    F1SignInComponent,
+    F1SignUpComponent,
+    IndexComponent,
+    F1IndexComponent,
+    F1HeaderComponent,
+    F1DashboardComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     AppRoutingModule,
+    NgbModule.forRoot(),
+  ],
+  providers: [
+    { provide: 'location', useValue: location },
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.module.ts

@@ -0,0 +1,20 @@
+<app-header></app-header>
+<div class="col-md-6 offset-md-3">
+<div class="card">
+  <div class="card-header">Profile</div>
+  <div class="card-body">
+  <div class="row">
+    <div class="col-md-4 pull-right">Name:</div>
+    <div class="col-md-5">{{profile.name}}</div>
+  </div>
+  <div class="row">
+    <div class="col-md-4 pull-right">Email:</div>
+    <div class="col-md-5">{{profile.email}}</div>
+  </div>
+  <div class="row">
+      <div class="col-md-4 pull-right">Phone:</div>
+      <div class="col-md-5">{{profile.phone}}</div>
+    </div>
+  </div>
+</div>
+</div>

src/app/f1/dashboard/dashboard.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/f1/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { AuthenticationService } from '../../services/authentication.service';
+import { Router } from '../../../../node_modules/@angular/router';
+import { Profile } from '../../model/profile';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html'
+})
+export class DashboardComponent implements OnInit {
+  profile: Profile = {
+    name: '',
+    email: '',
+    phone: ''
+  }
+  constructor(
+    private router: Router,
+    private authenticationService: AuthenticationService
+  ) { }
+
+  ngOnInit() {
+    this.authenticationService.isAuthenticated().subscribe(result => {
+      if (!result) {
+        this.router.navigate(['f1/signin']);
+      } else {
+        this.authenticationService.getUserAttributes().subscribe(userAttributes => {
+          this.profile.email = userAttributes.email;
+          this.profile.name = userAttributes.name;
+          this.profile.phone = userAttributes.phone_number;
+        })
+      }
+    });
+  }
+
+}