Merge pull request #2 from flockean/develop

feat: Style and ProjectManagement

angular.json

@@ -92,7 +92,8 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         }
       }

karma.conf.js

@@ -0,0 +1,39 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/lucas-web'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['ChromeHeadless'],
+    restartOnFileChange: true
+  });
+};

src/app/app.component.html

@@ -1,17 +1,14 @@
-<div class="p-4 m-4 bg-sky-500 rounded-md">
-  <div class="flex items-center justify-center font-bold text-lg"> {{title}} </div>
+<div class="pt-8 bg-sky-300 shadow-lg">
+  <div class="flex items-center justify-center font-bold text-4xl pb-7"> {{title}} </div>
+  <div class="p-4 bg-sky-200 w-full">
+  <div class="inline-flex gap-4">
+      <div *ngIf=configService.isLoggedIn() class="font-bold"> {{configService.getStoredUserData().username}} </div>
+      <div *ngIf=configService.isLoggedIn() class="font-bold text-red-500"> {{configService.getStoredUserData().permission}} </div>
+  </div>
+  </div>
 </div>
+<div class="basebob bg-sky-100">
+  <router-outlet/>
+<div>
 
-<router-outlet/>
-
-
-<div class="flex items-center justify-center p-16 m-16">
-  <nav class="navbar w-5/6 rounded-xl flex p-4 m-6 bg-sky-500 box-border">
-    <div id="navbar-items">
-      <button *ngIf="configService.isLoggedIn()" class="button" routerLink="MainPortal">Portfolio</button>
-      <button class="button" routerLink="Cookies">Cookies</button>
-      <button class="button" routerLink="LogIn">Login</button>
-      <button *ngIf="configService.isLoggedIn()" class="button" (click)="configService.logout()">LogOut</button>
-   </div>
-  </nav>
-</div>
+<app-navibar/>

src/app/app.component.scss

@@ -1,18 +1,3 @@
-.center{
-  display: grid;
-  place-items: center;
+.jersey{
+  font-family: jersey;
 }
-
-.navbar{
-  display: grid;
-  place-items: center;
-  position: absolute;
-  bottom: 0;
-}
-
-#navbar-items{
-  display: flex;
-  place-self: center;
-  gap: 20px;
-}
-

src/app/app.component.spec.ts

