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

@@ -77,7 +77,7 @@
           type="password"
           class="form-control"
           name="passwordRepeat"
-          [(ngModel)]="form.password"
+          [(ngModel)]="form.passwordRepeat"
           required
           minlength="6"
           #passwordRepeat="ngModel"
@@ -88,6 +88,9 @@
           </div>
         </div>
       </div>
+      <div class="alert-danger" *ngIf="checkPasswordFailed">
+        Password does not match, make sure it is the same!
+      </div>
       <div class="form-group">
         <button class="btn btn-primary btn-block">Sign Up</button>
       </div>

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

@@ -11,4 +11,10 @@
 .backgorund {
   background-color: #181a1b;
   color: white;
+  padding-top: 2vh;
+}
+
+.profile-img-card {
+  border-radius: 2%;
+  box-shadow: 0 0 0 500px #181a1b;
 }

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

@@ -11,18 +11,23 @@ export class RegisterComponent {
   form: any = {
     email: null,
     password: null,
+    passwordRepeat: null,
     username: null,
   };
   isSuccessful = false;
   isSignUpFailed = false;
   errorMessage = '';
 
+  checkPasswordFailed = false;
+
   /**
    * @param  {AuthService} privateauthService
    * @param  {Router} privaterouter
    */
   constructor(private authService: AuthService, private router: Router) {}
   onSubmit(): void {
+    if (this.form.password === this.form.passwordRepeat) {
+      this.checkPasswordFailed = false;
       const { email, username, password } = this.form;
       this.authService.register(email, username, password).subscribe(
         (data) => {
@@ -35,5 +40,8 @@ export class RegisterComponent {
           this.isSignUpFailed = true;
         }
       );
+    } else {
+      this.checkPasswordFailed = true;
+    }
   }
 }