Code after end of Part 6

Author: stanleyeosakul

src/app/app.component.html

@@ -2,4 +2,3 @@
 <main class="container">
   <router-outlet></router-outlet>
 </main>
-

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
@@ -10,6 +11,8 @@ import { NavbarComponent } from './components/navbar/navbar.component';
 import { ProfileComponent } from './components/profile/profile.component';
 import { RegisterComponent } from './components/register/register.component';
 
+import { ValidateService } from './services/validate.service';
+
 const appRoutes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'register', component: RegisterComponent },
@@ -30,9 +33,10 @@ const appRoutes: Routes = [
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    RouterModule.forRoot(appRoutes)
+    FormsModule,
+    RouterModule.forRoot(appRoutes),
   ],
-  providers: [],
+  providers: [ValidateService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/home/home.component.html

@@ -1,3 +1,24 @@
-<p>
-  home works!
-</p>
+<div class="jumbotron text-center">
+  <h1 class="display-3">MEAN Authentication App</h1>
+  <p class="lead">Welcome to our custom MEAN authentication application built from scratch</p>
+  <hr class="my-4">
+  <div>
+    <a href="" class="btn btn-primary" routerLink="/register">Register</a>
+    <a href="" class="btn btn-primary" routerLink="/login">Login</a>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-4">
+    <h3>Express Backend</h3>
+    <p>A rock solid Node.js/Express server using Mongoose to organize models and query the database.</p>
+  </div>
+  <div class="col-md-4">
+    <h3>Angular CLI</h3>
+    <p>Angular CLI to generate components, services, and more.  Local dev server and easy and easy compilation</p>
+  </div>
+  <div class="col-md-4">
+    <h3>JWT Tokens</h3>
+    <p>Full featured authentication using JSON web tokens. Login and store user data.</p>
+  </div>
+</div>

src/app/components/navbar/navbar.component.css

@@ -0,0 +1,3 @@
+.active {
+    background:#272825;
+}

src/app/components/navbar/navbar.component.html

@@ -3,11 +3,11 @@
     <a class="navbar-brand" routerLink="/">MEAN Auth App</a>
     <div class="navbar-collapse">
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item"><a class="btn" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"routerLink="/">Home</a></li>
+        <li><a class="btn" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"routerLink="/">Home</a></li>
       </ul>
       <div class="form-inline">
-        <li class="nav-item"><a class="btn" routerLinkActive="active" routerLink="/login">Login</a></li>
-        <li class="nav-item"><a class="btn" routerLinkActive="active" routerLink="/register">Register</a></li>
+        <li><a class="btn" routerLinkActive="active" routerLink="/login">Login</a></li>
+        <li><a class="btn" routerLinkActive="active" routerLink="/register">Register</a></li>
       </div>
     </div>
   </div>

src/app/components/register/register.component.css

@@ -0,0 +1,3 @@
+.red {
+    color: red;
+}

src/app/components/register/register.component.html

@@ -1,3 +1,17 @@
-<p>
-  register works!
-</p>
+<h2 class="page-header">Register</h2>
+<div class="alert alert-danger" *ngIf="noEmail" role="alert">{{ errMsg }}</div>
+<form #regForm="ngForm" (ngSubmit)="onRegisterSubmit(regForm)">
+  <div class="form-group">
+    <label for="name">Name <sup class="red">*</sup></label>
+    <input required name="name" id="name" #name="ngModel" ngModel type="text" class="form-control" ></div>
+  <div class="form-group">
+    <label for="username">Username <sup class="red">*</sup></label>
+    <input required name="username" id="username" #username="ngModel" ngModel type="text" class="form-control"></div>
+  <div class="form-group">
+    <label for="email">Email <sup class="red">*</sup></label>
+    <input required name="email" id="email" #email="ngModel" ngModel type="email" class="form-control"></div>
+  <div class="form-group">
+    <label for="password">Password <sup class="red">*</sup></label>
+    <input required name="password" id="password" #password="ngModel" ngModel type="password" class="form-control"></div>
+  <input type="submit" class="btn btn-primary" value="Submit" [disabled]="!regForm.valid">
+</form>

src/app/components/register/register.component.ts

@@ -1,3 +1,4 @@
+import { ValidateService } from '../../services/validate.service';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -7,9 +8,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RegisterComponent implements OnInit {
 
-  constructor() { }
+  noEmail = false;
+  errMsg: string;
+
+  constructor(private validateService: ValidateService) { }
 
   ngOnInit() {
   }
 
+  onRegisterSubmit(form) {
+
+    // Validate Email
+    if (!this.validateService.validateEmail(form.value.email)) {
+      this.noEmail = true;
+      this.errMsg = 'Please use a valid email';
+      return false;
+    }
+
+  }
+
 }

src/app/services/validate.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ValidateService } from './validate.service';
+
+describe('ValidateService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ValidateService]
+    });
+  });
+
+  it('should be created', inject([ValidateService], (service: ValidateService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/validate.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ValidateService {
+
+  constructor() { }
+
+  validateEmail(email) {
+    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(email.toLowerCase());
+  }
+
+}

src/styles.css

@@ -1,6 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import "assets/css/bootstrap.min.css";
-
-.active {
-    background:#272825;
-}
+@import "assets/css/bootstrap.min.css";

tslint.json

@@ -10,7 +10,7 @@
       true,
       "check-space"
     ],
-    "curly": true,
+    "curly": false,
     "deprecation": {
       "severity": "warn"
     },
@@ -30,7 +30,7 @@
     "label-position": true,
     "max-line-length": [
       true,
-      140
+      500
     ],
     "member-access": false,
     "member-ordering": [