feat: update authentication elements

client/api.ts

@@ -37,21 +37,24 @@ api.post('/auth/login', async (req, res) => {
   } else {
     const user = {
       username: response.user.username,
-      email: response.user.email
+      email: response.user.email,
+      token: response.jwt
     };
-    res.cookie('authentication', response.jwt, { maxAge: 600 * 1000, httpOnly: true, sameSite: 'lax' });
-    res.cookie('authenticatedUser', user, { maxAge: 600 * 1000, httpOnly: true, sameSite: 'lax' });
+    res.cookie('authentication', user, { maxAge: 600 * 1000, httpOnly: true, sameSite: 'strict', secure: true });
     res.send(user);
   }
 });
 
 api.get('/auth/isAuthenticated', (req, res) => {
-  res.status(200).send(!!req.cookies.authentication);
+  if (req.cookies.authentication) {
+    res.status(200).send(req.cookies.authentication);
+  } else {
+    res.sendStatus(401);
+  }
 });
 
 api.get('/auth/signOut', (req, res) => {
-  res.cookie('authentication', '', { maxAge: -1, httpOnly: true, sameSite: 'lax' });
-  res.cookie('authenticatedUser', '', { maxAge: -1, httpOnly: true, sameSite: 'lax' });
+  res.cookie('authentication', '', { maxAge: -1, httpOnly: true, sameSite: 'strict' });
   res.status(200).send({status: 'Signed out'});
 });
 

client/src/app/app.module.ts

@@ -11,6 +11,7 @@ import 'prismjs';
 import 'prismjs/components/prism-typescript.min.js';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
 import 'prismjs/plugins/line-highlight/prism-line-highlight.js';
+import { AuthenticationService } from './pages/authentication/data-access/authentication.service';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,7 @@ import 'prismjs/plugins/line-highlight/prism-line-highlight.js';
     HttpClientModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [AuthenticationService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

client/src/app/pages/authentication/data-access/authentication.service.ts

@@ -12,7 +12,7 @@ export class AuthenticationService {
 
   private AUTH_URL = Constants.API_URL + '/auth';
 
-  private currentUser$: Subject<any> = new BehaviorSubject(null as any);
+  private currentUser$: Subject<any> = new BehaviorSubject(null);
 
   private redirectUrl: string = '/';
   private redirectParams: any = null;
@@ -22,15 +22,13 @@ export class AuthenticationService {
   }
 
   private checkCookie(): Observable<any> {
-    return this.http.get<User>(`${this.AUTH_URL}/isAuthenticated`).pipe(
+    return this.http.get<User>(`${this.AUTH_URL}/isAuthenticated`, { withCredentials: true }).pipe(
         tap((user) => this.currentUser$.next(user))
     );
   }
 
   public isAuthenticated(): Observable<boolean> {
-    return this.currentUser$.pipe(map((user) => {
-      return user !== null && user !== false;
-    }));
+    return this.currentUser$.pipe(map((user) => user != null));
   }
 
   public setRedirectUrl(url: string): void {

client/src/app/pages/authentication/feature/authentication/authentication.component.html

@@ -1,19 +1,48 @@
-<div class="prose dark:prose-invert prose-2xl">
-    <p>USER NOT AUTHENTICATED!</p>
+<app-header></app-header>
 
-    <button routerLink="/dashboard"> Back</button>
-    <form [formGroup]="loginForm" (ngSubmit)="onLogIn()">
-        <div class="mb-3">
-            <label for="identifier">Identifier</label>
-            <input type="identifier" class="form-control" id="identifier" placeholder="you@example.com" formControlName="identifier" />
+<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full space-y-8">
+      <div>
+        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
+        <p class="mt-2 text-center text-sm text-gray-600">
+          Or
+          <a href="/dashboard" class="font-medium text-gray-600 hover:text-gray-500 underline underline-offset-4 decoration-2"> create a new one. </a>
+        </p>
+      </div>
+      <form [formGroup]="loginForm" (ngSubmit)="onLogIn()" class="mt-8 space-y-6" method="POST">
+        <input type="hidden" name="remember" value="true">
+        <div class="rounded-md shadow-sm -space-y-px">
+          <div>
+            <label for="identifier" class="sr-only">Identifier</label>
+            <input id="identifier" name="identifier" type="identifier" formControlName="identifier" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-gray-500 focus:border-gray-500 focus:z-10 sm:text-sm" placeholder="Identifier">
+          </div>
+          <div>
+            <label for="password" class="sr-only">Password</label>
+            <input id="password" name="password" type="password" formControlName="password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-gray-500 focus:border-gray-500 focus:z-10 sm:text-sm" placeholder="Password">
+          </div>
         </div>
-        <div class="mb-3">
-            <label for="password">Password</label>
-            <input type="password" class="form-control" id="password" formControlName="password" />
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300 rounded">
+            <label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
+          </div>
+
+          <div class="text-sm">
+            <a href="#" class="font-medium text-gray-600 hover:text-gray-500"> Forgot your password? </a>
+          </div>
         </div>
-
-        <button class="btn btn-primary btn-lg btn-block" type="submit">
-            Log in
-        </button>
-    </form>
-</div>
+
+        <div>
+          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+              <svg class="h-5 w-5 text-gray-500 group-hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
+              </svg>
+            </span>
+            Sign in
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>

client/src/app/pages/authentication/feature/authentication/authentication.component.ts

@@ -20,10 +20,10 @@ export class AuthenticationComponent implements OnInit {
   ngOnInit(): void {}
 
   public onLogIn() {
-    const login = this.loginForm.get('identifier')?.value;
+    const identifier = this.loginForm.get('identifier')?.value;
     const password = this.loginForm.get('password')?.value;
     this.authService.setRedirectUrl('/dashboard');
-    this.authService.login(login, password);
+    this.authService.login(identifier, password);
   }
 
 }

client/src/app/pages/authentication/feature/authentication/authentication.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { AuthenticationComponent } from './authentication.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { AuthenticationRoutingModule } from './authentication-routing.module';
+import { HeaderModule } from 'src/app/shared/ui/header/header.module';
 
 
 
@@ -13,7 +14,8 @@ import { AuthenticationRoutingModule } from './authentication-routing.module';
   imports: [
     CommonModule,
     AuthenticationRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    HeaderModule
   ]
 })
 export class AuthenticationModule { }

client/src/app/pages/blog/data-access/blog.service.ts

@@ -8,16 +8,16 @@ import { Article } from '../model/article';
 })
 export class BlogService {
 
-  private _articles = 'api/articles';
-  private _article = 'api/articles?filters[slug]=';
+  private _articles = '/api/articles';
+  private _article = '/api/articles?filters[slug]=';
 
   constructor(private http: HttpClient) { }
 
   getArticles() {
-    return this.http.get<Article[]>(environment.apiUrl + this._articles);
+    return this.http.get<Article[]>(environment.strapiUrl + this._articles);
   }
 
   getArticle(articleSlug: string) {
-    return this.http.get<Article>(environment.apiUrl + this._article + articleSlug);
+    return this.http.get<Article>(environment.strapiUrl + this._article + articleSlug);
   }
 }

