Nav var modification

e2e/src/login.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { LoginPage } from './login.po';
 
-describe('workspace-project App', () => {
+describe('Login page test', () => {
   let page: LoginPage;
 
   beforeEach(() => {

src/app/app.component.html

@@ -1 +1,6 @@
-<router-outlet></router-outlet>
+<div class="chatRoom">
+    <div class="chatHeaderWrapper">
+      <app-navbar></app-navbar>
+    </div>
+    <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -23,8 +23,7 @@ import { MessageComponent } from './message/message.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { UserItemComponent } from './user-item/user-item.component';
 import { UserListComponent } from './user-list/user-list.component';
-
-
+import { SettingsComponent } from './settings/settings.component';
 
 const routes: Routes = [
   {
@@ -49,6 +48,16 @@ const routes: Routes = [
     component: CardComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: 'chat',
+    component: ChatroomComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: 'register',
     component: RegisterComponent
@@ -69,7 +78,8 @@ const routes: Routes = [
     MessageComponent,
     NavbarComponent,
     UserItemComponent,
-    UserListComponent
+    UserListComponent,
+    SettingsComponent
   ],
   imports: [
     BrowserModule,

src/app/card/card.component.html

@@ -1,30 +1,4 @@
 <div class="profile-container">
-  <!-- EXAMPLE TOP NAV -->
-  <div class="topnav">
-    <div class="logo">Solid</div>
-    <div class="menu-item">
-      <div>
-        <i class="far fa-compass"></i>
-      </div>
-      Menu Item 1
-    </div>
-    <div class="menu-item">
-      <div>
-        <i class="far fa-comment"></i>
-      </div>
-      Menu Item 2
-    </div>
-    <div class="menu-item">
-      <div>
-        <i class="fas fa-sliders-h"></i>
-      </div>
-      Menu Item 3
-    </div>
-
-    <div class="profile-menu" (click)="logout()">
-      <img [src]="profileImage" />
-    </div>
-  </div>
   <h1>Profile</h1>
 
   <!-- LOADING IMAGE -->

src/app/card/card.component.ts

@@ -46,7 +46,6 @@ export class CardComponent implements OnInit  {
     } catch (error) {
       console.log(`Error: ${error}`);
     }
-
   }
 
   // Submits the form, and saves the profile data using the auth/rdf service

src/app/login/login.component.ts

@@ -25,7 +25,7 @@ export class LoginComponent implements OnInit {
   ngOnInit() {
     // If we're authenticated, go to profile
     if (localStorage.getItem('solid-auth-client')) {
-      this.router.navigateByUrl('/card');
+      this.router.navigateByUrl('/chat');
     }
 
     this.identityProviders = this.auth.getIdentityProviders();

src/app/navbar/navbar.component.css

@@ -0,0 +1,76 @@
+
+
+.topnav {
+    position:absolute;
+    top:0;
+    left:0;
+    width: 100%;
+    background-color: #7C4DFF;
+    height: 50px;
+    color: #fff;
+  }
+
+  .topnav a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .topnav a:hover {
+    background-color: rgba(0,0,0,0.25);
+  }
+
+  .topnav a:active {
+    background-color: rgba(0,0,0,0.5);
+    box-shadow: inset 0px 0px 15px 6px rgba(0,0,0,0.25);
+  }
+
+  .topnav .logo {
+    display: inline-block;
+    font-family: 'Roboto Slab', serif;
+    font-size: 24px;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 32px;
+    padding-right: 80px;
+    position: relative;
+    top: -8px;
+    left: 28px;
+  }
+
+  .topnav .menu-item {
+    display: inline-block;
+    font-size: 10px;
+    line-height: 13px;
+    width: 100px;
+    height: 100%;
+    text-align: center;
+  }
+
+  .topnav .menu-item i {
+    font-size: 24px;
+    margin-top:8px;
+    margin-bottom: 2px;
+  }
+
+  .topnav .profile-menu {
+    float: right;
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background-color: rgba(0,0,0,0.25);
+  }
+
+  .topnav .profile-menu img {
+    display: block;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    margin: 0 auto;
+    margin-top:10px;
+    cursor: pointer;
+  }
+
+  .loading-image {
+    text-align: center;
+    margin-top: 50px;
+  }

src/app/navbar/navbar.component.html

@@ -1,3 +1,26 @@
-<p>
-  navbar works!
-</p>
+<div class="topnav">
+    <div class="topnav">
+      <div class="logo">Solid DeChat</div>
+      <a class="menu-item" [routerLink]="['/chat']">
+        <div>
+          <i class="far fa-comment"></i>
+        </div>
+        Chat
+      </a>
+      <a class="menu-item" [routerLink]="['/settings']">
+        <div>
+          <i class="fas fa-sliders-h"></i>
+        </div>
+        Settigns
+      </a>
+      <a class="menu-item" [routerLink]="['/card']">
+        <div>
+          <i class="fas fa-user"></i>
+        </div>
+        Solid Profile
+      </a>
+      <div class="profile-menu" (click)="logout()">
+        <img [src]="profileImage" />
+      </div>
+    </div>
+</div>

src/app/navbar/navbar.component.spec.ts

@@ -19,7 +19,7 @@ describe('NavbarComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/navbar/navbar.component.ts

@@ -1,15 +1,25 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/solid.auth.service';
+import { SolidSession } from '../models/solid-session.model';
+import { UserService } from '../services/user.service';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css']
 })
 export class NavbarComponent implements OnInit {
+  user: Observable<SolidSession>;
+  profileImage: string;
 
-  constructor() { }
+  constructor(private authService: AuthService, private userService : UserService) { }
 
   ngOnInit() {
+    this.profileImage = this.userService.profilePicture();
   }
 
+  logout() {
+    this.authService.solidSignOut();
+  }
 }

src/app/services/user.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { SolidProfile } from '../models/solid-profile.model';
+import { RdfService } from './rdf.service';
+import { AuthService } from './solid.auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  profile: SolidProfile;
+
+  constructor(private rdf: RdfService, private auth: AuthService) { 
+
+  }
+
+  ngOnInit() {
+    this.loadProfile();
+  }
+
+  // Loads the profile from the rdf service and handles the response
+  async loadProfile() {
+    try {
+      const profile = await this.rdf.getProfile();
+      if (profile) {
+        this.profile = profile;
+        this.auth.saveOldUserData(profile);
+      }
+    } catch (error) {
+      console.log(`Error: ${error}`);
+    }
+  }
+
+  profilePicture(): string {
+    return this.profile ? this.profile.image : '/assets/images/profile.png';
+  }
+
+}

src/app/settings/settings.component.html

@@ -0,0 +1,3 @@
+<p>
+  settings works!
+</p>

src/app/settings/settings.component.spec.ts

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

src/app/settings/settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.css']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}