fix some issues

src/client/src/app/app.config.ts

@@ -1,8 +1,10 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
   ApplicationConfig,
   provideExperimentalZonelessChangeDetection,
   isDevMode,
+  APP_INITIALIZER,
+  inject,
 } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
@@ -20,7 +22,9 @@ import { provideUsersState } from './+state/users';
 import { provideApi } from './api/services';
 import { routes } from './app.routes';
 import { environment } from './environments/environment';
-import { provideAuth } from './services/auth.service';
+import { AuthInterceptor } from './services/auth.interceptor';
+import { AuthService } from './services/auth.service';
+import { WebPushService } from './services/web-push.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -41,10 +45,26 @@ export const appConfig: ApplicationConfig = {
     providePlayerEventsState(),
     provideUserSettingsState(),
     environment.getProviders(),
-    provideAuth(),
     provideServiceWorker('ngsw-worker.js', {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',
     }),
+    {
+      provide: HTTP_INTERCEPTORS,
+      multi: true,
+      useClass: AuthInterceptor,
+    },
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      useFactory: () => {
+        const authService = inject(AuthService);
+        const webPushService = inject(WebPushService);
+        return () => {
+          authService.init();
+          webPushService.init();
+        };
+      },
+    },
   ],
 };

src/client/src/app/components/app/app.component.ts

@@ -45,7 +45,6 @@ export class AppComponent {
     const primengConfig = inject(PrimeNGConfig);
     primengConfig.ripple = true;
 
-    this._webPushService.init();
     this._webPushService.onPromptNotification
       .pipe(takeUntilDestroyed())
       .subscribe(() => this._notificationPromptDialog().open());

src/client/src/app/components/app/notification-prompt-dialog/notification-prompt-dialog.component.html

@@ -2,7 +2,7 @@
   [visible]="visible()"
   (visibleChange)="visible.set($event)"
   [modal]="true"
-  [closable]="!isLoading()"
+  [closable]="false"
   [draggable]="false"
 >
   <p-header>

src/client/src/app/components/app/notification-prompt-dialog/notification-prompt-dialog.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/cor
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
 
-import { setHasRejectedPush } from '../../../services/storage';
+import { setHasConfiguredPush } from '../../../services/storage';
 import { TranslateService } from '../../../services/translate.service';
 import { WebPushService } from '../../../services/web-push.service';
 
@@ -35,7 +35,7 @@ export class NotificationPromptDialogComponent {
   }
 
   protected onReject() {
-    setHasRejectedPush(true);
+    setHasConfiguredPush(true);
     this.visible.set(false);
   }
 }

src/client/src/app/components/user-settings/user-settings.component.html

@@ -72,24 +72,31 @@ <h1 class="m-0">{{ translations.nav_settings() }}</h1>
             </div>
           </div>
 
-          <div class="flex flex-row items-center gap-4">
-            <div class="grow">
-              {{ translations.settings_notifications_eanbled() }}
-            </div>
-            <div class="relative -my-4">
-              <p-inputSwitch
-                class="flex"
-                [disabled]="
-                  !settings.enableNotifications ||
-                  !notificationsPossible ||
-                  isUpdatingPushSubscription()
-                "
-                [ngModel]="settings.enableNotifications ? notificationsEnabled() : false"
-                (ngModelChange)="toggleNotifications($event)"
-                [resetNgModel]="resetNgModel"
-              />
-              <app-saved-fading-message [showTrigger]="settingsSaveStates.eanbled | async" />
+          <div class="flex flex-col gap-1">
+            <div class="flex flex-row items-center gap-4">
+              <div class="grow">
+                {{ translations.settings_notifications_eanbled() }}
+              </div>
+              <div class="relative -my-4">
+                <p-inputSwitch
+                  class="flex"
+                  [disabled]="
+                    !settings.enableNotifications ||
+                    !notificationsPossible ||
+                    isUpdatingPushSubscription()
+                  "
+                  [ngModel]="settings.enableNotifications ? notificationsEnabled() : false"
+                  (ngModelChange)="toggleNotifications($event)"
+                  [resetNgModel]="resetNgModel"
+                />
+                <app-saved-fading-message [showTrigger]="settingsSaveStates.eanbled | async" />
+              </div>
             </div>
+            @if (!notificationsPossible) {
+              <small class="self-end text-end text-danger">{{
+                translations.settings_notifications_errors_notSupported()
+              }}</small>
+            }
           </div>
 
           @if (settings.enableNotifications && notificationsEnabled()) {
@@ -131,7 +138,8 @@ <h3 class="m-0">{{ translations.settings_notifications_notify_title() }}</h3>
                 </div>
               </div>
 
-              <div class="flex flex-row items-center gap-4">
+              <!-- TODO: Comment this in when event updated notifications are implemented -->
+              <!-- <div class="flex flex-row items-center gap-4">
                 <div class="grow">
                   {{ translations.settings_notifications_notify_eventUpdated() }}
                 </div>
@@ -147,9 +155,10 @@ <h3 class="m-0">{{ translations.settings_notifications_notify_title() }}</h3>
                     [showTrigger]="settingsSaveStates.notifyEventUpdate | async"
                   />
                 </div>
-              </div>
+              </div> -->
 
-              <div class="flex flex-row items-center gap-4">
+              <!-- TODO: Comment this in when timeslot start notifications are implemented -->
+              <!-- <div class="flex flex-row items-center gap-4">
                 <div class="grow">
                   {{ translations.settings_notifications_notify_timeslotStart() }}
                 </div>
@@ -175,7 +184,7 @@ <h3 class="m-0">{{ translations.settings_notifications_notify_title() }}</h3>
                     [showTrigger]="settingsSaveStates.notifyTimeslotStart | async"
                   />
                 </div>
-              </div>
+              </div> -->
             </div>
           }
         </div>

