feat(fonts): host fonts locally (#631)

cayacdev · Apr 16, 2023 · b6d173c · b6d173c
1 parent 983e3ee
commit b6d173c
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 18 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,7 +29,9 @@
     "@ngrx/store": "^15.4.0",
     "@ngrx/store-devtools": "^15.4.0",
     "chart.js": "^2.9.4",
+    "material-icons": "^1.13.4",
     "ng2-charts": "^2.4.3",
+    "roboto-fontface": "^0.10.0",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"

diff --git a/frontend/src/app/auth/auth.service.spec.ts b/frontend/src/app/auth/auth.service.spec.ts
@@ -0,0 +1,62 @@
+import { fakeAsync, TestBed, tick } from '@angular/core/testing'
+import { AuthService } from './auth.service'
+import { MockStore, provideMockStore } from '@ngrx/store/testing'
+import * as AuthActions from './store/auth.actions'
+
+describe('AuthService', () => {
+  let systemUnderTest: AuthService
+  let store: MockStore
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthService, provideMockStore({ initialState: {} })],
+    })
+
+    systemUnderTest = TestBed.inject(AuthService)
+    store = TestBed.inject(MockStore)
+  })
+
+  it('should be created', () => {
+    expect(systemUnderTest).toBeTruthy()
+  })
+
+  describe('setLogoutTimer', () => {
+    it('should dispatch Logout action after the expiration duration', fakeAsync(() => {
+      const expirationDuration = 5000
+      spyOn(store, 'dispatch').and.callThrough()
+
+      systemUnderTest.setLogoutTimer(expirationDuration)
+
+      expect(systemUnderTest['tokenExpirationTimer']).toBeDefined()
+      expect(store.dispatch).not.toHaveBeenCalledWith(new AuthActions.Logout())
+
+      tick(5000)
+
+      expect(store.dispatch).toHaveBeenCalledWith(new AuthActions.Logout())
+    }))
+  })
+
+  describe('clearLogoutTimer', () => {
+    it('should clear the timer', fakeAsync(() => {
+      const expirationDuration = 5000
+      spyOn(window, 'clearTimeout').and.callThrough()
+
+      systemUnderTest.setLogoutTimer(expirationDuration)
+
+      systemUnderTest.clearLogoutTimer()
+
+      expect(window.clearTimeout).toHaveBeenCalled()
+      expect(systemUnderTest['tokenExpirationTimer']).toBeNull()
+    }))
+
+    it('should not clear the timer if it has already expired', fakeAsync(() => {
+      const expirationDuration = 0
+      spyOn(window, 'clearTimeout').and.callThrough()
+
+      systemUnderTest.clearLogoutTimer()
+
+      expect(window.clearTimeout).not.toHaveBeenCalled()
+      expect(systemUnderTest['tokenExpirationTimer']).toBeUndefined()
+    }))
+  })
+})
diff --git a/frontend/src/app/auth/auth.service.ts b/frontend/src/app/auth/auth.service.ts
@@ -1,25 +1,25 @@
-import { Injectable } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Injectable } from '@angular/core'
+import { Store } from '@ngrx/store'
 
-import * as fromApp from '../store/app.reducer';
-import * as AuthActions from './store/auth.actions';
+import * as fromApp from '../store/app.reducer'
+import * as AuthActions from './store/auth.actions'
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
-  private tokenExpirationTimer: number;
+  private tokenExpirationTimer
 
   constructor(private store: Store<fromApp.AppState>) {}
 
   setLogoutTimer(expirationDuration: number): void {
     this.tokenExpirationTimer = setTimeout(() => {
-      this.store.dispatch(new AuthActions.Logout());
-    }, expirationDuration);
+      this.store.dispatch(new AuthActions.Logout())
+    }, expirationDuration)
   }
 
   clearLogoutTimer(): void {
     if (this.tokenExpirationTimer) {
-      clearTimeout(this.tokenExpirationTimer);
-      this.tokenExpirationTimer = null;
+      clearTimeout(this.tokenExpirationTimer)
+      this.tokenExpirationTimer = null
     }
   }
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -1,15 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang='en'>
 <head>
-  <meta charset="utf-8">
+  <meta charset='utf-8'>
   <title>CashboxFrontend</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="manifest" href="manifest.webmanifest">
-  <meta name="theme-color" content="#fafafa">
+  <base href='/'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link rel='icon' type='image/x-icon' href='favicon.ico'>
+  <link rel='manifest' href='manifest.webmanifest'>
+  <meta name='theme-color' content='#fafafa'>
 </head>
 <body>
 <app-root></app-root>

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -1,5 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 
+$roboto-font-path: "~roboto-fontface/fonts" !default;
+@import "roboto-fontface/css/roboto/sass/roboto-fontface";
+
+$material-icons-font-path: '~material-icons/iconfont/';
+@import 'material-icons/iconfont/material-icons.scss';
+
 html, body {
   height: 100%;
 }