error when the email does not exist & clean code error service

backend/videoflix/auth/views.py

@@ -40,7 +40,7 @@ class RegisterView(APIView):
         email = request.data.get('email')
         password = request.data.get('password')
         if CustomUser.objects.filter(email=email).exists():
-            return Response({'detail': 'A user with this email already exists.'}, status=status.HTTP_400_BAD_REQUEST)
+            return Response({'mail': 'A user with this email already exists.'}, status=status.HTTP_400_BAD_REQUEST)
 
         serialized = UserSerializer(data=request.data)
         if serialized.is_valid():
@@ -81,7 +81,7 @@ class VerifyEmailView(APIView):
         user = CustomUser.objects.filter(Q(email=email) & Q(verify_email_token=token)).first()
         if user:
             if user.is_active:
-                return Response({"error": "User has already been activated"}, status=status.HTTP_409_CONFLICT)
+                return Response({"error": "User has already been activated."}, status=status.HTTP_409_CONFLICT)
             
             user.is_active = True
             user.save()
@@ -93,7 +93,7 @@ class ForgotPasswordView(APIView):
     def post(self, request):
         email = request.data.get('email')
         if not email:
-            return Response({"error": "Email required."}, status=status.HTTP_400_BAD_REQUEST)
+            return Response({"mail": "Email required."}, status=status.HTTP_400_BAD_REQUEST)
         
         try:
             user = CustomUser.objects.get(email=email)
@@ -101,7 +101,7 @@ class ForgotPasswordView(APIView):
             user.save()
             self.send_email(user)
         except CustomUser.DoesNotExist:
-            pass
+            return Response({"mail": "This email does not exist."}, status=status.HTTP_400_BAD_REQUEST)
         return Response(status=status.HTTP_200_OK)
     
     def send_email(self, user):

frontend/src/app/components/auth/forgot-password/forgot-password.component.html

@@ -25,6 +25,7 @@
             !isUserEmailValid(authData.mail.toLowerCase()) &&
             authData.mail.length > 0)
         "
+        (click)="this.errorService.clearError()"
         required
       />
       <div class="error-msg">
@@ -34,6 +35,11 @@
         !isUserEmailValid(authData.mail.toLowerCase())) {
         <p>This is not a valid email format</p>
         }}
+        <div *ngIf="errorService.error$ | async as errors">
+          <div *ngIf="errors?.['mail']">
+            <p>{{ errors["mail"] }}</p>
+          </div>
+        </div>
       </div>
       <app-btn-large
         [value]="'Send Email'"

frontend/src/app/components/auth/forgot-password/forgot-password.component.ts

@@ -48,16 +48,16 @@ export class ForgotPasswordComponent {
     return emailRegex.test(emailValue);
   }
 
-  onSubmit(ngForm: NgForm, mailInput: any) {
+  async onSubmit(ngForm: NgForm, mailInput: any) {
     if (ngForm.submitted && ngForm.form.valid) {
       if (mailInput.name === 'mail') {
         try {
-          this.verifyEmail();
+          await this.verifyEmail();
           ngForm.form.reset();
         } catch {}
       } else if (mailInput.name === 'password') {
         try {
-          this.changePassword();
+          await this.changePassword();
           ngForm.form.reset();
         } catch {}
       }
@@ -76,7 +76,7 @@ export class ForgotPasswordComponent {
       this.errorService.clearError();
     } catch (error) {
       this.sendMailSuccess = false;
-      this.errorMsg(error);
+      this.errorService.errorMsg(error);
     }
   }
 
@@ -94,20 +94,7 @@ export class ForgotPasswordComponent {
       this.queryEmailSuccess = true;
       this.errorService.clearError();
     } catch (error) {
-      this.errorMsg(error);
+      this.errorService.errorMsg(error);
-    }
-  }
-
-  errorMsg(error: any) {
-    if (error instanceof HttpErrorResponse) {
-      const errorTypes = ['error'];
-      for (const type of errorTypes) {
-        if (error.error[type]) {
-          this.errorService.setError(type, error.error[type]);
-          return;
-        }
-      }
-      this.errorService.clearError();
     }
   }
 }

frontend/src/app/components/auth/login/login.component.ts

@@ -45,21 +45,8 @@ export class LoginComponent {
         this.router.navigate(['/browse/']);
         this.errorService.clearError();
       } catch (error) {
-        this.errorMsg(error);
+        this.errorService.errorMsg(error);
       }
     }
   }
-
-  errorMsg(error: any) {
-    if (error instanceof HttpErrorResponse) {
-      const errorTypes = ['mail', 'password'];
-      for (const type of errorTypes) {
-        if (error.error[type]) {
-          this.errorService.setError(type, error.error[type]);
-          return;
-        }
-      }
-      this.errorService.clearError();
-    }
-  }
 }

frontend/src/app/components/auth/register/register.component.html

@@ -38,9 +38,12 @@
         } @else { @if (mail.touched && authData.mail.length > 0 &&
         !isUserEmailValid(authData.mail.toLowerCase())) {
         <p>This is not a valid email format</p>
-        }} @if ((errorService.error$ | async)) {
+        }}
-        <p>{{ errorService.error$ | async }}</p>
+        <div *ngIf="errorService.error$ | async as errors">
-        }
+          <div *ngIf="errors?.['mail']" class="error-msg">
+            <p>{{ errors["mail"] }}</p>
+          </div>
+        </div>
       </div>
       <input
         type="password"

frontend/src/app/components/auth/register/register.component.ts

@@ -55,11 +55,7 @@ export class RegisterComponent {
         this.registrationSuccess = true;
         this.errorService.clearError();
       } catch (error) {
-        // if (error instanceof HttpErrorResponse) {
+        this.errorService.errorMsg(error);
-        //   this.errorService.setError(error.error.detail);
-        // } else {
-        //   this.errorService.setError('An unknown error has occurred.');
-        // }
       }
     }
   }

frontend/src/app/services/error.service.ts

@@ -1,3 +1,4 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -32,4 +33,17 @@ export class ErrorService {
   clearError() {
     this.errorSubject.next(null);
   }
+
+  errorMsg(error: any) {
+    if (error instanceof HttpErrorResponse) {
+      const errorTypes = ['mail', 'password', 'error'];
+      for (const type of errorTypes) {
+        if (error.error[type]) {
+          this.setError(type, error.error[type]);
+          return;
+        }
+      }
+      this.clearError();
+    }
+  }
 }