FE - Enhance authenticated routings (#20)

anhptk · web-flow · commit 39c96f07615b · 2024-04-28T12:04:31.000+07:00
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
@@ -9,13 +9,17 @@ import { ArticleComponent } from "./pages/article/article.component";
 import { ProfileComponent } from "./pages/profile/profile.component";
 import { FeedMenuEnum } from "./common/models/view/feed.view-model";
 import { ProfileRoutingData } from "./common/models/view/profile-routing-data.model";
+import { authenticationGuard } from "./common/guards/authentication.guard";
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
-  { path: 'settings', component: UserSettingsComponent },
-  { path: 'editor', children: [
+  { path: 'settings', component: UserSettingsComponent, canActivate: [authenticationGuard] },
+  {
+    path: 'editor',
+    canActivateChild: [authenticationGuard],
+    children: [
     { path: '', component: EditorComponent },
     { path: ':slug', component: EditorComponent }
     ]
@@ -37,6 +41,7 @@ const routes: Routes = [
   },
   {
     path: 'my-profile',
+    canActivate: [authenticationGuard],
     children: [
       {
         path: '', component: ProfileComponent,
@@ -49,7 +54,7 @@ const routes: Routes = [
     ],
 
   },
-  { path: '**', redirectTo: ''}
+  { path: '**', redirectTo: '/' }
 ];
 
 @NgModule({
diff --git a/frontend/src/app/common/guards/authentication.guard.spec.ts b/frontend/src/app/common/guards/authentication.guard.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authenticationGuard } from './authentication.guard';
+
+describe('authenticationGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => authenticationGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/common/guards/authentication.guard.ts b/frontend/src/app/common/guards/authentication.guard.ts
@@ -0,0 +1,17 @@
+import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { inject } from "@angular/core";
+import { AuthenticationService } from "../services/utils/authentication.service";
+
+export const authenticationGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const authService = inject(AuthenticationService);
+  const router = inject(Router);
+  if (authService.currentUserToken) {
+    return true;
+  } else {
+    return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } })
+  }
+};
+
+export const constructLoginUrlTree: (router: Router) => UrlTree = (router) => {
+  return router.createUrlTree(['/login'], { queryParams: { returnUrl: router.url } });
+}
diff --git a/frontend/src/app/pages/article/article-comment/article-comments.component.html b/frontend/src/app/pages/article/article-comment/article-comments.component.html
@@ -1,16 +1,25 @@
 <div class="row">
   <div class="col-xs-12 col-md-8 offset-md-2">
-    <form class="card comment-form">
+    <form class="card comment-form" *ngIf="currentUser">
       <div class="card-block">
         <textarea [formControl]="newCommentControl" class="form-control" placeholder="Write a comment..." rows="3">
         </textarea>
       </div>
       <div class="card-footer">
-        <img [src]="currentUser?.image || DEFAULT_PROFILE_IMAGE" class="comment-author-img"/>
+        <img [src]="currentUser.image || DEFAULT_PROFILE_IMAGE" class="comment-author-img"/>
         <button type="button" class="btn btn-sm btn-primary" (click)="addComment()">Post Comment</button>
       </div>
     </form>
 
+    <ng-container *ngIf="!currentUser">
+      <p>
+        <a routerLink="/login" [queryParams]="loginUrlTree.queryParams">Sign in</a>
+        or
+        <a routerLink="/register">sign up</a>
+        to add comments on this article.
+      </p>
+    </ng-container>
+
     <ng-container *ngIf="comments">
       <ng-container *ngFor="let comment of comments" [ngTemplateOutlet]="singleComment"
                     [ngTemplateOutletContext]="{ $implicit: comment }"></ng-container>
diff --git a/frontend/src/app/pages/article/article-comment/article-comments.component.ts b/frontend/src/app/pages/article/article-comment/article-comments.component.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { ArticleService } from "../../../common/services/api/article.service";
 import { ArticleComment } from "../../../common/models/api/comment.model";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router, UrlTree } from "@angular/router";
 import { AuthenticationService } from "../../../common/services/utils/authentication.service";
 import { FormControl } from "@angular/forms";
 import { DEFAULT_PROFILE_IMAGE } from "../../../common/constants/default.constant";
 import { User } from "../../../common/models/api/user.model";
+import { constructLoginUrlTree } from "../../../common/guards/authentication.guard";
 
 @Component({
   selector: 'app-article-comments',
@@ -17,15 +18,17 @@ export class ArticleCommentsComponent {
   public currentUser?: User;
   public comments: ArticleComment[] = [];
   public newCommentControl = new FormControl('');
-
   private _articleSlug: string;
+  public loginUrlTree: UrlTree;
 
   constructor(
     private readonly _activatedRoute: ActivatedRoute,
     private readonly _articleService: ArticleService,
-    private readonly _authService: AuthenticationService
+    private readonly _authService: AuthenticationService,
+    private readonly _router: Router
   ) {
     this._articleSlug = this._activatedRoute.snapshot.params['slug'];
+    this.loginUrlTree = constructLoginUrlTree(_router);
     this._loadComments();
     this._getCurrentUser();
   }
diff --git a/frontend/src/app/pages/article/article.component.ts b/frontend/src/app/pages/article/article.component.ts
@@ -4,6 +4,7 @@ import { ArticleService } from "../../common/services/api/article.service";
 import { ActivatedRoute, Router } from "@angular/router";
 import { AuthenticationService } from "../../common/services/utils/authentication.service";
 import { ProfileService } from "../../common/services/api/profile.service";
+import { constructLoginUrlTree } from "../../common/guards/authentication.guard";
 
 @Component({
   selector: 'app-article',
@@ -52,12 +53,22 @@ export class ArticleComponent {
     if (!this.article) return;
 
     if (favorited) {
-      this._articleService.favoriteArticle(this.article.slug).subscribe(response => {
-        this.article = response.article;
+      this._articleService.favoriteArticle(this.article.slug).subscribe({
+        next: response => {
+          this.article = response.article;
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     } else {
-      this._articleService.unfavoriteArticle(this.article.slug).subscribe(response => {
-        this.article = response.article;
+      this._articleService.unfavoriteArticle(this.article.slug).subscribe({
+        next: response => {
+          this.article = response.article;
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     }
   }
@@ -66,12 +77,22 @@ export class ArticleComponent {
     if (!this.article) return;
 
     if (followed) {
-      this._profileService.followUser(this.article.author.username).subscribe(response => {
-        this.article!.author = response?.profile;
+      this._profileService.followUser(this.article.author.username).subscribe({
+        next: response => {
+          this.article!.author = response.profile;
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     } else {
-      this._profileService.unfollowUser(this.article.author.username).subscribe(response => {
-        this.article!.author = response?.profile;
+      this._profileService.unfollowUser(this.article.author.username).subscribe({
+        next: response => {
+          this.article!.author = response.profile;
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     }
   }
diff --git a/frontend/src/app/pages/article/feed/articles-feed.component.html b/frontend/src/app/pages/article/feed/articles-feed.component.html
diff --git a/frontend/src/app/pages/article/feed/articles-feed.component.scss b/frontend/src/app/pages/article/feed/articles-feed.component.scss
diff --git a/frontend/src/app/pages/article/feed/articles-feed.component.spec.ts b/frontend/src/app/pages/article/feed/articles-feed.component.spec.ts
diff --git a/frontend/src/app/pages/article/feed/articles-feed.component.ts b/frontend/src/app/pages/article/feed/articles-feed.component.ts
@@ -4,13 +4,15 @@ import { ArticleService } from "../../../common/services/api/article.service";
 import { Article, ArticlesResponse, QueryArticlesParams } from "../../../common/models/api/article.model";
 import { Observable } from "rxjs";
 import { QUERY_PAGE_SIZE } from "../../../common/constants/default.constant";
+import { Router } from "@angular/router";
+import { constructLoginUrlTree } from "../../../common/guards/authentication.guard";
 
 @Component({
   selector: 'app-feed',
-  templateUrl: './feed.component.html',
-  styleUrl: './feed.component.scss'
+  templateUrl: './articles-feed.component.html',
+  styleUrl: './articles-feed.component.scss'
 })
-export class FeedComponent implements OnChanges {
+export class ArticlesFeedComponent implements OnChanges {
   @Input() feedMenuId?: FeedMenuEnum;
   @Input() queryParams?: QueryArticlesParams = {};
 
@@ -19,7 +21,8 @@ export class FeedComponent implements OnChanges {
   public totalPages = 0;
 
   constructor(
-    private readonly _articleService: ArticleService
+    private readonly _articleService: ArticleService,
+    private readonly _router: Router
   ) {
   }
 
@@ -67,12 +70,22 @@ export class FeedComponent implements OnChanges {
     if (!this.articles) return;
 
     if (article.favorited) {
-      this._articleService.unfavoriteArticle(article.slug).subscribe(response => {
-        this._setSingleArticle(response.article);
+      this._articleService.unfavoriteArticle(article.slug).subscribe({
+        next: (response) => {
+          this._setSingleArticle(response.article);
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     } else {
-      this._articleService.favoriteArticle(article.slug).subscribe(response => {
-        this._setSingleArticle(response.article);
+      this._articleService.favoriteArticle(article.slug).subscribe({
+        next: (response) => {
+          this._setSingleArticle(response.article);
+        },
+        error: () => {
+          this._router.navigateByUrl(constructLoginUrlTree(this._router));
+        }
       });
     }
   }
diff --git a/frontend/src/app/pages/login/login.component.spec.ts b/frontend/src/app/pages/login/login.component.spec.ts
@@ -5,7 +5,7 @@ import { CommonModule } from "@angular/common";
 import { ReactiveFormsModule } from "@angular/forms";
 import { AuthenticationService } from "../../common/services/utils/authentication.service";
 import { UserService } from "../../common/services/api/user.service";
-import { Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { LoginUserPayload, User } from "../../common/models/api/user.model";
 import { of } from "rxjs";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@@ -17,6 +17,7 @@ describe('LoginComponent', () => {
   let mockUser: User;
   let spyUserService: Partial<jasmine.SpyObj<UserService>>;
   let spyRouter: Partial<jasmine.SpyObj<Router>>;
+  let mockActivatedRoute: Partial<ActivatedRoute>;
 
   beforeEach(()=> {
     mockUser = {
@@ -33,6 +34,14 @@ describe('LoginComponent', () => {
     spyRouter = {
       navigateByUrl: jasmine.createSpy('navigateByUrl')
     }
+
+    mockActivatedRoute = {
+      snapshot: {
+        queryParams: {
+          returnUrl: '/'
+        }
+      } as any
+    }
   })
 
   beforeEach(async () => {
@@ -44,8 +53,9 @@ describe('LoginComponent', () => {
       ],
       providers: [
         AuthenticationService,
-        {provide: UserService, useValue: spyUserService },
-        {provide: Router, useValue: spyRouter}
+        { provide: UserService, useValue: spyUserService },
+        { provide: Router, useValue: spyRouter },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute }
       ],
       schemas:[
         CUSTOM_ELEMENTS_SCHEMA
diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts
@@ -5,7 +5,7 @@ import { UserService } from "../../common/services/api/user.service";
 import { LoginUserPayload, LoginUserResponse } from "../../common/models/api/user.model";
 import { HttpErrorResponse } from "@angular/common/http";
 import { AuthenticationService } from "../../common/services/utils/authentication.service";
-import { Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
   selector: 'app-login',
@@ -20,7 +20,8 @@ export class LoginComponent {
   constructor(
     private readonly _userService: UserService,
     private readonly _authenticationService: AuthenticationService,
-    private readonly _router: Router
+    private readonly _router: Router,
+    private readonly _activatedRoute: ActivatedRoute
   ) {
     this.mainForm = this._constructMainForm();
   }
@@ -42,9 +43,9 @@ export class LoginComponent {
 
     this._userService.userLogin(payload).subscribe({
       next: (response: LoginUserResponse) => {
-        // If successful, store the user and redirect to the home page
+        // If successful, store the user and redirect to the previous page
         this._authenticationService.login(response.user);
-        this._router.navigateByUrl('/');
+        this._router.navigateByUrl(this._activatedRoute.snapshot.queryParams['returnUrl'] || '/');
       },
       error: (err: HttpErrorResponse) => {
         this.errors = err.error.errors;
diff --git a/frontend/src/app/pages/pages.module.ts b/frontend/src/app/pages/pages.module.ts
@@ -8,7 +8,7 @@ import { SharedModule } from "../shared/shared.module";
 import { RouterModule } from "@angular/router";
 import { UserSettingsComponent } from './user-settings/user-settings.component';
 import { EditorComponent } from './editor/editor.component';
-import { FeedComponent } from './home/feed/feed.component';
+import { ArticlesFeedComponent } from './article/feed/articles-feed.component';
 import { ArticleComponent } from './article/article.component';
 import { ArticleMetaComponent } from './article/article-meta/article-meta.component';
 import { ProfileComponent } from './profile/profile.component';
@@ -24,7 +24,7 @@ import { MarkdownModule } from "ngx-markdown";
     HomeComponent,
     UserSettingsComponent,
     EditorComponent,
-    FeedComponent,
+    ArticlesFeedComponent,
     ArticleComponent,
     ArticleMetaComponent,
     ProfileComponent,
diff --git a/frontend/src/app/pages/profile/profile.component.html b/frontend/src/app/pages/profile/profile.component.html
@@ -43,11 +43,11 @@ <h4>{{ profile.username }}</h4>
             <ul class="nav nav-pills outline-active">
               <li class="nav-item">
                 <a class="nav-link" [ngClass]="{'active': feedQueryParams?.author}"
-                   routerLink="/profile/{{profile.username}}">My Articles</a>
+                   routerLink="/profile/{{profile.username}}"> {{ profile.username }}'s Articles</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" [ngClass]="{'active': feedQueryParams?.favorited}"
-                   routerLink="/profile/{{profile.username}}/favorites">Favorited Articles</a>
+                   routerLink="/profile/{{profile.username}}/favorites">{{ profile.username }}'s Favorited Articles</a>
               </li>
             </ul>
           </div>
diff --git a/frontend/src/app/pages/profile/profile.component.ts b/frontend/src/app/pages/profile/profile.component.ts
diff --git a/frontend/src/app/pages/register/register.component.ts b/frontend/src/app/pages/register/register.component.ts
