Minor Release

README.md

@@ -11,6 +11,7 @@
 [![Angular](https://img.shields.io/badge/Angular-DD0031?logo=angular)](https://angular.io/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 
+[![Release](https://github.com/danieljancar/votevault/actions/workflows/release.yml/badge.svg)](https://github.com/danieljancar/votevault/actions/workflows/release.yml)
 [![Linter](https://github.com/danieljancar/votevault/actions/workflows/lint.yml/badge.svg)](https://github.com/danieljancar/votevault/actions/workflows/lint.yml)
 [![Formatting](https://github.com/danieljancar/votevault/actions/workflows/format.yml/badge.svg)](https://github.com/danieljancar/votevault/actions/workflows/format.yml)
 

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

@@ -1,4 +1,8 @@
-<app-navbar />
-<router-outlet />
-<div class="mb-20"></div>
-<app-disclaimer />
+<div class="min-h-screen flex flex-col">
+  <app-navbar />
+  <div class="flex-grow">
+    <router-outlet />
+    <app-disclaimer />
+  </div>
+  <app-footer class="w-full" />
+</div>

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

@@ -1,27 +1,29 @@
 import { TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
-import { NxWelcomeComponent } from './nx-welcome.component'
 import { RouterModule } from '@angular/router'
+import { AuthService } from './core/auth.service'
+import { HttpClient } from '@angular/common/http'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
+      imports: [AppComponent, RouterModule.forRoot([])],
+      providers: [
+        {
+          provide: AuthService,
+          useValue: {},
+        },
+        {
+          provide: HttpClient,
+          useValue: {},
+        },
+      ],
     }).compileComponents()
   })
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent)
-    fixture.detectChanges()
-    const compiled = fixture.nativeElement as HTMLElement
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome frontend',
-    )
-  })
-
-  it(`should have as title 'frontend'`, () => {
+  it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent)
     const app = fixture.componentInstance
-    expect(app.title).toEqual('frontend')
+    expect(app).toBeTruthy()
   })
 })

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

@@ -2,10 +2,16 @@ 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'
+import { FooterComponent } from './shared/navigation/footer/footer.component'
 
 @Component({
   standalone: true,
-  imports: [RouterModule, NavbarComponent, DisclaimerComponent],
+  imports: [
+    RouterModule,
+    NavbarComponent,
+    DisclaimerComponent,
+    FooterComponent,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/frontend/src/app/core/stellar/getVote.service.ts

@@ -25,6 +25,8 @@ export class GetVoteService {
     sourceKeypair: Keypair,
     voteId: string,
   ) {
+    this.resetData()
+
     try {
       const contract = new Contract(this.contractId)
 
@@ -85,4 +87,11 @@ export class GetVoteService {
       errorMessage: this.errorMessage,
     }
   }
+
+  resetData() {
+    this.dataArr = []
+    this.isLoading = true
+    this.hasError = false
+    this.errorMessage = ''
+  }
 }

apps/frontend/src/app/core/stellar/getVoteOption.service.ts

@@ -25,6 +25,8 @@ export class GetVoteOptionService {
     sourceKeypair: Keypair,
     voteId: string,
   ) {
+    this.resetData()
+
     try {
       const contract = new Contract(this.contractId)
 
@@ -88,4 +90,11 @@ export class GetVoteOptionService {
       errorMessage: this.errorMessage,
     }
   }
+
+  resetData() {
+    this.optionsArr = []
+    this.isLoading = true
+    this.hasError = false
+    this.errorMessage = ''
+  }
 }

apps/frontend/src/app/core/stellar/getVoteResults.service.ts

@@ -25,6 +25,8 @@ export class GetVoteResultsService {
     sourceKeypair: Keypair,
     voteId: string,
   ) {
+    this.resetData()
+
     try {
       const contract = new Contract(this.contractId)
 
@@ -93,4 +95,11 @@ export class GetVoteResultsService {
       errorMessage: this.errorMessage,
     }
   }
+
+  resetData() {
+    this.dataArr = []
+    this.isLoading = true
+    this.hasError = false
+    this.errorMessage = ''
+  }
 }

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

@@ -87,7 +87,6 @@
       </div>
     </div>
 
-    <!-- Right Side Image -->
     <div
       class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32"
     >
@@ -97,10 +96,11 @@
         >
           <img
             alt="Vote results app preview"
-            class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
+            class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10 cursor-pointer hover:ring-2 hover:ring-indigo-600/50"
             height="400"
             ngSrc="results-preview.png"
             priority="true"
+            routerLink="voting/r/4a6cdc19-33ec-4f6d-adf1-a71a30370027"
             width="890"
           />
         </div>

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

@@ -20,11 +20,29 @@ describe('HomeComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  test('should search vote', inject([Router], (mockRouter: Router) => {
-    const spyRouter = spyOn(mockRouter, 'navigate').and.stub()
-
+  test('searchVote', () => {
+    const router = TestBed.inject(Router)
+    const navigateSpy = jest.spyOn(router, 'navigate')
     component.voteId.setValue('123')
     component.searchVote()
-    expect(spyRouter.calls.first().args[0]).toContain('voting' && '123')
-  }))
+    expect(navigateSpy).toHaveBeenCalledWith(['/voting', '123'])
+  })
+
+  test('createVote', () => {
+    const router = TestBed.inject(Router)
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    component.createVote()
+    expect(navigateSpy).toHaveBeenCalledWith(['/voting', 'create'])
+  })
+
+  test('pasteVoteId', async () => {
+    const clipboard = {
+      readText: jest.fn().mockResolvedValue('123'),
+    }
+    Object.defineProperty(navigator, 'clipboard', {
+      value: clipboard,
+    })
+    await component.pasteVoteId()
+    expect(component.voteId.value).toBe('123')
+  })
 })

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

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
 import { FormControl, ReactiveFormsModule } from '@angular/forms'
