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

@@ -64,13 +64,16 @@
             <input
               type="password"
               matInput
-              [formControl]="passwordFormControl"
+              [formControl]="passwordRepeatFormControl"
               placeholder="Ex. pat@example.com"
+              minlength="6"
+              [(ngModel)]="form.passwordRepeat"
+              #passwordRepeat
             />
             <mat-error
               *ngIf="
-                passwordFormControl.hasError('minLength') &&
-                !passwordFormControl.hasError('required')
+                passwordRepeatFormControl.hasError('minLength') &&
+                !passwordRepeatFormControl.hasError('required')
               "
             >
               Please enter a valid password
@@ -79,12 +82,18 @@
               Password is <strong>required</strong>
             </mat-error>
           </mat-form-field>
+          <div class="alert-danger" *ngIf="checkPasswordFailed">
+            Password does not match, make sure it is the same!
+          </div>
+          <br />
           <div class="form-group footer-buttons">
             <button
               class="btn btn-primary btn-block"
               [disabled]="
+                passwordRepeatFormControl.hasError('required') ||
+                !passwordRepeatFormControl.hasError('minLength') ||
                 passwordFormControl.hasError('required') ||
-                passwordFormControl.hasError('minLength') ||
+                !passwordFormControl.hasError('minLength') ||
                 userNameFormControl.hasError('required')
               "
             >

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

@@ -16,6 +16,10 @@ export class ProfileComponent implements OnInit {
     Validators.required,
     Validators.minLength(6),
   ]);
+  passwordRepeatFormControl = new FormControl('', [
+    Validators.required,
+    Validators.minLength(6),
+  ]);
   telegramIdFormControl = new FormControl('', [
     Validators.required,
     Validators.minLength(6),
@@ -26,9 +30,12 @@ export class ProfileComponent implements OnInit {
   form: any = {
     username: null,
     email: 'example@web.com',
-    password: 'password',
+    password: null,
+    passwordRepeat: null,
   };
 
+  checkPasswordFailed = false;
+
   constructor(
     private profileService: ProfileService,
     public dialog: MatDialog
@@ -57,18 +64,24 @@ export class ProfileComponent implements OnInit {
   }
 
   updateUser() {
-    const { username, email, password } = this.form;
-    this.profileService
-      .updateProfile(this.form.username, this.form.password)
-      .subscribe((result) => {
-        console.log(result);
-      });
+    if (this.form.password === this.form.passwordRepeat) {
+      this.checkPasswordFailed = false;
+      const { username, email, password } = this.form;
+      this.profileService
+        .updateProfile(this.form.username, this.form.password)
+        .subscribe((result) => {
+          console.log(result);
+        });
+    } else {
+      this.checkPasswordFailed = true;
+      console.log("Passwords don't match");
+    }
   }
 
   openDialog(action: string) {
     const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
       width: '50vw',
-      height: '20vh',
+      height: '25vh',
     });
 
     dialogRef.afterClosed().subscribe((result) => {