Merge pull request #1 from cardinal-app/feature/e2e-demo/CARD-7-8

Feature/e2e demo/card 7 8
cardinal-app · Jan 13, 2024 · 5d5b01b · 5d5b01b
2 parents e243d10 + e86c54b
commit 5d5b01b
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,4 +64,4 @@
     "tslib": "^2.6.2",
     "typescript": "~5.2.2"
   }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -18,15 +18,45 @@
         <p>Home</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faPencil"></fa-icon>
+        <p>Author</p>
+      </a>
+    </div>
     <div class="nav-item">
       <a routerLink="/fit-track" routerLinkActive="active">
         <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
         <p>Fit Track</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCoins"></fa-icon>
+        <p>Finance</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCameraRetro"></fa-icon>
+        <p>Retro</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faList"></fa-icon>
+        <p>Todo</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faHammer"></fa-icon>
+        <p>Work Log</p>
+      </a>
+    </div>
   </nav>
-  <div class="user">
-    <img id="avatar" src="/assets/avatar.png">
+  <div class="user" (click)="logout()">
+    <img id="avatar" alt="avatar" src="/assets/avatar.png">
   </div>
 }
 <footer><p>Jrsmth 2024</p></footer>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -44,7 +44,7 @@ nav {
 
     a {
       text-decoration: none;
-      color: $white50;
+      color: $text-dark;
 
       &.active {
         color: $mirage;
@@ -75,7 +75,7 @@ nav {
     p {
       font-size: 9px;
       margin-top: .25rem;
-      color: $white50;
+      color: $text-dark;
     }
 
     &:hover {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -4,16 +4,9 @@ import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/route
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HomeComponent } from "./structure/home/home.component";
 import {
-  faCog,
-  faHouse,
-  faPersonRunning,
-  faQuestion,
-  faSearch,
-  faUser,
-  faX,
-  faY,
-  faBell
+  faCog, faHouse, faPersonRunning, faQuestion, faSearch, faBell, faPencil, faCoins, faList, faHammer, faCameraRetro
 } from "@fortawesome/free-solid-svg-icons";
+import {AuthenticationService} from "./core/service/auth/authentication-service";
 
 @Component({
   selector: 'app-root',
@@ -28,13 +21,19 @@ export class AppComponent {
   protected readonly faQuestion = faQuestion;
   protected readonly faBell = faBell;
   protected readonly faSearch = faSearch;
-
-  protected readonly faUser = faUser;
   protected readonly faPersonRunning = faPersonRunning;
   protected readonly faHouse = faHouse;
-  protected readonly faX = faX;
-  protected readonly faY = faY;
+  protected readonly faPencil = faPencil;
+  protected readonly faCoins = faCoins;
+  protected readonly faList = faList;
+  protected readonly faHammer = faHammer;
+  protected readonly faCameraRetro = faCameraRetro;
+
+  constructor(public router: Router, private authService: AuthenticationService) {}
 
-  constructor(public router: Router) {}
+  logout(): void {
+    this.authService.removeToken();
+    this.router.navigate(['/auth']);
+  }
 
 }
diff --git a/src/app/core/guard/auth-guard.ts b/src/app/core/guard/auth-guard.ts
@@ -8,7 +8,7 @@ export class AuthGuard {
   constructor (private authService: AuthenticationService, private router: Router) {}
 
   canActivate(): boolean {
-    const userAuthenticated = this.authService.hasValidAuthToken();
+    const userAuthenticated = this.authService.hasValidToken();
 
     if (!userAuthenticated) {
       this.router.navigate(

diff --git a/src/app/core/service/auth/authentication-service.ts b/src/app/core/service/auth/authentication-service.ts
@@ -8,8 +8,12 @@ export class AuthenticationService {
 
   constructor(private localStorage: LocalStorageService) {}
 
-  hasValidAuthToken() {
+  hasValidToken() {
     return !!this.localStorage.get('authToken');
   }
 
+  removeToken(): void {
+    this.localStorage.remove('authToken');
+  }
+
 }
diff --git a/src/app/core/service/storage/local-storage-service.ts b/src/app/core/service/storage/local-storage-service.ts
@@ -17,4 +17,8 @@ export class LocalStorageService {
     }
   }
 
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
 }
diff --git a/src/app/structure/home/home.component.html b/src/app/structure/home/home.component.html
@@ -1,17 +1,56 @@
 <wallet>
   <section>
     <div id="hero">
-      <h1>Cardinal</h1>
-      <h2>/ˈkɑːdɪnəl/ Of the greatest importance; <br/> fundamental.</h2>
+      <div id="title">
+        <h1>Cardinal</h1>
+        <h2>/ˈkɑːdɪnəl/ Of the greatest importance; <br/> fundamental.</h2>
+      </div>
       <div id="content">
         <div class="row">
-          <div class="item">
+          <div class="item" routerLink="/pending">
+            <fa-icon class="icon" [icon]="faPencil"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Author</p>
+              <p class="item-body">Support self-authorship by way of note keeping</p>
+            </div>
+          </div>
+          <div class="item" routerLink="/pending">
+            <fa-icon class="icon" [icon]="faCoins"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Finance</p>
+              <p class="item-body">Plan your budget and project future savings</p>
+            </div>
+          </div>
+          <div class="item" routerLink="/pending">
+            <fa-icon class="icon" [icon]="faList"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Todo</p>
+              <p class="item-body">Digitise your task list and track completed items</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="item" routerLink="/fit-track">
             <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
             <div class="item-description">
               <p class="item-header">Fit Track</p>
               <p class="item-body">Track completed training and progress towards goals</p>
             </div>
           </div>
+          <div class="item" routerLink="/pending">
+            <fa-icon class="icon" [icon]="faCameraRetro"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Retro</p>
+              <p class="item-body">Set goals and assess the past week for ways to improve</p>
+            </div>
+          </div>
+          <div class="item" routerLink="/pending">
+            <fa-icon class="icon" [icon]="faHammer"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Work Log</p>
+              <p class="item-body">Track work done to assess productivity over time</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/app/structure/home/home.component.scss b/src/app/structure/home/home.component.scss
@@ -7,11 +7,16 @@ section {
   height: 100%;
 
   h1 {
-    margin-top: -8rem;
+    margin-top: -4rem;
+
+    @media (max-width: $small-screen) {
+      margin-top: -2rem;
+    }
+
     color: $white;
     text-transform: uppercase;
     font-size: 10rem;
-    letter-spacing: 1.5rem;
+    letter-spacing: 2.5rem;
     font-weight: $semi-bold;
     background: -webkit-linear-gradient(90deg, $white00 0%, $white 30%, $white 70%, $white00 100%);
     -webkit-background-clip: text;
@@ -38,33 +43,44 @@ section {
   }
 
   #hero {
-    width: min-content;
-
     #content {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      width: 100%;
-      margin-top: 4rem;
+      margin-top: 6rem;
+
+      @media (max-width: $small-screen) {
+        margin-top: 4rem;
+      }
+
+      .row {
+        margin-top: 4rem;
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: $small-screen) {
+          margin-top: 2rem;
+        }
+      }
 
       .item {
-        color: $white;
+        color: $white75;
         display: flex;
-        gap: 1rem;
         flex: 1;
-        width: 320px;
+        max-width: 22rem;
+        cursor: pointer;
+        text-align: left;
+        gap: 1.5rem;
 
         .icon {
-          padding: 2rem;
-          border-radius: .25rem;
-          border: 1px solid $white50;
-          background: $white25;
+          padding: 2rem 2.25rem;
+          border-radius: .75rem;
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          background: linear-gradient(45deg, #ffffff00 0%, #ffffff0c 100%);
+          color: $white75;
         }
 
         .item-description {
           .item-header {
             letter-spacing: 2px;
-            margin-bottom: 1rem;
+            margin: .75rem 0 .5rem 0;
           }
 
           .item-body {

diff --git a/src/app/structure/home/home.component.ts b/src/app/structure/home/home.component.ts
@@ -1,20 +1,27 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {LandingComponent} from "../../core/component/landing/landing.component";
+import { LandingComponent} from "../../core/component/landing/landing.component";
 import { WalletComponent } from "../../core/component/wallet/wallet.component";
-import {faPersonRunning} from "@fortawesome/free-solid-svg-icons";
-import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import { faCameraRetro, faCoins, faHammer, faList, faPencil, faPersonRunning } from "@fortawesome/free-solid-svg-icons";
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { RouterLink } from "@angular/router";
 
 @Component({
   selector: 'home',
   standalone: true,
-  imports: [CommonModule, LandingComponent, WalletComponent, FaIconComponent],
+  imports: [CommonModule, LandingComponent, WalletComponent, FaIconComponent, RouterLink],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
 export class HomeComponent {
 
   protected content: [string, string][];
+  protected readonly faPersonRunning = faPersonRunning;
+  protected readonly faPencil = faPencil;
+  protected readonly faCameraRetro = faCameraRetro;
+  protected readonly faCoins = faCoins;
+  protected readonly faList = faList;
+  protected readonly faHammer = faHammer;
 
   constructor() {
     this.content = [
@@ -24,5 +31,4 @@ export class HomeComponent {
     ];
   }
 
-  protected readonly faPersonRunning = faPersonRunning;
 }
diff --git a/src/scss/base.scss b/src/scss/base.scss
@@ -4,7 +4,7 @@
 
 $landing-image: url('../assets/rolling-hills.png');
 $drop-shadow: 0 .5rem 2rem -.5rem #000000BF;
-$small-screen: 1500px;
+$small-screen: 1600px;
 $ease-in: .15s ease-in-out;
 $default-text: 12px;
 

diff --git a/src/scss/colour.scss b/src/scss/colour.scss
@@ -34,13 +34,15 @@ $white: #fff;
 $white00: #ffffff00;
 $white25: #ffffff40;
 $white50: #ffffff80;
+$white75: #ffffffbf;
 $silver-chalice: #a9a9a9;
 $alabaster: #f8f8f8;
 $pearl: #b0b0c2;
 $pearl25: #b0b0c240;
 
 // Text
-$text-dark: $walnut;
+$text-darker: $walnut;
+$text-dark: #858585;
 $text-disabled: #888;
 $text-lightest: whitesmoke;
 $text-lighter: #eee;