feat: add cookie disclaimer banner (#68)

* feat: add cookie disclaimer

* fix: fix mistakes in cookie disclaimer.

* fix: improve cookie banner grammar

---------

Co-authored-by: Daniel Jancar <[email protected]>

apps/frontend/src/app/app.component.html

@@ -1,3 +1,4 @@
 <app-navbar />
 <router-outlet />
 <div class="mb-20"></div>
+<app-disclaimer />

apps/frontend/src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NavbarComponent } from './shared/navigation/navbar/navbar.component'
+import { DisclaimerComponent } from './shared/navigation/disclaimer/disclaimer.component'
 
 @Component({
   standalone: true,
-  imports: [RouterModule, NavbarComponent],
+  imports: [RouterModule, NavbarComponent, DisclaimerComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/frontend/src/app/features/home/home.component.spec.ts

@@ -1,5 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing'
 import { HomeComponent } from './home.component'
+import { Router } from '@angular/router'
 
 describe('HomeComponent', () => {
   let component: HomeComponent
@@ -18,4 +19,12 @@ describe('HomeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  test('should search vote', inject([Router], (mockRouter: Router) => {
+    const spyRouter = spyOn(mockRouter, 'navigate').and.stub()
+
+    component.voteId.setValue('123')
+    component.searchVote()
+    expect(spyRouter.calls.first().args[0]).toContain('voting' && '123')
+  }))
 })

apps/frontend/src/app/shared/navigation/disclaimer/disclaimer.component.html

@@ -0,0 +1,22 @@
+@if (!hasAcceptedCookies()) {
+<div class="pointer-events-none fixed inset-x-0 bottom-0 px-6 pb-6">
+  <div
+    class="pointer-events-auto ml-auto max-w-xl rounded-xl bg-white p-6 shadow-lg ring-1 ring-gray-900/10"
+  >
+    <p class="text-sm leading-6 text-gray-900">
+      We use cookies to enhance your experience. Any data, such as your wallet
+      address, is only shared between you and the Stellar Network. By using our
+      site, you consent to this.
+    </p>
+    <div class="mt-4 flex items-center gap-x-5">
+      <button
+        (click)="acceptCookies()"
+        type="button"
+        class="rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+      >
+        Accept
+      </button>
+    </div>
+  </div>
+</div>
+}

apps/frontend/src/app/shared/navigation/disclaimer/disclaimer.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { DisclaimerComponent } from './disclaimer.component'
+
+describe('DisclaimerComponent', () => {
+  let component: DisclaimerComponent
+  let fixture: ComponentFixture<DisclaimerComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DisclaimerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DisclaimerComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/frontend/src/app/shared/navigation/disclaimer/disclaimer.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core'
+import { CookieService } from 'ngx-cookie-service'
+import { RouterLink } from '@angular/router'
+
+@Component({
+  selector: 'app-disclaimer',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './disclaimer.component.html',
+  styleUrl: './disclaimer.component.css',
+})
+export class DisclaimerComponent {
+  constructor(private cookieService: CookieService) {}
+  acceptCookies() {
+    this.cookieService.set('disclaimer', 'accepted', 365)
+  }
+
+  hasAcceptedCookies() {
+    return this.cookieService.check('disclaimer')
+  }
+}