-import { Router } from '@angular/router'
+import { Router, RouterLink } from '@angular/router'
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, NgOptimizedImage],
+  imports: [CommonModule, ReactiveFormsModule, NgOptimizedImage, RouterLink],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })

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

@@ -68,10 +68,12 @@
           [disabled]="loginForm.invalid"
           [ngClass]="{
             'bg-gray-700 hover:bg-gray-700': loginForm.invalid,
-            'bg-indigo-600 hover:bg-indigo-700': loginForm.valid
+            'bg-indigo-600 hover:bg-indigo-700': loginForm.valid,
           }"
         >
-          Log in
+          @if (isLoading){
+          <app-button-spinner />
+          }@else{ Log in }
         </button>
       </div>
     </form>

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

@@ -1,21 +1,38 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { LoginComponent } from './login.component'
+import { AuthService } from '../../core/auth.service'
+import { ChangeDetectorRef } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
 
 describe('LoginComponent', () => {
   let component: LoginComponent
   let fixture: ComponentFixture<LoginComponent>
+  let authService: AuthService
 
   beforeEach(async () => {
+    const mockAuthService = {
+      loginUsingPrivateKey: jest.fn().mockResolvedValue(true),
+    }
     await TestBed.configureTestingModule({
-      imports: [LoginComponent],
+      imports: [ReactiveFormsModule, LoginComponent],
+      providers: [
+        { provide: AuthService, useValue: mockAuthService },
+        ChangeDetectorRef,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(LoginComponent)
     component = fixture.componentInstance
+    authService = TestBed.inject(AuthService)
     fixture.detectChanges()
   })
 
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('should call loginUsingPrivateKey on authService', async () => {
+    await component.logInUsingPrivateKey()
+    expect(authService.loginUsingPrivateKey).toHaveBeenCalled()
+  })
 })

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

@@ -12,6 +12,7 @@ import { ErrorComponent } from '../../shared/feedback/error/error.component'
 import { LoadingComponent } from '../../shared/feedback/loading/loading.component'
 import { SuccessComponent } from '../../shared/feedback/success/success.component'
 import { RouterLink } from '@angular/router'
+import { ButtonSpinnerComponent } from '../../shared/feedback/button-spinner/button-spinner.component'
 
 @Component({
   selector: 'app-login',
@@ -25,6 +26,7 @@ import { RouterLink } from '@angular/router'
     LoadingComponent,
     SuccessComponent,
     RouterLink,
+    ButtonSpinnerComponent,
   ],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
@@ -34,6 +36,7 @@ export class LoginComponent {
   protected hasError = false
   protected errorMessage = ''
   protected successMessage = ''
+  protected isLoading = false
 
   constructor(
     private authService: AuthService,
@@ -46,6 +49,7 @@ export class LoginComponent {
   }
 
   async logInUsingPrivateKey() {
+    this.isLoading = true
     const privateKey = this.loginForm.value.privateKey
     const couldLogin = await this.authService.loginUsingPrivateKey(privateKey)
 
@@ -59,6 +63,7 @@ export class LoginComponent {
         'Failed to login. Please check your private key or register a new account.'
       this.loginForm.reset()
     }
+    this.isLoading = false
   }
 
   errorAction = (): void => {

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

@@ -1,6 +1,4 @@
-@if (isLoading) {
-<app-loading aria-live="polite" aria-label="Loading..."></app-loading>
-} @else { @if (hasError) {
+@if (hasError) {
 <app-error
   [title]="'Error occurred'"
   [message]="this.errorMessage"
@@ -129,13 +127,15 @@ <h1 class="font-bold">Your public and secret keys</h1>
           class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           type="submit"
           (click)="fundAccount()"
-          [disabled]="!publicKey || !secretKey"
+          [disabled]="!publicKey || !secretKey || isLoading"
           [ngClass]="{
             'bg-gray-700 hover:bg-gray-700': !publicKey || !secretKey,
             'bg-indigo-600 hover:bg-indigo-700': publicKey && secretKey
           }"
         >
-          Register
+          @if (isLoading){
+          <app-button-spinner />
+          }@else{ Register }
         </button>
       </div>
     </form>
@@ -159,4 +159,4 @@ <h1 class="font-bold">Your public and secret keys</h1>
     </p>
   </div>
 </div>
-} }
+}

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

@@ -1,21 +1,42 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { RegisterComponent } from './register.component'
+import { AuthService } from '../../core/auth.service'
+import { ChangeDetectorRef } from '@angular/core'
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent
   let fixture: ComponentFixture<RegisterComponent>
+  let authService: AuthService
 
   beforeEach(async () => {
+    const mockAuthService = {
+      generateKeypair: jest.fn().mockReturnValue({
+        publicKey: jest.fn().mockReturnValue('publicKey'),
+        secret: jest.fn().mockReturnValue,
+      }),
+      fundAccount: jest.fn().mockResolvedValue(true),
+    }
+
     await TestBed.configureTestingModule({
       imports: [RegisterComponent],
+      providers: [
+        { provide: AuthService, useValue: mockAuthService },
+        ChangeDetectorRef,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(RegisterComponent)
     component = fixture.componentInstance
+    authService = TestBed.inject(AuthService)
     fixture.detectChanges()
   })
 
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('should generate keypair', () => {
+    component.generateKeypair()
+    expect(authService.generateKeypair).toHaveBeenCalled()
+  })
 })