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,29 +11,37 @@ 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 {
-    const { email, username, password } = this.form;
-    this.authService.register(email, username, password).subscribe(
-      (data) => {
-        this.isSuccessful = true;
-        this.isSignUpFailed = false;
-        this.router.navigate(['/login']);
-      },
-      (err) => {
-        this.errorMessage = err.error.message;
-        this.isSignUpFailed = true;
-      }
-    );
+    if (this.form.password === this.form.passwordRepeat) {
+      this.checkPasswordFailed = false;
+      const { email, username, password } = this.form;
+      this.authService.register(email, username, password).subscribe(
+        (data) => {
+          this.isSuccessful = true;
+          this.isSignUpFailed = false;
+          this.router.navigate(['/login']);
+        },
+        (err) => {
+          this.errorMessage = err.error.message;
+          this.isSignUpFailed = true;
+        }
+      );
+    } else {
+      this.checkPasswordFailed = true;
+    }
   }
 }