Feature/authentication frontend

backend/user/urls.py

@@ -1,5 +1,5 @@
 from django.urls import include, path, re_path
-from .views import redirect_confirm, KeyInfoView
+from .views import DeleteUser, redirect_confirm, KeyInfoView
 from dj_rest_auth.registration.views import VerifyEmailView
 
 from .views import KeyInfoView, redirect_confirm, redirect_reset
@@ -23,6 +23,12 @@
         redirect_reset,
         name="password_reset_confirm",
     ),
+    # delete user
+    path(
+        "delete/",
+        DeleteUser.as_view(),
+        name="delete user"
+    ),
     # generic routes (login, logout, pw reset etc.)
     path("", include("dj_rest_auth.urls")),
     path("registration/", include("dj_rest_auth.registration.urls")),

backend/user/views.py

@@ -1,5 +1,5 @@
 from allauth.account.models import EmailConfirmationHMAC
-from django.http import HttpResponseRedirect
+from django.http import HttpRequest, HttpResponseRedirect
 from rest_framework.exceptions import APIException
 from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
@@ -43,6 +43,10 @@ def post(self, request):
         except Exception as e:
             raise APIException(e)
 
+class DeleteUser(APIView):
+    def delete(self, request: HttpRequest):
+        user = request.user
+        user.delete()
 
 class UserViewSet(ModelViewSet):
     permission_classes = [IsAuthenticated]

frontend/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div class="app">
     <lc-menu role="banner"></lc-menu>
+    <lc-toast-container aria-live="polite" aria-atomic="true" />
     <main class="main-content mt-5 mb-5">
         <div class="container">
             <router-outlet></router-outlet>

frontend/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'lettercraft';
+    title = 'lettercraft';
 }

frontend/src/app/core/core.module.ts

@@ -3,6 +3,7 @@ import { SharedModule } from '../shared/shared.module';
 import { FooterComponent } from './footer/footer.component';
 import { MenuComponent } from './menu/menu.component';
 import { UserMenuComponent } from './menu/user-menu/user-menu.component';
+import { ToastContainerComponent } from './toast-container/toast-container.component';
 
 
 
@@ -11,13 +12,15 @@ import { UserMenuComponent } from './menu/user-menu/user-menu.component';
         FooterComponent,
         MenuComponent,
         UserMenuComponent,
+        ToastContainerComponent,
     ],
     imports: [
         SharedModule
     ],
     exports: [
         FooterComponent,
         MenuComponent,
+        ToastContainerComponent
     ]
 })
 export class CoreModule { }

frontend/src/app/core/menu/user-menu/user-menu.component.html

@@ -1,5 +1,5 @@
 <ul class="navbar-nav">
-    <li class="navbar-text" *ngIf="isLoading$ | async">
+    <li class="navbar-text" *ngIf="authLoading$ | async">
         <div class="spinner-border" role="status">
             <span class="visually-hidden">Loading user data...</span>
         </div>
@@ -12,9 +12,11 @@
                 {{user.username}}
             </button>
             <div ngbDropdownMenu aria-labelledby="userDropdown" class="dropdown-menu dropdown-menu-end">
-                <a ngbDropdownItem [routerLink]="['/settings']" hidden>Settings</a>  <!-- hide settings link until this is implemented -->
+                <a ngbDropdownItem [routerLink]="['/user-settings']">Settings</a>
                 <a *ngIf="user.isStaff" ngbDropdownItem href="/admin/">Administration</a>
-                <button ngbDropdownItem (click)="logout()">Sign out</button>
+                <button ngbDropdownItem (click)="logout()">
+                    Sign out
+                </button>
             </div>
         </li>
     </ng-container>
@@ -24,11 +26,18 @@
                 Sign in
             </a>
         </li>
-        <li class="nav-item" hidden> <!-- hide registration link until this is implemented -->
+        <li class="nav-item">
             <a [routerLink]="['/register']" routerLinkActive="active" class="nav-link">
                 Register
             </a>
         </li>
     </ng-container>
+    <ng-container *ngIf="logoutLoading$ | async">
+        <li class="d-flex align-items-center">
+            <div class="spinner-border spinner-border-sm text-light" role="status">
+                <span class="visually-hidden">Signing out...</span>
+            </div>
+        </li>
+    </ng-container>
 </ul>
 

