refactor admin service to not require page reload

app/src/app/app.config.ts

@@ -2,7 +2,6 @@ import { ApplicationConfig, inject } from '@angular/core'
 import { provideRouter } from '@angular/router'
 import { appRoutes } from './app.routes'
 import { provideAnimations } from '@angular/platform-browser/animations'
-import { StorageService } from 'src/services/storage.service'
 import { LeaderboardService } from 'src/services/leaderboard.service'
 import { LogService } from 'src/services/log.service'
 import { MessageService } from 'primeng/api'
@@ -16,11 +15,11 @@ import { MatchService } from 'src/services/match.service'
 import { PlayerService } from 'src/services/player.service'
 
 export const adminkeyInterceptor: HttpInterceptorFn = (req, next) => {
-  const storageService = inject(StorageService)
-  if (storageService && storageService.hasAdminKey()) {
+  const adminService = inject(AdminService)
+  if (adminService && adminService.has()) {
     req = req.clone({
       setHeaders: {
-        'x-hdstmevents-adminkey': storageService.getAdminKey() ?? '',
+        'x-hdstmevents-adminkey': adminService.get() ?? '',
       },
     })
   }
@@ -32,7 +31,6 @@ export const appConfig: ApplicationConfig = {
     provideRouter(appRoutes),
     provideAnimations(),
     provideHttpClient(withInterceptors([adminkeyInterceptor])),
-    StorageService,
     LeaderboardService,
     LogService,
     MessageService,

app/src/app/weekly.component.ts

@@ -51,13 +51,13 @@ import { Match } from 'src/domain/match'
               ></tops-table>
             </ng-container>
             <ng-template #matches>
-              <match-bracket [matches]="vm.matches!" [players]="vm.players || []" [editable]="editMode"></match-bracket>
+              <match-bracket [matches]="vm.matches!" [players]="vm.players || []" [editable]="!!vm.isAdmin && editMode"></match-bracket>
               <tops-table
                 label="{{ vm.qualifying!.type | titlecase }} {{ vm.qualifying!.instance | uppercase }}"
                 [tops]="vm.qualifying!.results"
                 [playercount]="vm.qualifying!.results.length"
                 [lastModified]="vm.lastModified"
-                [editable]="editMode"
+                [editable]="!!vm.isAdmin && editMode"
                 [players]="vm.players || []"
                 (addedMatchResult)="addMatchResult(vm.qualifying!, $event)"
                 (updatedMatchResult)="updateMatchResult(vm.qualifying!, $event)"

app/src/components/topbar.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core'
 import { MenuItem } from 'primeng/api'
 import { map } from 'rxjs'
-import { StorageService } from 'src/services/storage.service'
 import { StoreService } from 'src/services/store.service'
 
 @Component({
@@ -45,7 +44,7 @@ import { StoreService } from 'src/services/store.service'
       </div>
       <div class="layout-dialog-actions">
         <p-button label="Cancel" severity="secondary" (click)="adminkeyVisible = false" />
-        <p-button label="Enter" (click)="saveAdminKey(adminkey.value)" />
+        <p-button label="Enter" (click)="storeService.updateAdmin(adminkey.value); adminkeyVisible = false" />
       </div>
     </p-dialog>
 
@@ -346,13 +345,7 @@ export class TopBarComponent {
     }),
   )
 
-  constructor(private storageService: StorageService, public storeService: StoreService) {}
-
-  saveAdminKey(value: string) {
-    this.storageService.saveAdminKey(value)
-    this.adminkeyVisible = false
-    window.location.reload()
-  }
+  constructor(public storeService: StoreService) {}
 
   createWeekly(value: string) {
     this.storeService.createWeekly(value)

app/src/services/admin.service.ts

@@ -4,10 +4,23 @@ import { Injectable } from '@angular/core'
 @Injectable({ providedIn: 'root' })
 export class AdminService {
   #baseUrl = 'api/admin'
+  #storageKey = 'hds-tm-events.admin-key'
 
   constructor(private httpClient: HttpClient) {}
 
-  isAdmin() {
+  validate() {
     return this.httpClient.get(this.#baseUrl)
   }
+
+  save(key: string) {
+    localStorage.setItem(this.#storageKey, key)
+  }
+
+  get() {
+    return localStorage.getItem(this.#storageKey)
+  }
+
+  has() {
+    return !!this.get()
+  }
 }

app/src/services/store.service.ts

@@ -2,7 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentStore } from '@ngrx/component-store'
 import { concatLatestFrom, tapResponse } from '@ngrx/operators'
-import { Observable, switchMap } from 'rxjs'
+import { Observable, switchMap, tap } from 'rxjs'
 import { Leaderboard, Stat } from 'src/domain/leaderboard'
 import { Weekly } from 'src/domain/weekly'
 import { MatchType, MatchDecorated, matchTypeOrder } from 'src/domain/match'
@@ -328,7 +328,7 @@ export class StoreService extends ComponentStore<StoreState> {
   readonly fetchAdmin = this.effect<void>((trigger$) => {
     return trigger$.pipe(
       switchMap(() =>
-        this.adminService.isAdmin().pipe(
+        this.adminService.validate().pipe(
           tapResponse({
             next: () => this.patchState({ isAdmin: true }),
             error: () => this.patchState({ isAdmin: false }),
@@ -338,6 +338,16 @@ export class StoreService extends ComponentStore<StoreState> {
     )
   })
 
+  readonly updateAdmin = this.effect<string>((key$) => {
+    return key$.pipe(
+      tap((key) => {
+        this.adminService.save(key)
+        this.logService.success('Success', 'Saved admin key')
+        return this.fetchAdmin()
+      }),
+    )
+  })
+
   readonly createWeekly = this.effect<string>((weeklyId$) => {
     return weeklyId$.pipe(
       switchMap((weeklyId) =>