feat: migrate RegisterComponent to Django Rest

src/app/components/login/register/register.component.html

@@ -47,17 +47,17 @@
           }}
         </div>
         <input
-          type="mail"
+          type="email"
-          id="mail"
+          id="email"
-          name="mail"
+          name="email"
           #mail="ngModel"
           placeholder="{{ 'register.email' | translate }}"
           class="custom-input"
           autocomplete="email"
-          [(ngModel)]="registerData.mail"
+          [(ngModel)]="registerData.email"
           required
         />
-        @if(!registerData.mail) {
+        @if(!registerData.email) {
         <img
           class="custom-img"
           src="./../../../assets/img/login/mail.svg"
@@ -68,14 +68,14 @@
         }
         <div class="error-msg">
           @if(!mail.valid && mail.touched &&
-          !checkIfUserEmailIsValid(registerData.mail.toLowerCase()) &&
+          !isEmailValid(registerData.email.toLowerCase()) &&
           !isButtonDisabled()) {
           <p>{{ "register.errorMail0" | translate }}</p>
           } @else { @if (mail.touched &&
-          !checkIfUserEmailIsValid(registerData.mail.toLowerCase()) &&
+          !isEmailValid(registerData.email.toLowerCase()) &&
           !isButtonDisabled()) {
           <p>{{ "register.errorMail1" | translate }}</p>
-          } @else { @if (existEmailOnServer(registerData.mail.toLowerCase()) &&
+          } @else { @if (errorHttpMessage === 'Email already exists' &&
           !isButtonDisabled()) {
           <p>{{ "register.errorMail2" | translate }}</p>
           } } }
@@ -109,7 +109,7 @@
         <div class="error-msg">
           @if (!password.valid && password.touched && !isButtonDisabled()) {
           <p>{{ "register.errorPassword0" | translate }}</p>
-          } @else { @if (registerData.password.length < 6 && password.touched &&
+          } @else { @if (registerData.password.length < 8 && password.touched &&
           !isButtonDisabled()) {
           <p>{{ "register.errorPassword1" | translate }}</p>
           } }
@@ -181,14 +181,14 @@
           [value]="'register.signup' | translate"
           [disabled]="
             mail.invalid ||
-            !registerData.mail ||
+            !registerData.email ||
             password.invalid ||
             !registerData.password ||
             !checkbox.valid ||
             isButtonDisabled() ||
             registerData.password.length < 6 ||
             registerData.password !== registerData.passwordConfirm ||
-            !checkIfUserEmailIsValid(registerData.mail)
+            !isEmailValid(registerData.email)
           "
         ></app-form-btn>
       </div>

src/app/components/login/register/register.component.ts

@@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ButtonStateService } from '../../../services/button-state.service';
 import { LoginLoaderComponent } from '../login-loader/login-loader.component';
+import { AuthService } from '../../../services/auth.service';
 
 @Component({
   selector: 'app-register',
@@ -29,11 +30,13 @@ import { LoginLoaderComponent } from '../login-loader/login-loader.component';
   styleUrl: './register.component.scss',
 })
 export class RegisterComponent {
+  errorHttpMessage: string = '';
+
   registerData = {
     name: '',
     firstName: '',
     lastName: '',
-    mail: '',
+    email: '',
     password: '',
     passwordConfirm: '',
     checkboxState: '',
@@ -42,14 +45,23 @@ export class RegisterComponent {
   constructor(
     public loginService: LoginService,
     public translateService: TranslateService,
+    private authService: AuthService,
     private buttonStateService: ButtonStateService
   ) {}
 
-  onSubmit(ngForm: NgForm) {
+  async onSubmit(ngForm: NgForm) {
-    this.buttonStateService.enableButton();
+    this.buttonStateService.disableButton();
     if (ngForm.submitted && ngForm.form.valid) {
-      this.splitName();
+      this.extractFirstAndLastName();
-      this.loginService.register(this.registerData);
+      try {
+        await this.authService.register(this.registerData);
+        this.buttonStateService.enableButton();
+      } catch (error: any) {
+        this.errorHttpMessage = error.message;
+        this.buttonStateService.enableButton();
+      }
+    } else {
+      this.buttonStateService.enableButton();
     }
   }
 
@@ -57,17 +69,13 @@ export class RegisterComponent {
     return this.buttonStateService.isButtonDisabled;
   }
 
-  splitName() {
+  extractFirstAndLastName() {
     const names = this.registerData.name.split(' ');
     this.registerData.firstName = names[0];
     this.registerData.lastName = names.slice(1).join(' ');
   }
 
-  existEmailOnServer(mail: string) {
+  isEmailValid(emailValue: string) {
-    return false; //TODO
-  }
-
-  checkIfUserEmailIsValid(emailValue: string) {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
     if (emailRegex.test(emailValue)) {
       return true;

src/app/services/auth.service.ts

@@ -60,6 +60,19 @@ export class AuthService {
     }
   }
 
+  async register(credentials: any): Promise<void> {
+    try {
+      await lastValueFrom(
+        this.apiService.request('POST', `/auth/register/`, credentials)
+      );
+      this.router.navigate(['/login']);
+      this.toastNotificationService.registerSuccessToast();
+    } catch (error: any) {
+      console.error('Registration failed:', error);
+      throw new Error(error?.error?.error);
+    }
+  }
+
   checkAuthUser(): Observable<boolean> {
     return this.apiService.request('GET', `/auth/`).pipe(
       map(() => true),

src/app/services/error-notification.service.ts

@@ -37,6 +37,10 @@ export class ErrorNotificationService {
           errorMessage =
             'The request timed out. Please check your connection and try again later.';
           break;
+        case 409:
+          errorMessage =
+            'The email is already in use. Please choose a different email or log in if you already have an account.';
+          break;
         case 500:
           errorMessage =
             'There was a problem on the server. Please try again later or contact support if the issue persists.';

src/app/services/toast-notification.service.ts

@@ -22,6 +22,13 @@ export class ToastNotificationService {
     );
   }
 
+  registerSuccessToast(): void {
+    this.createSuccessToast(
+      'You have successfully registered. Please log in.',
+      'Registration Successful'
+    );
+  }
+
   showSessionExpiredMessage(): void {
     this.createInfoToast(
       'Your session has expired, please log in again.',

src/assets/i18n/de.json

@@ -35,16 +35,16 @@
     "passwordConfirm": "Passwort bestätigen",
     "privacyPolicy0": "Ich akzeptiere die",
     "privacyPolicy1": "Datenschutzerklärung",
-    "privacyPolicyError": "Sie müssen die Datenschutzbestimmungen akzeptieren!",
+    "privacyPolicyError": "Sie müssen die Datenschutzbestimmungen akzeptieren",
-    "errorPattern": "Bitte nur Buchstaben und Leerzeichen verwenden!",
+    "errorPattern": "Bitte nur Buchstaben und Leerzeichen verwenden",
-    "errorName": "Sie müssen einen Namen eingeben!",
+    "errorName": "Sie müssen einen Namen eingeben",
-    "errorMail0": "Sie müssen eine E-Mail Adresse eingeben!",
+    "errorMail0": "Sie müssen eine E-Mail Adresse eingeben",
-    "errorMail1": "Dies ist kein gültiges E-Mail-Format!",
+    "errorMail1": "Dies ist kein gültiges E-Mail-Format",
-    "errorMail2": "Diese E-Mail existiert bereits!",
+    "errorMail2": "Diese E-Mail existiert bereits",
-    "errorMail3": "Diese E-Mail existiert nicht!",
+    "errorMail3": "Diese E-Mail existiert nicht",
-    "errorPassword0": "Sie müssen ein Passwort eingeben!",
+    "errorPassword0": "Sie müssen ein Passwort eingeben",
-    "errorPassword1": "Das Passwort muss aus mindestens 6 Zeichen bestehen!",
+    "errorPassword1": "Das Passwort muss aus mindestens 8 Zeichen bestehen",
-    "errorPassword2": "Die Passwörter stimmen nicht überein!"
+    "errorPassword2": "Die Passwörter stimmen nicht überein"
   },
   "loginHeader": {
     "notAUser": "Kein Join Nutzer?",

src/assets/i18n/en.json

@@ -35,16 +35,16 @@
     "passwordConfirm": "Confirm Password",
     "privacyPolicy0": "I accept the",
     "privacyPolicy1": "Privacy policy",
-    "privacyPolicyError": "You must accept the privacy policy!",
+    "privacyPolicyError": "You must accept the privacy policy",
-    "errorPattern": "Please use only letters and spaces!",
+    "errorPattern": "Please use only letters and spaces",
-    "errorName": "You must enter a name!",
+    "errorName": "You must enter a name",
-    "errorMail0": "You must enter a mail!",
+    "errorMail0": "You must enter a mail",
-    "errorMail1": "This is not a valid email format!",
+    "errorMail1": "This is not a valid email format",
-    "errorMail2": "This email already exists!",
+    "errorMail2": "This email already exists",
-    "errorMail3": "This email does not exist!",
+    "errorMail3": "This email does not exist",
-    "errorPassword0": "You must enter a password!",
+    "errorPassword0": "You must enter a password",
-    "errorPassword1": "The password must consist of at least 6 characters!",
+    "errorPassword1": "The password must consist of at least 8 characters",
-    "errorPassword2": "The passwords don't match!"
+    "errorPassword2": "The passwords don't match"
   },
   "loginHeader": {
     "notAUser": "Not a Join user?",