frontend/src/app/core/menu/user-menu/user-menu.component.spec.ts

@@ -1,56 +1,92 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-
 import { UserMenuComponent } from './user-menu.component';
 import { AuthService } from '@services/auth.service';
-import { AuthServiceMock, testUser } from '@mock/auth.service.mock';
 import { SharedTestingModule } from '@shared/shared-testing.module';
+import { HttpTestingController } from '@angular/common/http/testing';
+import { UserResponse } from 'src/app/user/models/user';
+
+const fakeUserResponse: UserResponse = {
+    id: 1,
+    username: "frodo",
+    email: "[email protected]",
+    first_name: "Frodo",
+    last_name: "Baggins",
+    is_staff: false
+}
+
+const fakeAdminResponse: UserResponse = {
+    id: 1,
+    username: "gandalf",
+    email: "[email protected]",
+    first_name: "Gandalf",
+    last_name: "The Grey",
+    is_staff: true
+}
 
 
 describe('UserMenuComponent', () => {
     let component: UserMenuComponent;
     let fixture: ComponentFixture<UserMenuComponent>;
-    let authService: AuthServiceMock;
+    let httpTestingController: HttpTestingController;
 
     const spinner = () => fixture.debugElement.query(By.css('.spinner-border'));
     const signInLink = () => fixture.debugElement.query(By.css('a[href="/login"]'));
     const userDropdownTrigger = () => fixture.debugElement.query(By.css('#userDropdown'))
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [
-                { provide: AuthService, useClass: AuthServiceMock }
-            ],
             declarations: [UserMenuComponent],
+            providers: [AuthService],
             imports: [SharedTestingModule],
         });
