feat: use token roles

Author: autowp

src/app/account/account.component.ts

@@ -37,10 +37,10 @@ export class AccountComponent {
   readonly #forumsClient = inject(ForumsClient);
 
   protected readonly items$: Observable<SidebarItem[]> = combineLatest([
-    this.#auth.getUser$(),
-    this.#auth.getUser$().pipe(
-      switchMap((user) => {
-        if (!user) {
+    this.#auth.user$,
+    this.#auth.authenticated$.pipe(
+      switchMap((authenticated) => {
+        if (!authenticated) {
           return of(null);
         }
         return this.#forumsClient.getUserSummary(new Empty());

src/app/account/contacts/contacts.component.ts

@@ -10,7 +10,7 @@ import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {TimeAgoPipe} from '@utils/time-ago.pipe';
 import Keycloak from 'keycloak-js';
-import {BehaviorSubject, EMPTY, Observable} from 'rxjs';
+import {BehaviorSubject, EMPTY, Observable, of} from 'rxjs';
 import {catchError, map, switchMap} from 'rxjs/operators';
 
 import {ToastsService} from '../../toasts/toasts.service';
@@ -32,16 +32,16 @@ export class AccountContactsComponent implements OnInit {
 
   readonly #reload$ = new BehaviorSubject<void>(void 0);
 
-  protected readonly items$: Observable<Contact[]> = this.#auth.getUser$().pipe(
-    map((user) => {
-      if (!user) {
+  protected readonly items$: Observable<Contact[]> = this.#auth.authenticated$.pipe(
+    switchMap((authenticated) => {
+      if (!authenticated) {
         this.#keycloak.login({
           locale: this.#languageService.language,
           redirectUri: window.location.href,
         });
         return EMPTY;
       }
-      return user;
+      return of(authenticated);
     }),
     switchMap(() => this.#reload$),
     switchMap(() => this.#contactsService.getContacts$()),

src/app/account/delete/delete.component.ts

@@ -36,8 +36,7 @@ export class AccountDeleteComponent implements OnInit {
   }
 
   protected submit() {
-    this.#auth
-      .getUser$()
+    this.#auth.user$
       .pipe(
         switchMap((user) =>
           user
@@ -59,7 +58,7 @@ export class AccountDeleteComponent implements OnInit {
           }
         },
         next: () => {
-          this.#auth.signOut$();
+          this.#auth.signOut$().subscribe();
           this.#router.navigate(['/account/delete/deleted']);
         },
       });

src/app/account/inbox-pictures/inbox-pictures.component.ts

@@ -32,7 +32,7 @@ export class AccountInboxPicturesComponent implements OnInit {
       distinctUntilChanged(),
       debounceTime(10),
     ),
-    this.#auth.getUser$(),
+    this.#auth.user$,
   ]).pipe(
     switchMap(([page, user]) =>
       user

src/app/account/profile/profile.component.ts

@@ -63,8 +63,7 @@ export class AccountProfileComponent implements OnDestroy, OnInit {
   ngOnInit(): void {
     setTimeout(() => this.#pageEnv.set({pageId: 129}), 0);
 
-    this.#sub = this.#auth
-      .getUser$()
+    this.#sub = this.#auth.user$
       .pipe(
         switchMap((user) => {
           if (!user) {

src/app/account/specs-conflicts/specs-conflicts.component.html

@@ -3,7 +3,7 @@ <h1 i18n id="header">Conflicts</h1>
 </div>
 
 @if (user$ | async; as user) {
-  @if (user.specsWeight !== null) {
+  @if (user.specsWeight !== 0) {
     <p class="float-end"><ng-container i18n>Weight</ng-container>: {{ user.specsWeight.toFixed(2) }}</p>
   }
 } @else {

src/app/account/specs-conflicts/specs-conflicts.component.ts

@@ -81,7 +81,7 @@ export class AccountSpecsConflictsComponent implements OnInit {
     map((filter) => mapFilter(filter)),
   );
 
-  protected readonly user$: Observable<APIUser | null> = this.auth.getUser$();
+  protected readonly user$: Observable<APIUser | null> = this.auth.user$;
 
   readonly #itemsCache = new Map<string, Observable<APIItem>>();
 

src/app/api/comments/comments.service.ts

@@ -1,34 +1,32 @@
 import {inject, Injectable} from '@angular/core';
 import {GetMessagesRequest, ModeratorAttention} from '@grpc/spec.pb';
 import {CommentsClient} from '@grpc/spec.pbsc';
-import {ACLService, Privilege, Resource} from '@services/acl.service';
+import {AuthService, Role} from '@services/auth.service';
 import {Observable, of} from 'rxjs';
 import {map, shareReplay, switchMap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class APICommentsService {
-  readonly #acl = inject(ACLService);
+  readonly #auth = inject(AuthService);
   readonly #commentsClient = inject(CommentsClient);
 
-  public readonly attentionCommentsCount$: Observable<null | number> = this.#acl
-    .isAllowed$(Resource.GLOBAL, Privilege.MODERATE)
-    .pipe(
-      switchMap((isModer) => {
-        if (!isModer) {
-          return of(null);
-        }
+  public readonly attentionCommentsCount$: Observable<null | number> = this.#auth.hasRole$(Role.MODER).pipe(
+    switchMap((isModer) => {
+      if (!isModer) {
+        return of(null);
+      }
 
-        return this.#commentsClient
-          .getMessages(
-            new GetMessagesRequest({
-              limit: 0,
-              moderatorAttention: ModeratorAttention.REQUIRED,
-            }),
-          )
-          .pipe(map((response) => (response.paginator ? response.paginator.totalItemCount : null)));
-      }),
-      shareReplay({bufferSize: 1, refCount: false}),
-    );
+      return this.#commentsClient
+        .getMessages(
+          new GetMessagesRequest({
+            limit: 0,
+            moderatorAttention: ModeratorAttention.REQUIRED,
+          }),
+        )
+        .pipe(map((response) => (response.paginator ? response.paginator.totalItemCount : null)));
+    }),
+    shareReplay({bufferSize: 1, refCount: false}),
+  );
 }

src/app/api/picture-moder-vote-template/picture-moder-vote-template.service.ts

@@ -21,7 +21,7 @@ export class APIPictureModerVoteTemplateService {
   readonly #change$ = new BehaviorSubject<void>(void 0);
 
   public getTemplates$(): Observable<ModerVoteTemplate[]> {
-    return combineLatest([this.#change$, this.#auth.getUser$()]).pipe(
+    return combineLatest([this.#change$, this.#auth.authenticated$]).pipe(
       switchMap(() => this.#pictures.getModerVoteTemplates(new Empty({}))),
       map((response) => (response.items ? response.items : [])),
       shareReplay({bufferSize: 1, refCount: false}),

src/app/app.component.html

@@ -77,7 +77,7 @@
           </form>
         }
         <ul class="nav navbar-nav navbar-right">
-          @if (user$ | async) {
+          @if (authenticated$ | async) {
             <li class="nav-item">
               <a class="nav-link" routerLink="/account/messages" routerLinkActive="active">
                 <i class="bi bi-chat-fill" aria-hidden="true"></i>
@@ -120,7 +120,7 @@
                 <i class="bi bi-people-fill" aria-hidden="true"></i>
                 <ng-container i18n>Who is online?</ng-container>
               </a>
-              @if (user$ | async) {
+              @if (authenticated$ | async) {
                 <a routerLink="/account/contacts" class="dropdown-item" routerLinkActive="active">
                   <i class="bi bi-people-fill" aria-hidden="true"></i>
                   <ng-container i18n>Contacts</ng-container>
@@ -134,7 +134,7 @@
                 <i class="bi bi-info" aria-hidden="true"></i>
                 <ng-container i18n>About us</ng-container>
               </a>
-              @if (user$ | async) {
+              @if (authenticated$ | async) {
                 <a href="#" (click)="signOut()" class="dropdown-item">
                   <i class="bi bi-box-arrow-right" aria-hidden="true"></i>
                   <ng-container i18n>Sign out</ng-container>

src/app/app.component.ts

@@ -2,7 +2,7 @@ import {AsyncPipe, NgClass} from '@angular/common';
 import {Component, inject, Renderer2} from '@angular/core';
 import {NavigationStart, Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {environment} from '@environment/environment';
-import {APIUser, ItemFields, ItemListOptions, ItemsRequest, ItemType} from '@grpc/spec.pb';
+import {ItemFields, ItemListOptions, ItemsRequest, ItemType} from '@grpc/spec.pb';
 import {ItemsClient} from '@grpc/spec.pbsc';
 import {
   NgbCollapse,
@@ -12,7 +12,6 @@ import {
   NgbModal,
   NgbTooltip,
 } from '@ng-bootstrap/ng-bootstrap';
-import {ACLService} from '@services/acl.service';
 import {AuthService} from '@services/auth.service';
 import {Language, LanguageService} from '@services/language';
 import {MessageService} from '@services/message';
@@ -48,8 +47,7 @@ import {UsersOnlineComponent} from './users/online/online.component';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  protected readonly auth = inject(AuthService);
-  protected readonly acl = inject(ACLService);
+  readonly #auth = inject(AuthService);
   protected readonly router = inject(Router);
   readonly #messageService = inject(MessageService);
   readonly #pageEnv = inject(PageEnvService);
@@ -61,7 +59,7 @@ export class AppComponent {
 
   protected languages: Language[] = environment.languages;
   protected readonly layoutParams$: Observable<LayoutParams> = this.#pageEnv.layoutParams$.asObservable();
-  protected readonly user$: Observable<APIUser | null> = this.auth.getUser$();
+  protected readonly authenticated$: Observable<boolean> = this.#auth.authenticated$;
   protected readonly newPersonalMessages$ = this.#messageService
     .getNew$()
     .pipe(shareReplay({bufferSize: 1, refCount: false}));
@@ -123,7 +121,7 @@ export class AppComponent {
   }
 
   protected signOut() {
-    this.auth.signOut$().subscribe({
+    this.#auth.signOut$().subscribe({
       error: (error: unknown) => {
         console.error(error);
       },

src/app/app.config.ts

@@ -9,7 +9,6 @@ import {environment} from '@environment/environment';
 import {NgbCollapseModule, NgbDropdownModule, NgbModule, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 import {GRPC_INTERCEPTORS, GrpcCoreModule} from '@ngx-grpc/core';
 import {GrpcWebClientModule} from '@ngx-grpc/grpc-web-client';
-import {ACLService, APIACL} from '@services/acl.service';
 import {authInterceptor$, GrpcAuthInterceptor, GrpcLogInterceptor} from '@services/api.service';
 import {AuthService} from '@services/auth.service';
 import {ContactsService} from '@services/contacts';
@@ -71,9 +70,7 @@ export const appConfig: ApplicationConfig = {
     }),
     AutoRefreshTokenService,
     UserActivityService,
-    APIACL,
     AuthService,
-    ACLService,
     PictureService,
     ItemService,
     ReCaptchaService,

src/app/auth.guard.ts

@@ -10,9 +10,9 @@ export const authGuard: CanActivateFn = () => {
   const keycloak = inject(Keycloak);
   const language = inject(LanguageService);
 
-  return auth.getUser$().pipe(
-    map((user) => {
-      if (!user) {
+  return auth.authenticated$.pipe(
+    map((authenticated) => {
+      if (!authenticated) {
         keycloak.login({
           locale: language.language,
           redirectUri: window.location.href,

src/app/cars/attrs-change-log/attrs-change-log.component.ts

@@ -14,7 +14,7 @@ import {
 } from '@grpc/spec.pb';
 import {AttrsClient, ItemsClient, UsersClient} from '@grpc/spec.pbsc';
 import {NgbTooltip, NgbTypeahead, NgbTypeaheadSelectItemEvent} from '@ng-bootstrap/ng-bootstrap';
-import {ACLService, Privilege, Resource} from '@services/acl.service';
+import {AuthService, Role} from '@services/auth.service';
 import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {UserService} from '@services/user';
@@ -44,7 +44,7 @@ interface AttrUserValueListItem {
 export class CarsAttrsChangeLogComponent implements OnDestroy, OnInit {
   readonly #route = inject(ActivatedRoute);
   readonly #router = inject(Router);
-  readonly #acl = inject(ACLService);
+  readonly #auth = inject(AuthService);
   readonly #pageEnv = inject(PageEnvService);
   readonly #toastService = inject(ToastsService);
   readonly #usersClient = inject(UsersClient);
@@ -58,7 +58,7 @@ export class CarsAttrsChangeLogComponent implements OnDestroy, OnInit {
 
   #querySub?: Subscription;
 
-  protected readonly isModer$ = this.#acl.isAllowed$(Resource.GLOBAL, Privilege.MODERATE);
+  protected readonly isModer$ = this.#auth.hasRole$(Role.MODER);
 
   protected readonly userID$: Observable<string> = this.#route.queryParamMap.pipe(
     map((params) => params.get('user_id') ?? ''),

src/app/cars/specifications-editor/engine/engine.component.ts

@@ -5,7 +5,7 @@ import {APIItem, UpdateItemRequest} from '@grpc/spec.pb';
 import {ItemFields, ItemRequest} from '@grpc/spec.pb';
 import {ItemsClient} from '@grpc/spec.pbsc';
 import {FieldMask} from '@ngx-grpc/well-known-types';
-import {ACLService, Privilege, Resource} from '@services/acl.service';
+import {AuthService, Role} from '@services/auth.service';
 import {LanguageService} from '@services/language';
 import {BehaviorSubject, Observable, of} from 'rxjs';
 import {shareReplay, switchMap} from 'rxjs/operators';
@@ -18,7 +18,7 @@ import {ToastsService} from '../../../toasts/toasts.service';
   templateUrl: './engine.component.html',
 })
 export class CarsSpecificationsEditorEngineComponent {
-  readonly #acl = inject(ACLService);
+  readonly #auth = inject(AuthService);
   readonly #itemsClient = inject(ItemsClient);
   readonly #toastService = inject(ToastsService);
   readonly #languageService = inject(LanguageService);
@@ -29,8 +29,8 @@ export class CarsSpecificationsEditorEngineComponent {
   protected readonly item$ = new BehaviorSubject<APIItem | null>(null);
 
   @Output() changed = new EventEmitter<void>();
-  protected readonly isAllowedEditEngine$ = this.#acl
-    .isAllowed$(Resource.SPECIFICATIONS, Privilege.EDIT_ENGINE)
+  protected readonly isAllowedEditEngine$ = this.#auth
+    .hasRole$(Role.CARS_MODER)
     .pipe(shareReplay({bufferSize: 1, refCount: false}));
 
   protected readonly engine$: Observable<APIItem | null> = this.item$.pipe(

src/app/cars/specifications-editor/spec/spec.component.ts

@@ -104,8 +104,6 @@ export class CarsSpecificationsEditorSpecComponent {
   protected loading = 0;
   readonly #change$ = new BehaviorSubject<void>(void 0);
 
-  protected readonly user$ = this.#auth.getUser$();
-
   // fields: 'options,childs.options',
   protected readonly attributes$: Observable<APIAttrAttributeInSpecEditor[]> = this.item$.pipe(
     distinctUntilChanged(),
@@ -126,7 +124,7 @@ export class CarsSpecificationsEditorSpecComponent {
 
   protected readonly currentUserValues$: Observable<{[p: string]: AttrUserValue}> = combineLatest([
     this.item$,
-    this.user$,
+    this.#auth.user$,
     this.attributes$,
     this.#change$,
   ]).pipe(

src/app/cars/specifications-editor/specifications-editor.component.ts

@@ -3,8 +3,7 @@ import {Component, inject} from '@angular/core';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {APIItem, ItemFields, ItemRequest, ItemType, RefreshInheritanceRequest} from '@grpc/spec.pb';
 import {ItemsClient} from '@grpc/spec.pbsc';
-import {ACLService, Privilege, Resource} from '@services/acl.service';
-import {AuthService} from '@services/auth.service';
+import {AuthService, Role} from '@services/auth.service';
 import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {MarkdownComponent} from '@utils/markdown/markdown.component';
@@ -29,7 +28,6 @@ import {CarsSpecificationsEditorSpecComponent} from './spec/spec.component';
   templateUrl: './specifications-editor.component.html',
 })
 export class CarsSpecificationsEditorComponent {
-  readonly #acl = inject(ACLService);
   readonly #router = inject(Router);
   readonly #route = inject(ActivatedRoute);
   readonly #pageEnv = inject(PageEnvService);
@@ -39,10 +37,10 @@ export class CarsSpecificationsEditorComponent {
   readonly #languageService = inject(LanguageService);
 
   readonly #change$ = new BehaviorSubject<void>(void 0);
-  protected readonly isModer$ = this.#acl.isAllowed$(Resource.GLOBAL, Privilege.MODERATE);
-  protected readonly isSpecsAdmin$ = this.#acl.isAllowed$(Resource.SPECIFICATIONS, Privilege.ADMIN);
+  protected readonly isModer$ = this.#auth.hasRole$(Role.MODER);
+  protected readonly isSpecsAdmin$ = this.#auth.hasRole$(Role.ADMIN);
   protected readonly tab$ = this.#route.queryParamMap.pipe(map((params) => params.get('tab') ?? 'info'));
-  protected readonly user$ = this.#auth.getUser$();
+  protected readonly user$ = this.#auth.user$;
 
   protected readonly data$: Observable<APIItem> = this.#route.queryParamMap.pipe(
     map((params) => params.get('item_id') ?? ''),