@@ -20,13 +20,13 @@ describe('AppComponent', () => {
   it(`should have the 'LucasWeb' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('LucasWeb');
+    expect(app.title).toEqual('LB Development');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('This is my wonderful ugly website, ITS IN DEVELOPMENT ;0');
+    expect(compiled.querySelector('div')?.textContent).toContain('LB Development');
   });
 });

src/app/app.component.ts

@@ -3,11 +3,12 @@ import {RouterLink, RouterOutlet} from '@angular/router';
 import {MainPortalComponent} from "./main-portal/main-portal.component";
 import {NgIf} from "@angular/common";
 import {ConfigService} from "./shared/config.service";
+import { NavibarComponent } from './components/navibar/navibar.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, NgIf],
+  imports: [RouterOutlet, RouterLink, NgIf, NavibarComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/app.guard.ts

@@ -1,15 +1,15 @@
-import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+import {Injectable, inject} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot} from '@angular/router';
 import {ConfigService} from "./shared/config.service";
 
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuard implements CanActivate {
+export class AuthGuard {
 
   constructor(private configService: ConfigService, private router: Router) {}
 
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+  LogIn(): boolean {
     if (this.configService.isLoggedIn()) {
       return true;
     } else {
@@ -18,3 +18,9 @@ export class AuthGuard implements CanActivate {
     }
   }
 }
+
+export const logInRequired: CanActivateFn = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+) => {
+  return inject(AuthGuard).LogIn()};

src/app/app.routes.ts

@@ -1,21 +1,30 @@
 import { Routes } from '@angular/router';
 import {MainPortalComponent} from "./main-portal/main-portal.component";
 import {LogInPageComponent} from "./log-in-page/log-in-page.component";
-import {AuthGuard} from "./app.guard";
+import {logInRequired} from "./app.guard";
 import {CookieComponent} from "./cookie/cookie.component";
+import { ManagementViewComponent } from './management-view/management-view.component';
 
 export const routes: Routes = [
   {
-    path: "MainPortal",
-    canActivate: [AuthGuard],
+    path: "mainportal",
     component: MainPortalComponent
   },
   {
-    path: "LogIn",
+    path: "login",
     component: LogInPageComponent
   },
   {
-    path: "Cookies",
+    path: "cookies",
     component: CookieComponent
+  },
+  {
+    path: "mgmt",
+    component: ManagementViewComponent,
+    canActivate: [logInRequired]
+  },
+  {
+    path: "**",
+    component: MainPortalComponent
   }
 ];

src/app/components/navibar/navibar.component.html

@@ -0,0 +1,12 @@
+<div class="flex items-center justify-center p-16">
+  <nav class="grid place-items-center absolute bottom-0 w-full p-4 bg-sky-500 box-border">
+    <div class="flex place-self-center gap-5">
+      <button routerLink="mainportal">Portfolio</button>
+      <button *ngIf="configService.isLoggedIn()" routerLink="mgmt"> Project Managment </button>
+      <button routerLink="cookies">Cookies</button>
+      <button routerLink="login">Login</button>
+       <button *ngIf="configService.isLoggedIn()" (click)="configService.logout()">LogOut</button>
+       <div class="animate-pulse"> 👻 </div>
+   </div>
+  </nav>
+</div>

src/app/components/navibar/navibar.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavibarComponent } from './navibar.component';
+import { provideRouter } from '@angular/router';
+import { routes } from '../../app.routes';
+
+describe('NavibarComponent', () => {
+  let component: NavibarComponent;
+  let fixture: ComponentFixture<NavibarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [provideRouter(routes)],
+      imports: [NavibarComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavibarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/navibar/navibar.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ConfigService } from '../../shared/config.service';
+import { NgIf } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-navibar',
+  standalone: true,
+  imports: [NgIf, RouterLink],
+  templateUrl: './navibar.component.html',
+  styleUrl: './navibar.component.scss'
+})
+export class NavibarComponent {
+
+constructor(protected configService: ConfigService){}
+
+}

src/app/cookie/cookie.component.html

@@ -7,6 +7,6 @@
     <div class="border-2 border-black my-2 p-2 rounded-full bg-sky-300" *ngFor="let key of Object.keys(this.cookieService.getAll())">
       <span> {{key}}: {{this.cookieService.get(key)}}</span>
     </div>
-    <button class="button" (click)="this.cookieService.deleteAll()">ClearAllCookies</button>
+    <button (click)="this.cookieService.deleteAll()">ClearAllCookies</button>
   </div>
 </div>

src/app/log-in-page/log-in-page.component.html

@@ -8,7 +8,7 @@
       <div [formGroup]="userForm" class="grid gap-4">
       <input type="text" placeholder="Username" formControlName="username"/>
       <input type="password" placeholder="Password" formControlName="password"/>
-      <button class="button" (click)="onSubmit()" > LogIn </button>
+      <button (click)="onSubmit()" > LogIn </button>
       </div>
     </form>
     </div>

src/app/main-portal/main-portal.component.html

@@ -1,5 +1,4 @@
 <!--TODO: Ideas for MainPortal-->
-<div class="basebob">
 <!--  TODO: Use .ico instead of emoji? -->
   <h2 class="grid text-center"> I am a Developer 💻 </h2>
   <div class="py-4">
@@ -13,4 +12,3 @@ <h2 class="grid text-center"> I am a Developer 💻 </h2>
     <app-project-card/>
     <app-project-card/>
   </div>
-</div>

src/app/management-view/management-view.component.html

@@ -0,0 +1,8 @@
+<div class="basebob">
+  Here will be the Managment of my Projects... someday
+</div>
+<div class="p-2 m2 border-black bg-sky-400">
+  <div>
+
+  </div>
+</div>

src/app/management-view/management-view.component.spec.ts

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

src/app/management-view/management-view.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-management-view',
+  standalone: true,
+  imports: [],
+  templateUrl: './management-view.component.html',
+  styleUrl: './management-view.component.scss'
+})
+export class ManagementViewComponent {
+
+}

src/app/shared/config.service.ts

@@ -2,7 +2,6 @@ import {Injectable} from '@angular/core';
 import {Router} from "@angular/router";
 import {CookieService} from "ngx-cookie-service";
 import {LocalStorageService} from "./local-storage.service";
-import { timestamp } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -14,9 +13,10 @@ export class ConfigService {
   }
   // TODO: Please dont save Account in localStorage AND Cookies, wat de hell
   login(username: string, password: string){
-    const userData = {
+    const userData : Profile = {
       username: username,
-      password: password
+      password: password,
+      permission: Permission.READ
     };
     this.storageService.setItem('user', userData)
     this.router.navigate(['/MainPortal'])
@@ -26,8 +26,7 @@ export class ConfigService {
   }
 
   getStoredUserData() {
-      return this.storageService.getItem('user');
-
+    return this.storageService.getItem('user')
   }
 
   logout() {
@@ -36,7 +35,21 @@ export class ConfigService {
   }
 
   isLoggedIn(): boolean {
-    return !!this.getStoredUserData();
+    return !!this.getStoredUserData()
   }
 
 }
+
+
+export interface Profile{
+  username: string;
+  password: string;
+  permission: Permission;
+}
+
+enum Permission{
+  READ = 'READ',
+  WRITE = 'WRITE',
+  OPERATE = 'OPERATE',
+  ADMIN = 'ADMIN'
+}