src/client/src/app/i18n/de.json

@@ -41,6 +41,7 @@
       "enabledOnAllDevices": "Auf allen Geräten aktiviert",
       "eanbled": "Auf diesem Gerät aktiviert",
       "errors": {
+        "notSupported": "Benachrichtigungen werden von diesem Browser nicht unterstützt.",
         "notGranted": {
           "title": "Erlaubnis über Benachrichtigungen nicht erteilt",
           "description": "Um Benachrichtigungen erhalten zu können, musst du dies in den Systemeinstellungen aktivieren, oder die App erneut installieren."

src/client/src/app/i18n/en.json

@@ -41,6 +41,7 @@
       "enabledOnAllDevices": "Enabled on all devices",
       "eanbled": "Enabled on this device",
       "errors": {
+        "notSupported": "Notifications are not supported by this browser.",
         "notGranted": {
           "title": "Notification permission not granted",
           "description": "To receive notifications, you must activate this in the system settings or reinstall the app."

src/client/src/app/services/auth.guard.ts

@@ -3,7 +3,7 @@ import { Router, RouterStateSnapshot } from '@angular/router';
 
 import { AuthService } from './auth.service';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AuthGuard {
   private readonly _router = inject(Router);
   private readonly _authService = inject(AuthService);

src/client/src/app/services/auth.interceptor.ts

@@ -1,9 +1,10 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { AuthService } from './auth.service';
 
+@Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   private readonly _authService = inject(AuthService);
 

src/client/src/app/services/auth.service.ts

@@ -1,6 +1,5 @@
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import {
-  APP_INITIALIZER,
+  EventEmitter,
   Injectable,
   OnDestroy,
   computed,
@@ -10,35 +9,32 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { AuthGuard } from './auth.guard';
-import { AuthInterceptor } from './auth.interceptor';
 import {
   AuthTokenInfo,
   getAuthTokenInfo,
   getLoginToken,
   setAuthTokenInfo,
   setLoginToken,
 } from './storage';
-import { WebPushService } from './web-push.service';
 import { AuthenticationService } from '../api/services';
 import { environment } from '../environments/environment';
 import { assertBody } from '../utils/http.utils';
 
 export type SignInResult = 'success' | 'invalid-token' | 'error';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AuthService implements OnDestroy {
   private readonly _api = inject(AuthenticationService);
   private readonly _router = inject(Router);
-  private readonly _webPushService = inject(WebPushService);
 
   private readonly _token = signal<AuthTokenInfo | null | undefined>(undefined);
 
   private _tokenRefreshTimeout?: any;
 
-  public token = this._token.asReadonly();
-  public user = computed(() => this.token()?.user);
-  public isAuthorized = computed(() => !!this._token());
+  public readonly token = this._token.asReadonly();
+  public readonly user = computed(() => this.token()?.user);
+  public readonly isAuthorized = computed(() => !!this._token());
+  public readonly onBeforeSignOut = new EventEmitter<void>();
 
   constructor() {
     effect(() => {
@@ -53,7 +49,7 @@ export class AuthService implements OnDestroy {
     });
   }
 
-  public async initialize() {
+  public async init() {
     if (this._token() !== undefined) {
       throw new Error('AuthService already initialized');
     }
@@ -113,7 +109,7 @@ export class AuthService implements OnDestroy {
   public async signOut() {
     if (!environment.authenticationRequired) return;
 
-    await this._webPushService.disable(true);
+    this.onBeforeSignOut.emit();
     setLoginToken(null);
     this._token.set(null);
 
@@ -143,21 +139,3 @@ export class AuthService implements OnDestroy {
     this._tokenRefreshTimeout = undefined;
   }
 }
-
-export function provideAuth() {
-  return [
-    AuthService,
-    AuthGuard,
-    {
-      provide: HTTP_INTERCEPTORS,
-      multi: true,
-      useClass: AuthInterceptor,
-    },
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      useFactory: (authService: AuthService) => () => authService.initialize(),
-      deps: [AuthService],
-    },
-  ];
-}

src/client/src/app/services/storage.ts

@@ -2,6 +2,7 @@ import { User } from '../models/parsed-models';
 
 const TOKEN_KEY = 'access_token_info';
 const LOGIN_TOKEN_KEY = 'login_token';
+const HAS_CONFIGURED_PUSH = 'has_configured_push';
 
 function getLocalStorage(key: string): string | null {
   return localStorage.getItem(key);
@@ -42,10 +43,10 @@ export function setLoginToken(token: string | null) {
   setLocalStorage(LOGIN_TOKEN_KEY, token);
 }
 
-export function getHasRejectedPush(): boolean {
-  const hasRejected = getLocalStorage('hasRejectedPush');
+export function getHasConfiguredPush(): boolean {
+  const hasRejected = getLocalStorage(HAS_CONFIGURED_PUSH);
   return hasRejected === 'true';
 }
-export function setHasRejectedPush(hasRejected: boolean) {
-  setLocalStorage('hasRejectedPush', hasRejected ? 'true' : 'false');
+export function setHasConfiguredPush(hasConfigured: boolean) {
+  setLocalStorage(HAS_CONFIGURED_PUSH, hasConfigured ? 'true' : 'false');
 }