Extracted frontend from webservice to new directory

Updated directory structure
Updated .gitignore

frontend/src/app/Views/dashboard/dashboard.component.html

@@ -0,0 +1,69 @@
+<mat-grid-list cols="2" rowHeight="45%">
+  <!-- Stocks -->
+  <mat-grid-tile colspan="1" rowspan="2">
+    <div class="stockOverview">
+      <div class="heading">
+        <div class="vertical-center">Aktienübersicht</div>
+        <span class="spacer"></span>
+        <button
+          mat-icon-button
+          class="add-icon"
+          aria-label="Example icon-button with heart icon"
+        >
+          <mat-icon>add</mat-icon>
+        </button>
+      </div>
+      <div class="stockTable">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+          <!--- Note that these columns can be defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
+
+          <!-- Position Column -->
+          <ng-container matColumnDef="position">
+            <th mat-header-cell *matHeaderCellDef>Symbol</th>
+            <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>Name</th>
+            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+          </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container matColumnDef="weight">
+            <th mat-header-cell *matHeaderCellDef>Volume</th>
+            <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="symbol">
+            <th mat-header-cell *matHeaderCellDef>Worth</th>
+            <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+      </div>
+    </div>
+  </mat-grid-tile>
+  <!-- Depot Overview -->
+  <mat-grid-tile colspan="1" rowspan="1" class="right-side">
+    <div class="depotOverview">
+      <div class="heading fix-right-side">
+        <div class="vertical-center">Depotübersicht</div>
+      </div>
+      <mat-card class="placeholder"></mat-card>
+    </div>
+  </mat-grid-tile>
+  <!-- Transaktions -->
+  <mat-grid-tile colspan="1" rowspan="1" class="right-side">
+    <div class="depotOverview">
+      <div class="heading fix-right-side">
+        <div class="vertical-center">Transaktionen</div>
+      </div>
+      <mat-card class="placeholder"></mat-card>
+    </div>
+  </mat-grid-tile>
+</mat-grid-list>

frontend/src/app/Views/dashboard/dashboard.component.scss

@@ -0,0 +1,63 @@
+// left gird
+.stockOverview {
+  height: 100%;
+  width: 100%;
+  margin-top: 10%;
+  margin-left: 10%;
+}
+
+//right grids
+.depotOverview {
+  height: 100%;
+  width: 100%;
+  margin-top: 10%;
+  margin-left: 5%;
+  margin-right: 10%;
+}
+
+.stockTable {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.heading {
+  font-size: xx-large;
+  height: 10%;
+  width: 100%;
+  position: relative;
+  display: flex;
+}
+
+.fix-right-side {
+  height: 20%;
+}
+
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.add-icon {
+  transform: scale(2);
+  padding-top: 1%;
+}
+
+.right-side {
+  margin-left: 2.5%;
+}
+
+table {
+  width: 100%;
+}
+
+.placeholder {
+  height: 100%;
+}

frontend/src/app/Views/dashboard/dashboard.component.spec.ts

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

frontend/src/app/Views/dashboard/dashboard.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+  { position: 11, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 12, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 13, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 14, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 15, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 16, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 17, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 18, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 19, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 20, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+})
+export class DashboardComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}

frontend/src/app/Views/header/header.component.html

@@ -0,0 +1,18 @@
+<mat-toolbar>
+  <button
+    mat-icon-button
+    class="example-icon"
+    aria-label="Example icon-button with menu icon"
+  >
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>Aktienbot</span>
+  <span class="example-spacer"></span>
+  <button
+    mat-icon-button
+    class="example-icon favorite-icon"
+    aria-label="Example icon-button with heart icon"
+  >
+    <mat-icon>settings</mat-icon>
+  </button>
+</mat-toolbar>

frontend/src/app/Views/header/header.component.scss

@@ -0,0 +1,3 @@
+.example-spacer {
+  flex: 1 1 auto;
+}

frontend/src/app/Views/header/header.component.spec.ts

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

frontend/src/app/Views/header/header.component.ts

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

frontend/src/app/Views/login/login.component.html

@@ -0,0 +1,75 @@
+<div class="col-md-4 login-container">
+  <div class="card card-container no-border">
+    <img
+      id="profile-img"
+      src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
+      class="profile-img-card"
+    />
+    <form
+      *ngIf="!isLoggedIn"
+      name="form"
+      (ngSubmit)="f.form.valid && onSubmit()"
+      #f="ngForm"
+      novalidate
+    >
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input
+          type="text"
+          class="form-control"
+          name="username"
+          [(ngModel)]="form.username"
+          required
+          #username="ngModel"
+        />
+        <div
+          class="alert alert-danger"
+          role="alert"
+          *ngIf="username.errors && f.submitted"
+        >
+          Username is required!
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          type="password"
+          class="form-control"
+          name="password"
+          [(ngModel)]="form.password"
+          required
+          minlength="6"
+          #password="ngModel"
+        />
+        <div
+          class="alert alert-danger"
+          role="alert"
+          *ngIf="password.errors && f.submitted"
+        >
+          <div *ngIf="password.errors?.['required']">Password is required</div>
+          <div *ngIf="password.errors?.['minlength']">
+            Password must be at least 6 characters
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary btn-block">Login</button>
+      </div>
+      <div class="form-group">
+        <div
+          class="alert alert-danger"
+          role="alert"
+          *ngIf="f.submitted && isLoginFailed"
+        >
+          Login failed: {{ errorMessage }}
+        </div>
+      </div>
+    </form>
+    <div class="alert alert-success" *ngIf="isLoggedIn">
+      Logged in as {{ accountName }}.
+    </div>
+    <button class="btn btn-secondary btn-block" routerLink="/register">
+      Sign up
+    </button>
+  </div>
+</div>

