Setup login component

src/app/app-routing.module.ts

@@ -1,16 +1,23 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { AuthGuard } from './auth.guard';
 
 const routes: Routes = [
   { path: '', component: LoginComponent },
-  { path: '**', component: PageNotFoundComponent},
+  {
+    canActivate: [AuthGuard],
+    path: 'words',
+    loadChildren: './words/words.module#WordsModule'
+  },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
-

src/app/auth.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard]
+    });
+  });
+
+  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/auth.guard.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> | Promise<boolean> | boolean {
+    if (!this.authService.isLoggedIn) {
+      return false;
+    }
+    return true;
+  }
+}

src/app/auth.service.ts

@@ -1,19 +1,20 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
+import { CurrentUser } from './typings';
 
 @Injectable({
-  providedIn: "root"
+  providedIn: 'root'
 })
 export class AuthService {
   public isLoggedIn: boolean;
   public currentUser: CurrentUser;
 
   constructor() {}
 
-  login(userName: string, password: string) {}
+  login(userName: string, password: string) {
+    this.isLoggedIn = true;
+  }
 
-  logOut() {}
-}
-
-interface CurrentUser {
-  userName: string;
+  logOut() {
+    this.isLoggedIn = false;
+  }
 }

src/app/login/login.component.html

@@ -1,4 +1,83 @@
-<div class="row">
+<div class="grid-y" style="height: 100vh;">
+  <div class="cell small-3 medium-4 large-2"></div>
+  <div class="cell small-6 medium-4 large-8">
+    <div class="grid-x">
+      <div class="cell small-3"></div>
+      <div class="cell small-6">
+        <div class="card">
+          <div class="card-divider">
+            Phoenix Builder
+          </div>
+          <div class="card-section">
+            <form data-abide novalidate>
+              <div class="grid-x grid-margin-x">
+                <div class="cell">
+                  <div data-abide-error class="alert callout" style="display: none;">
+                    <p><i class="fi-alert"></i> There are some errors in your form.</p>
+                  </div>
+                </div>
+              </div>
+              <div class="grid-x grid-margin-x">
+                <div class="cell small-12">
+                  <label>Email Address
+                    <input type="text" placeholder="username@amabibi.com" aria-describedby="exampleHelpText" required pattern="number">
+                    <span class="form-error">
+                      Yo, you had better fill this out, it's required.
+                    </span>
+                  </label>
+                  <p class="help-text" id="exampleHelpText"></p>
+                </div>
+                <div class="cell small-12">
+                  <label>Password
+                    <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
+                    <span class="form-error">
+                      I'm required!
+                    </span>
+                  </label>
+                  <p class="help-text" id="exampleHelpText"></p>
+                </div>
+
+              </div>
+              <div class="grid-x grid-margin-x">
+                <fieldset class="cell medium-2">
+                  <button class="button" type="submit" value="Submit">Login</button>
+                </fieldset>
+                <fieldset class="cell medium-1">
+                  <button class="button" type="reset" value="Reset">Reset</button>
+                </fieldset>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      <div class="cell small-3"></div>
+    </div>
+  </div>
+  <div class="cell small-3 medium-4 large-2">
+    <!-- Footer -->
+    <div class="grid-x">
+      <div class="cell small-3"></div>
+      <div class="cell small-6">
+        <hr />
+        <div class="grid-x">
+          <div class="cell small-6 footer-brand-text">
+            &copy; Copyright Amabibi, 2019
+          </div>
+          <div class="cell small-6">
+            <ul class="inline-list">
+              <li><a href="#">About Us</a></li>
+              <li><a href="#">Disclaimer</a></li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
+      <div class="cell small-3"></div>
+    </div>
+  </div>
+</div>
+
+<!-- 
   <div class="small-12 large-6 large-centered small-centered columns">
     <div class="panel">
       <h4>Phoenix Builder</h4>
@@ -18,22 +97,4 @@ <h4>Phoenix Builder</h4>
                 </form>
     </div>
   </div>
-</div>
-
-<!-- Footer --> 
-<footer class="row" style="color:white; font-size:.9em;">
-  <div class="large-12 columns">
-    <hr />
-    <div class="row">
-      <div class="large-6 columns">
-        <p>&copy; Copyright Amabibi, 2019.</p>
-      </div>
-      <div class="large-6 columns">
-        <ul class="inline-list right">
-          <li><a href="#">About Us</a></li>
-          <li><a href="#">Disclaimer</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</footer>    
+</div> -->

src/app/login/login.component.scss

@@ -1,3 +1,20 @@
-body{
+:host {
 	background-color:#039;
 }
+
+.grid-y {
+	background-color: #039;
+}
+
+.footer-brand-text {
+	color: white;
+}
+
+.inline-list {
+	list-style: none;
+	text-align: right;
+	& > li {
+		display: inline;
+		margin-right: 2rem;
+	}
+}

src/app/login/login.module.ts

@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
   imports: [
     CommonModule,
     RouterModule.forChild([
-      { path: '/login', component: LoginComponent }
+      { path: 'login', component: LoginComponent }
     ]),
   ],
 })