Add skeletton for profile page

frontend/src/app/Services/bot.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BotService } from './bot.service';
+
+describe('BotService', () => {
+  let service: BotService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BotService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/Services/bot.service.ts

@@ -0,0 +1,31 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TokenStorageService } from './token.service';
+
+const API_URL = 'https://gruppe1.testsites.info/api/';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BotService {
+  constructor(
+    private http: HttpClient,
+    private tokenStorage: TokenStorageService
+  ) {}
+
+  /**
+   * @param  {string} telegramUserID
+   * @returns Observable
+   */
+  public createTransaction(telegram_user_id: string): Observable<any> {
+    return this.http.post(API_URL + 'telegram', {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
+      responseType: 'text',
+      telegram_user_id,
+    });
+  }
+}

frontend/src/app/Services/data.service.ts

@@ -16,6 +16,42 @@ export class DataService {
     private tokenStorage: TokenStorageService
   ) {}
 
+  /**
+   * @returns Observable
+   */
+  public getUserData(): Observable<any> {
+    return this.http.get(API_URL + 'user', {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
+      responseType: 'text',
+    });
+  }
+
+  /**
+   * @param  {string} email
+   * @param  {string} username
+   * @param  {string} password
+   * @returns Observable
+   */
+  public updateUserData(
+    email: string,
+    username: string,
+    password: string
+  ): Observable<any> {
+    return this.http.put(API_URL + 'user', {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
+      responseType: 'text',
+      email,
+      username,
+      password,
+    });
+  }
+
   /**
    * @returns Observable
    */
@@ -55,6 +91,7 @@ export class DataService {
     count: BigInt,
     price: number
   ): Observable<any> {
+    time = time + 'T12:00:00.000';
     return this.http.post(API_URL + 'transactions', {
       headers: new HttpHeaders({
         'Content-Type': 'application/json',

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

@@ -1,5 +1,5 @@
 <mat-toolbar>
-  <span>Aktienbot</span>
+  <a href=""><span>Aktienbot</span></a>
   <span class="example-spacer"></span>
   <button
     mat-icon-button

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

@@ -1,3 +1,8 @@
 .example-spacer {
   flex: 1 1 auto;
 }
+
+a {
+  color: white;
+  text-decoration: none; /* no underline */
+}

frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,28 @@
+<div class="containeer">
+  <h1 mat-dialog-title>Aktion bestätigen</h1>
+  <div mat-dialog-content class="content">
+    <span>Sind sie sicher, dass sie diese Handlung abschließen wollen?</span>
+  </div>
+  <div mat-dialog-actions class="form-group footer-buttons">
+    <div class="inner">
+      <button
+        id="cancelButton"
+        class="btn btn-primary btn-block"
+        (click)="returnBack()"
+        [mat-dialog-close]="false"
+      >
+        Cancel
+      </button>
+    </div>
+    <div class="inner">
+      <button
+        id="okButton"
+        class="btn btn-danger btn-block"
+        (click)="confirm()"
+        [mat-dialog-close]="true"
+      >
+        Ok
+      </button>
+    </div>
+  </div>
+</div>

frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss

@@ -0,0 +1,18 @@
+.footer-buttons {
+  width: 100%;
+  text-align: center;
+}
+
+.spacer {
+  flex-grow: 1;
+  width: 5%;
+}
+
+.inner {
+  display: inline-block;
+  width: 50%;
+}
+
+.content {
+  height: 80%;
+}

frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts

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

frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts

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

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

@@ -1 +1,135 @@
-<p>profile works!</p>
+<mat-grid-list cols="2">
+  <mat-grid-tile>
+    <mat-card class="card">
+      <mat-card-title class="card-title">Profile Information</mat-card-title>
+      <mat-card-content>
+        <form
+          class="example-form form"
+          name="form"
+          (ngSubmit)="f.form.valid && openDialog('updateUser')"
+          #f="ngForm"
+          novalidate
+        >
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>Username</mat-label>
+            <input
+              type="text"
+              name="username"
+              matInput
+              [formControl]="userNameFormControl"
+              placeholder="Ex. patrick-bateman"
+              [(ngModel)]="form.username"
+              #username
+            />
+            <mat-error *ngIf="userNameFormControl.hasError('required')">
+              Username is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>{{ form.email }}</mat-label>
+            <input
+              type="email"
+              matInput
+              name="email"
+              disabled
+              placeholder="Ex. patrickbateman@example.com"
+            />
+          </mat-form-field>
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>Password</mat-label>
+            <input
+              type="password"
+              matInput
+              name="password"
+              [formControl]="passwordFormControl"
+              placeholder="Password"
+              minlength="6"
+              [(ngModel)]="form.password"
+              #password
+            />
+            <mat-error
+              *ngIf="
+                passwordFormControl.hasError('minlength') &&
+                !passwordFormControl.hasError('required')
+              "
+            >
+              Please enter a valid password
+            </mat-error>
+            <mat-error *ngIf="passwordFormControl.hasError('required')">
+              Password is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>Repeat Password</mat-label>
+            <input
+              type="password"
+              matInput
+              [formControl]="passwordFormControl"
+              placeholder="Ex. pat@example.com"
+            />
+            <mat-error
+              *ngIf="
+                passwordFormControl.hasError('minLength') &&
+                !passwordFormControl.hasError('required')
+              "
+            >
+              Please enter a valid password
+            </mat-error>
+            <mat-error *ngIf="passwordFormControl.hasError('required')">
+              Password is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+          <div class="form-group footer-buttons">
+            <button
+              class="btn btn-primary btn-block"
+              [disabled]="
+                passwordFormControl.hasError('required') ||
+                passwordFormControl.hasError('minLength') ||
+                userNameFormControl.hasError('required')
+              "
+            >
+              Update
+            </button>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-card class="card">
+      <mat-card-title class="card-title">Add Telegram Id</mat-card-title>
+      <mat-card-content>
+        <form
+          name="form"
+          (ngSubmit)="f.form.valid && openDialog('addTelegram')"
+          #f="ngForm"
+          novalidate
+          class="backgorund form"
+        >
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>Telegram UserId</mat-label>
+            <input
+              type="text"
+              matInput
+              [formControl]="telegramIdFormControl"
+              [(ngModel)]="userId"
+              required
+              placeholder="Ex. 123456789"
+            />
+            <mat-error *ngIf="telegramIdFormControl.hasError('required')">
+              Id is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+          <div class="form-group footer-buttons">
+            <button
+              class="btn btn-primary btn-block"
+              [disabled]="telegramIdFormControl.hasError('required')"
+            >
+              Add
+            </button>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>

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

@@ -0,0 +1,22 @@
+.form {
+  width: 100%;
+}
+
+.card {
+  width: 90%;
+  height: 80%;
+  margin: 5%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+.card-title {
+  padding-bottom: 2.5vh;
+}
+
+mat-grid {
+  width: 100%;
+  height: 100%;
+}

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

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, PatternValidator, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { BotService } from 'src/app/Services/bot.service';
+import { DataService } from 'src/app/Services/data.service';
+import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
 
 @Component({
   selector: 'app-profile',
@@ -6,7 +11,53 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent implements OnInit {
-  constructor() {}
+  userNameFormControl = new FormControl('', [Validators.required]);
+  passwordFormControl = new FormControl('', [
+    Validators.required,
+    Validators.minLength(6),
+  ]);
+  telegramIdFormControl = new FormControl('', [Validators.required]);
+
+  userId = '';
+
+  form: any = {
+    username: null,
+    email: 'example@web.com',
+    password: null,
+  };
+
+  constructor(
+    private botService: BotService,
+    private dataService: DataService,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit(): void {}
+
+  onSubmit() {
+    console.log('NASE1');
+  }
+
+  updateUser() {
+    const { username, email, password } = this.form;
+    console.log('NASE2');
+  }
+
+  openDialog(action: string) {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      width: '50vw',
+      height: '20vh',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === true) {
+        if (action === 'addTelegram') {
+          this.onSubmit();
+        } else if (action === 'updateUser') {
+          this.updateUser();
+        }
+      }
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }

frontend/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -11,6 +11,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -22,6 +23,7 @@ import { RegisterComponent } from './Views/register/register.component';
 import { ProfileComponent } from './Views/profile/profile.component';
 import { BotSettingsComponent } from './Views/bot-settings/bot-settings.component';
 import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.component';
+import { ConfirmationDialogComponent } from './Views/profile/confirmation-dialog/confirmation-dialog.component';
 
 @NgModule({
   declarations: [
@@ -33,6 +35,7 @@ import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.c
     ProfileComponent,
     BotSettingsComponent,
     UserDialogComponent,
+    ConfirmationDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -48,6 +51,8 @@ import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.c
     HttpClientModule,
     MatMenuModule,
     MatDialogModule,
+    MatInputModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],