added user register

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

@@ -40,7 +40,7 @@ export class LoginComponent {
         password: this.authData.password,
       };
       try {
-        await this.authService.login(body);
+        await this.authService.login(body, this.authData.checkbox);
         ngForm.resetForm();
         this.router.navigate(['/browse/']);
         this.errorService.clearError();

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

@@ -37,7 +37,9 @@
         } @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>
       <input
         type="password"

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

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { AuthService } from '../../../services/auth.service';
+import { ErrorService } from '../../../services/error.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-register',
@@ -21,7 +24,12 @@ export class RegisterComponent {
 
   registrationSuccess: boolean = false;
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private authService: AuthService,
+    public errorService: ErrorService,
+    private router: Router
+  ) {}
 
   ngOnInit(): void {
     this.route.queryParams.subscribe((params) => {
@@ -34,11 +42,25 @@ export class RegisterComponent {
     return emailRegex.test(emailValue);
   }
 
-  onSubmit(ngForm: NgForm) {
+  async onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      console.log(this.authData);
-      ngForm.form.reset();
-      this.registrationSuccess = true;
+      const body = {
+        email: this.authData.mail,
+        username: this.authData.mail.split('@')[0],
+        password: this.authData.password,
+      };
+      try {
+        await this.authService.register(body);
+        ngForm.resetForm();
+        this.registrationSuccess = true;
+        this.errorService.clearError();
+      } catch (error) {
+        if (error instanceof HttpErrorResponse) {
+          this.errorService.setError(error.error.detail);
+        } else {
+          this.errorService.setError('An unknown error has occurred.');
+        }
+      }
     }
   }
 }

frontend/src/app/components/home/browse/browse.component.scss

@@ -4,6 +4,7 @@ section {
   height: 100vh;
   width: 100vw;
   background-color: $black;
+  overflow: hidden;
 }
 
 .video-overlay {

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

@@ -1,12 +1,7 @@
-import {
-  HttpClient,
-  HttpErrorResponse,
-  HttpHeaders,
-} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { lastValueFrom, Observable } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
 import { environment } from '../environments/environment.development';
-import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
@@ -14,25 +9,24 @@ import { Router } from '@angular/router';
 export class AuthService {
   errorMsg: string | null = null;
 
-  constructor(private http: HttpClient, private router: Router) {}
+  constructor(private http: HttpClient) {}
 
-  async login(body: any): Promise<void> {
+  async login(body: any, storage: boolean): Promise<void> {
     const data = await lastValueFrom(
       this.http.post<any>(`${environment.baseUrl}/auth/login/`, body)
     );
-    const authToken = data.toString();
-    localStorage.setItem('authToken', authToken);
+    this.storeAuthToken(data, storage);
   }
 
-  getAllUsers(): Observable<any> {
-    const headers = this.getAuthHeaders();
-    return this.http.get('http://127.0.0.1:8000/users/', { headers });
+  storeAuthToken(data: any, storage: boolean) {
+    storage
+      ? localStorage.setItem('authToken', data.toString())
+      : sessionStorage.setItem('authToken', data.toString());
   }
 
-  private getAuthHeaders(): HttpHeaders {
-    const authToken = localStorage.getItem('authToken');
-    return new HttpHeaders({
-      Authorization: `token ${authToken}`,
-    });
+  async register(body: any): Promise<void> {
+    await lastValueFrom(
+      this.http.post<any>(`${environment.baseUrl}/auth/register/`, body)
+    );
   }
 }

frontend/src/app/shared/components/header/header.component.html

@@ -7,7 +7,7 @@
     <app-btn-large
       [value]="'Log Out'"
       [imgPath]="'logout'"
-      routerLink="/logout"
+      (click)="logout()"
     ></app-btn-large>
   </div>
   } @else {

frontend/src/app/shared/components/header/header.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, input } from '@angular/core';
 import { BtnLargeComponent } from '../btn-large/btn-large.component';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-header',
@@ -11,4 +11,12 @@ import { RouterLink } from '@angular/router';
 })
 export class HeaderComponent {
   @Input() browse: boolean = false;
+
+  constructor(private router: Router) {}
+
+  logout() {
+    localStorage.clear();
+    sessionStorage.clear();
+    this.router.navigate(['/']);
+  }
 }