client/src/app/pages/dashboard/data-access/dashboard-guard.service.ts

@@ -11,14 +11,11 @@ export class DashboardGuardService implements CanActivate {
   constructor(private authService: AuthenticationService, private router: Router) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
-    console.log('Guard')
     return this.authService.isAuthenticated().pipe(
       tap((auth) => {
-        if (!auth) {
+        if (auth === false) {
           this.authService.setRedirectUrl(state.url);
           this.router.navigate(['/authentication']);
-        } else {
-          console.log('User authorized.')
         }
       })
     );

client/src/app/pages/dashboard/feature/favourites/favourites.component.html

@@ -1,2 +1,3 @@
-<p>favourites works!</p>
-<h1>Welcome to dashboard</h1>
+<app-header></app-header>
+
+<h1 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Dashboard View Authorized.</h1>

client/src/app/pages/dashboard/feature/favourites/favourites.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FavouritesComponent } from './favourites.component';
 import { FavouritesRoutingModule } from './favourites-routing.module';
+import { HeaderModule } from 'src/app/shared/ui/header/header.module';
 
 
 
@@ -11,7 +12,8 @@ import { FavouritesRoutingModule } from './favourites-routing.module';
   ],
   imports: [
     FavouritesRoutingModule,
-    CommonModule
+    CommonModule,
+    HeaderModule
   ]
 })
 export class FavouritesModule { }

client/src/app/shared/model/constants.ts

@@ -1,3 +1,5 @@
+import { environment } from "src/environments/environment";
+
 export class Constants {
-    public static API_URL: string = 'http://localhost:4200' + '/api';
+    public static API_URL: string = environment.apiUrl + '/api';
 }

client/src/app/shared/ui/header/header.component.html

@@ -4,12 +4,12 @@
         <div class="hidden space-x-12 items-center md:flex">
             <a href="#" class="hover:underline hover:underline-offset-4 hover:decoration-4">Home<span></span></a>
             <a href="#porfolio" class="hover:underline hover:underline-offset-4 hover:decoration-4">Portfolio</a>
-            <a href="/blog" class="hover:underline hover:underline-offset-4 hover:decoration-4">Blog</a>
+            <a [routerLink]="['/blog']" class="hover:underline hover:underline-offset-4 hover:decoration-4">Blog</a>
             <a href="#contact" class="hover:underline hover:underline-offset-4 hover:decoration-4">Contact</a>
-            <a *ngIf="isAuthenticated$ | async" href="/dashboard">
+            <a *ngIf="isAuthenticated$ | async" [routerLink]="['/dashboard']">
               <button class="px-6 py-2 bg-gray-800 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">Dashboard</button>
             </a>
-            <a *ngIf="!(isAuthenticated$ | async)" href="/authentication">
+            <a *ngIf="!(isAuthenticated$ | async)" [routerLink]="['/authentication']">
               <button class="px-6 py-2 bg-gray-800 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">Log in</button>
             </a>
         </div>
@@ -44,13 +44,13 @@
 
         <a href="#porfolio" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Portfolio</a>
 
-        <a href="#blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Blog</a>
+        <a [routerLink]="['/blog']" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Blog</a>
 
         <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a>
       </div>
 
-      <a *ngIf="!(isAuthenticated$ | async)" href="/authentication" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Log in </a>
-      <a *ngIf="isAuthenticated$ | async" href="/dashboard" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Dashboard </a>
+      <a *ngIf="!(isAuthenticated$ | async)" [routerLink]="['/authentication']" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Log in </a>
+      <a *ngIf="isAuthenticated$ | async" [routerLink]="['/dashboard']" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Dashboard </a>
     </div>
   </div>
 

client/src/app/shared/ui/header/header.module.ts

@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HeaderComponent } from './header.component';
+import { RouterModule } from '@angular/router';
 
 
 
 @NgModule({
   declarations: [HeaderComponent],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [HeaderComponent]
 })

client/src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  apiUrl: 'http://localhost:28002/'
+  strapiUrl: 'http://localhost:28002',
+  apiUrl: 'http://localhost:4200'
 };

client/src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:28002/'
+  strapiUrl: 'http://localhost:28002',
+  apiUrl: 'http://localhost:4200'
 };
 
 /*