Add skeletton for profile page

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