Add skeletton for profile page

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}`);
+    });
+  }
 }