frontend/src/app/Views/login/login.component.scss

@@ -0,0 +1,9 @@
+.login-container {
+  margin: auto;
+  width: 60vh;
+  padding-top: 10vh;
+}
+
+.no-border {
+  border: none;
+}

frontend/src/app/Views/login/login.component.spec.ts

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

frontend/src/app/Views/login/login.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../Services/auth.service';
+import { TokenStorageService } from '../../Services/token.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent implements OnInit {
+  form: any = {
+    username: null,
+    password: null,
+  };
+  isLoggedIn = false;
+  isLoginFailed = false;
+  errorMessage = '';
+  accountName = '';
+
+  constructor(
+    private authService: AuthService,
+    private tokenStorage: TokenStorageService,
+    private router: Router
+  ) {}
+  ngOnInit(): void {
+    this.tokenStorage.signOut();
+    if (this.tokenStorage.getToken()) {
+      this.isLoggedIn = true;
+    }
+  }
+  onSubmit(): void {
+    const { username, password } = this.form;
+    console.log(username, password);
+    this.authService.login(username, password).subscribe(
+      (data) => {
+        this.tokenStorage.saveToken(data.accessToken);
+        this.tokenStorage.saveUser(data);
+
+        this.isLoginFailed = false;
+        this.isLoggedIn = true;
+        this.accountName = username;
+        console.log(this.isLoggedIn);
+        this.router.navigate(['']);
+      },
+      (err) => {
+        this.errorMessage = err.error.message;
+        this.isLoginFailed = true;
+      }
+    );
+  }
+  reloadPage(): void {
+    window.location.reload();
+  }
+}

frontend/src/app/Views/register/register.component.html

@@ -0,0 +1,69 @@
+<div class="col-md-4 login-container">
+  <div class="card card-container no-border">
+    <img
+      id="profile-img"
+      src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
+      class="profile-img-card"
+    />
+    <form
+      *ngIf="!isSuccessful"
+      name="form"
+      (ngSubmit)="f.form.valid && onSubmit()"
+      #f="ngForm"
+      novalidate
+    >
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input
+          type="text"
+          class="form-control"
+          name="username"
+          [(ngModel)]="form.username"
+          required
+          minlength="3"
+          maxlength="20"
+          #username="ngModel"
+        />
+        <div class="alert-danger" *ngIf="username.errors && f.submitted">
+          <div *ngIf="username.errors?.['required']">Username is required</div>
+          <div *ngIf="username.errors?.['minlength']">
+            Username must be at least 3 characters
+          </div>
+          <div *ngIf="username.errors?.['maxlength']">
+            Username must be at most 20 characters
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          type="password"
+          class="form-control"
+          name="password"
+          [(ngModel)]="form.password"
+          required
+          minlength="6"
+          #password="ngModel"
+        />
+        <div class="alert-danger" *ngIf="password.errors && f.submitted">
+          <div *ngIf="password.errors?.['required']">Password is required</div>
+          <div *ngIf="password.errors?.['minlength']">
+            Password must be at least 6 characters
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary btn-block">Sign Up</button>
+      </div>
+      <div class="alert alert-warning" *ngIf="f.submitted && isSignUpFailed">
+        Signup failed!<br />{{ errorMessage }}
+      </div>
+    </form>
+    <div class="alert alert-success" *ngIf="isSuccessful">
+      Your registration is successful!
+    </div>
+    <button class="btn btn-secondary btn-block" routerLink="/login">
+      Go Back
+    </button>
+  </div>
+</div>

frontend/src/app/Views/register/register.component.scss

@@ -0,0 +1,9 @@
+.login-container {
+  margin: auto;
+  width: 60vh;
+  padding-top: 10vh;
+}
+
+.no-border {
+  border: none;
+}

frontend/src/app/Views/register/register.component.spec.ts

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

frontend/src/app/Views/register/register.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../Services/auth.service';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent implements OnInit {
+  form: any = {
+    username: null,
+    password: null,
+  };
+  isSuccessful = false;
+  isSignUpFailed = false;
+  errorMessage = '';
+  constructor(private authService: AuthService, private router: Router) {}
+  ngOnInit(): void {}
+  onSubmit(): void {
+    const { username, password } = this.form;
+    this.authService.register(username, password).subscribe(
+      (data) => {
+        console.log(data);
+        this.isSuccessful = true;
+        this.isSignUpFailed = false;
+        this.router.navigate(['/login']);
+      },
+      (err) => {
+        this.errorMessage = err.error.message;
+        this.isSignUpFailed = true;
+      }
+    );
+  }
+}