-        authService = TestBed.inject(AuthService) as any as AuthServiceMock;
+        httpTestingController = TestBed.inject(HttpTestingController);
         fixture = TestBed.createComponent(UserMenuComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
 
+    afterEach(() => {
+        httpTestingController.verify();
+    });
+
     it('should create', () => {
+        httpTestingController.expectOne('/users/user/');
         expect(component).toBeTruthy();
     });
 
+    it('should show sign-in when not logged in', () => {
+        const req = httpTestingController.expectOne('/users/user/');
+        req.flush(null);
+        fixture.detectChanges();
+
+        expect(spinner()).toBeFalsy();
+        expect(signInLink()).toBeTruthy();
+        expect(userDropdownTrigger()).toBeFalsy();
+    });
+
     it('should show a loading spinner', () => {
+        httpTestingController.expectOne('/users/user/');
         expect(spinner()).toBeTruthy();
         expect(signInLink()).toBeFalsy();
         expect(userDropdownTrigger()).toBeFalsy();
     });
 
-    it('should show sign-in when not logged in', () => {
-        authService._setUser(null);
+    it('should show an admin menu when user is a staff member', () => {
+        const req = httpTestingController.expectOne('/users/user/');
+        req.flush(fakeAdminResponse);
         fixture.detectChanges();
 
         expect(spinner()).toBeFalsy();
-        expect(signInLink()).toBeTruthy();
-        expect(userDropdownTrigger()).toBeFalsy();
+        expect(signInLink()).toBeFalsy();
+        expect(userDropdownTrigger()).toBeTruthy();
+        expect(userDropdownTrigger().nativeElement.textContent).toContain('gandalf');
     });
 
+
     it('should show a user menu when logged in', () => {
-        authService._setUser(testUser({}));
+        const req = httpTestingController.expectOne('/users/user/');
+        req.flush(fakeUserResponse);
         fixture.detectChanges();
 
         expect(spinner()).toBeFalsy();

frontend/src/app/core/menu/user-menu/user-menu.component.ts

@@ -1,36 +1,66 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { Observable, map } from 'rxjs';
-import { User } from '../../../user/models/user';
+import { map } from 'rxjs';
 import { AuthService } from '@services/auth.service';
 import _ from 'underscore';
+import { ToastService } from '@services/toast.service';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'lc-user-menu',
   templateUrl: './user-menu.component.html',
   styleUrls: ['./user-menu.component.scss']
 })
-export class UserMenuComponent {
-    isLoading$: Observable<boolean>;
-    user$: Observable<User | null | undefined>;
-    showSignIn$: Observable<boolean>;
+export class UserMenuComponent implements OnInit {
+    public authLoading$ = this.authService.currentUser$.pipe(
+        map(_.isUndefined)
+    );
 
-    icons = {
+    public user$ = this.authService.currentUser$;
+
+    public showSignIn$ = this.authService.currentUser$.pipe(
+        map(_.isNull)
+    );
+
+    public icons = {
         user: faUser,
     };
 
-    constructor(private authService: AuthService) {
-        this.isLoading$ = this.authService.currentUser$.pipe(
-            map(_.isUndefined)
-        );
-        this.user$ = this.authService.currentUser$;
-        this.showSignIn$ = this.authService.currentUser$.pipe(
-            map(_.isNull)
-        );
+    public logoutLoading$ = this.authService.logout.loading$;
+
+    constructor(
+        private authService: AuthService,
+        private toastService: ToastService,
+        private router: Router,
+        private destroyRef: DestroyRef
+    ) { }
+
+    ngOnInit(): void {
+        this.authService.logout.error$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.toastService.show({
+                    header: 'Sign out failed',
+                    body: 'There was an error signing you out. Please try again.',
+                    type: 'danger'
+                });
+            });
+
+        this.authService.logout.success$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.toastService.show({
+                    header: 'Sign out successful',
+                    body: 'You have been successfully signed out.',
+                    type: 'success'
+                });
+                this.router.navigate(['/']);
+            });
     }
 
-    logout() {
-        this.authService.logout(false);
+    public logout(): void {
+        this.authService.logout.subject.next();
     }
 
 }

frontend/src/app/core/toast-container/toast-container.component.html

@@ -0,0 +1,11 @@
+<ngb-toast
+    *ngFor="let toast of toastService.toasts"
+    class="mt-2"
+    [class]="toast.className"
+    [header]="toast.header"
+    [autohide]="true"
+    [delay]="toast.delay"
+    (hidden)="toastService.remove(toast)"
+>
+    {{ toast.body }}
+</ngb-toast>

frontend/src/app/core/toast-container/toast-container.component.scss

@@ -0,0 +1,7 @@
+:host {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin: 0.5em;
+    z-index: 1200;
+  }

frontend/src/app/core/toast-container/toast-container.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastContainerComponent } from './toast-container.component';
+
+describe('ToastContainerComponent', () => {
+  let component: ToastContainerComponent;
+  let fixture: ComponentFixture<ToastContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ToastContainerComponent]
+    });
+    fixture = TestBed.createComponent(ToastContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/core/toast-container/toast-container.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ToastService } from '@services/toast.service';
+
+@Component({
+  selector: 'lc-toast-container',
+  templateUrl: './toast-container.component.html',
+  styleUrls: ['./toast-container.component.scss']
+})
+export class ToastContainerComponent {
+    constructor(public toastService: ToastService) { }
+}

frontend/src/app/routes.ts

@@ -3,6 +3,10 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './user/login/login.component';
 import { VerifyEmailComponent } from './user/verify-email/verify-email.component';
+import { RegisterComponent } from './user/register/register.component';
+import { PasswordForgottenComponent } from './user/password-forgotten/password-forgotten.component';
+import { ResetPasswordComponent } from './user/reset-password/reset-password.component';
+import { UserSettingsComponent } from './user/user-settings/user-settings.component';
 
 const routes: Routes = [
     {
@@ -13,10 +17,26 @@ const routes: Routes = [
         path: 'login',
         component: LoginComponent,
     },
+    {
+        path: 'register',
+        component: RegisterComponent,
+    },
     {
         path: 'confirm-email/:key',
         component: VerifyEmailComponent,
     },
+    {
+        path: 'password-forgotten',
+        component: PasswordForgottenComponent
+    },
+    {
+        path: 'reset-password/:uid/:token',
+        component: ResetPasswordComponent
+    },
+    {
+        path: 'user-settings',
+        component: UserSettingsComponent
+    },
     {
         path: '',
         redirectTo: '/home',