fix(octra): re-authentication not working correctly

IPS-LMU · Oct 2, 2023 · d8aef1e · d8aef1e
1 parent beea1f8
commit d8aef1e
Show file tree

Hide file tree

Showing 26 changed files with 164 additions and 152 deletions.
diff --git a/...a/src/app/core/component/authentication-component/authentication-component.component.html b/...a/src/app/core/component/authentication-component/authentication-component.component.html
@@ -57,7 +57,7 @@ <h1 class="h3 mb-4 fw-normal" style="text-align: center" *ngIf="showTitle">
       {{ 'authentication.signin university' | transloco }}
     </button>
   </form>
-  <div class="separator my-4"
+  <div class="separator my-4 text-center"
        *ngIf="isAuthAllowed(AccountLoginMethod.shibboleth) && isAuthAllowed(AccountLoginMethod.local) && type === undefined">{{ 'g.or' | transloco }}</div>
   <form *ngIf="isAuthAllowed(AccountLoginMethod.local) && (type === undefined || type === 'local')" #form="ngForm">
     <div class="form-floating mb-3">

diff --git a/apps/octra/src/app/core/modals/octra-modal.service.ts b/apps/octra/src/app/core/modals/octra-modal.service.ts
@@ -54,14 +54,13 @@ export class OctraModalService {
 
   public openReAuthenticationModal(
     type: AccountLoginMethod,
-    actionAfterSuccess: Action
+    actionAfterSuccess?: Action
   ) {
     const ref = this.openModalRef<ReAuthenticationModalComponent>(
       ReAuthenticationModalComponent,
       ReAuthenticationModalComponent.options
     );
     ref.componentInstance.type = type;
-    ref.componentInstance.authentications = [type];
     ref.componentInstance.actionAfterSuccess = actionAfterSuccess;
     return ref;
   }

diff --git a/.../octra/src/app/core/modals/re-authentication-modal/re-authentication-modal.component.html b/.../octra/src/app/core/modals/re-authentication-modal/re-authentication-modal.component.html
@@ -8,7 +8,7 @@
         <button class="btn btn-success w-100 mb-5" *ngIf="authenticationRunning" (click)="onAuthenticatedClick()">
           {{ 'p.authenticated' | transloco }}
         </button>
-        <octra-authentication-component [type]="type" (submitClick)="onSubmit($event)" [authentications]="authentications" [passwordReset]="apiService.appFeatures?.reset_password" [registrations]="false"></octra-authentication-component>
+        <octra-authentication-component [type]="type" (submitClick)="onSubmit($event)" [authentications]="apiService.appFeatures?.authentications" [passwordReset]="apiService.appFeatures?.reset_password" [registrations]="false"></octra-authentication-component>
       </div>
       <div class="col"></div>
     </div>

diff --git a/apps/octra/src/app/core/modals/re-authentication-modal/re-authentication-modal.component.ts b/apps/octra/src/app/core/modals/re-authentication-modal/re-authentication-modal.component.ts
@@ -28,10 +28,9 @@ export class ReAuthenticationModalComponent
 
   initialized = false;
   type?: AccountLoginMethod;
-  authentications: AccountLoginMethod[] = [];
   authenticationRunning = false;
 
-  actionAfterSuccess!: Action;
+  actionAfterSuccess?: Action;
 
   constructor(
     public activeModal: NgbActiveModal,

diff --git a/apps/octra/src/app/core/pages/intern/projects-list/projects-list.component.ts b/apps/octra/src/app/core/pages/intern/projects-list/projects-list.component.ts
@@ -5,8 +5,15 @@ import { ProjectDto } from '@octra/api-types';
 import { DefaultComponent } from '../../../component/default.component';
 import { OctraModalService } from '../../../modals/octra-modal.service';
 import { ErrorModalComponent } from '../../../modals/error-modal/error-modal.component';
-import { AuthenticationStoreService } from '../../../store/authentication';
+import {
+  AuthenticationActions,
+  AuthenticationStoreService,
+} from '../../../store/authentication';
 import { AnnotationStoreService } from '../../../store/login-mode/annotation/annotation.store.service';
+import { RootState } from '../../../store';
+import { Store } from '@ngrx/store';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Actions, ofType } from '@ngrx/effects';
 
 @Component({
   selector: 'octra-projects-list',
@@ -22,12 +29,27 @@ export class ProjectsListComponent extends DefaultComponent implements OnInit {
     public appStorage: AppStorageService,
     private modalService: OctraModalService,
     public authStoreService: AuthenticationStoreService,
-    private annotationStoreService: AnnotationStoreService
+    private annotationStoreService: AnnotationStoreService,
+    private store: Store<RootState>,
+    private actions$: Actions
   ) {
     super();
   }
 
   async ngOnInit() {
+    this.subscrManager.add(
+      this.actions$
+        .pipe(ofType(AuthenticationActions.needReAuthentication.success.type))
+        .subscribe({
+          next: () => {
+            this.loadProjects();
+          },
+        })
+    );
+    this.loadProjects();
+  }
+
+  private loadProjects() {
     this.subscrManager.add(
       this.api.listProjects().subscribe({
         next: (projects) => {
@@ -66,17 +88,24 @@ export class ProjectsListComponent extends DefaultComponent implements OnInit {
             return -1;
           });
         },
-        error: (error) => {
-          const ref = this.modalService.openModalRef<ErrorModalComponent>(
-            ErrorModalComponent,
-            ErrorModalComponent.options
-          );
-          ref.componentInstance.text = error.message;
+        error: (error: HttpErrorResponse) => {
+          if (error.status === 401) {
+            this.store.dispatch(
+              AuthenticationActions.needReAuthentication.do({
+                actionAfterSuccess: undefined,
+              })
+            );
+          } else {
+            const ref = this.modalService.openModalRef<ErrorModalComponent>(
+              ErrorModalComponent,
+              ErrorModalComponent.options
+            );
+            ref.componentInstance.text = error.message;
+          }
         },
       })
     );
   }
-
   onProjectClick(project: ProjectDto) {
     this.appStorage.startOnlineAnnotation(project);
   }

diff --git a/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts b/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts
@@ -49,7 +49,7 @@ import { LoginMode } from '../../../store';
 import { ShortcutsModalComponent } from '../../../modals/shortcuts-modal/shortcuts-modal.component';
 import { PromptModalComponent } from '../../../modals/prompt-modal/prompt-modal.component';
 import { OctraAPIService } from '@octra/ngx-octra-api';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { DefaultComponent } from '../../../component/default.component';
 import { AnnotationStoreService } from '../../../store/login-mode/annotation/annotation.store.service';
 import { AuthenticationStoreService } from '../../../store/authentication';
@@ -61,6 +61,7 @@ import {
 } from '@octra/web-media';
 import { PartiturConverter } from '@octra/annotation';
 import X2JS from 'x2js';
+import { ApplicationStoreService } from '../../../store/application/application-store.service';
 
 @Component({
   selector: 'octra-transcription',
@@ -226,7 +227,7 @@ export class TranscriptionComponent
     public navbarServ: NavbarService,
     public settingsService: SettingsService,
     public modService: OctraModalService,
-    private modalService: NgbModal,
+    private appStoreService: ApplicationStoreService,
     public langService: TranslocoService,
     private api: OctraAPIService,
     private bugService: BugReportService,
@@ -449,6 +450,22 @@ export class TranscriptionComponent
         this.settingsService.isTheme('korbinian')) &&
       (this._useMode === 'online' || this._useMode === 'demo');
 
+    this.subscrManager.add(
+      this.appStoreService.shortcutsEnabled$.subscribe({
+        next: (shortcutsEnabled) => {
+          console.log('shortcutsEnabled changed');
+          if (this._currentEditor) {
+            console.log(
+              `set shortcuts to ${shortcutsEnabled} for editor ${
+                (this._currentEditor.instance as any).name
+              }`
+            );
+            (this._currentEditor.instance as OCTRAEditor).shortcutsEnabled =
+              shortcutsEnabled;
+          }
+        },
+      })
+    );
     /*
     this.subscrManager.add(
       this.transcrService.alertTriggered.subscribe((alertConfig) => {

diff --git a/apps/octra/src/app/core/shared/service/keymapping.service.ts b/apps/octra/src/app/core/shared/service/keymapping.service.ts
@@ -13,6 +13,8 @@ export class KeymappingService {
   private readonly _beforeShortcutTriggered = new EventEmitter<ShortcutEvent>();
   private readonly _onShortcutTriggered: EventEmitter<ShortcutEvent>;
 
+  public shortcutsEnabled = true;
+
   public get shortcutsManager(): ShortcutManager {
     return this._shortcutsManager;
   }

diff --git a/apps/octra/src/app/core/store/application/application-store.service.ts b/apps/octra/src/app/core/store/application/application-store.service.ts
@@ -39,6 +39,9 @@ export class ApplicationStoreService {
   appInitialized = this.store.select(
     (state: RootState) => state.application.initialized
   );
+  shortcutsEnabled$ = this.store.select(
+    (state: RootState) => state.application.shortcutsEnabled
+  );
 
   public initApplication() {
     this.store.dispatch(ApplicationActions.initApplication.do());

diff --git a/apps/octra/src/app/core/store/application/application.effects.ts b/apps/octra/src/app/core/store/application/application.effects.ts
@@ -12,7 +12,6 @@ import {
   of,
   Subject,
   tap,
-  timer,
   withLatestFrom,
 } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@@ -388,17 +387,24 @@ export class ApplicationEffects {
             );
           } else {
             // logged in
-            console.log(`LOGGED IN! with mode ${state.application.mode}`);
             const modeState = getModeState(state)!;
-            const t = JSON.parse(JSON.stringify(modeState));
-            this.store.dispatch(
-              AnnotationActions.prepareTaskDataForAnnotation.do({
-                currentProject:
-                  getModeState(state)!.currentSession.currentProject!,
-                mode: state.application.mode,
-                task: getModeState(state)!.currentSession!.task!,
-              })
-            );
+
+            if (
+              modeState.currentSession.currentProject &&
+              modeState.currentSession.task
+            ) {
+              this.store.dispatch(
+                AnnotationActions.prepareTaskDataForAnnotation.do({
+                  currentProject: modeState.currentSession.currentProject,
+                  mode: state.application.mode,
+                  task: modeState.currentSession.task,
+                })
+              );
+            } else {
+              this.store.dispatch(
+                AuthenticationActions.redirectToProjects.do()
+              );
+            }
           }
         })
       ),
@@ -547,24 +553,18 @@ export class ApplicationEffects {
 
         const subject = new Subject<Action>();
 
-        timer(10).subscribe(() => {
-          if (action.type === AuthenticationActions.logout.success.type) {
-            subject.next(LoginModeActions.clearSessionStorage.success());
-          } else {
-            subject.next(LoginModeActions.clearSessionStorage.success());
-          }
-          subject.complete();
+        subject.next(LoginModeActions.clearSessionStorage.success());
+        subject.complete();
 
-          this.routerService
-            .navigate(
-              'after logout success',
-              ['/login'],
-              AppInfo.queryParamsHandling
-            )
-            .catch((error) => {
-              console.error(error);
-            });
-        });
+        this.routerService
+          .navigate(
+            'after logout success',
+            ['/login'],
+            AppInfo.queryParamsHandling
+          )
+          .catch((error) => {
+            console.error(error);
+          });
 
         return subject;
       })
@@ -589,10 +589,7 @@ export class ApplicationEffects {
   showErrorMessage$ = createEffect(
     () =>
       this.actions$.pipe(
-        ofType(
-          AnnotationActions.startAnnotation.fail,
-          ApplicationActions.showErrorModal.do
-        ),
+        ofType(ApplicationActions.showErrorModal.do),
         tap((a) => {
           const ref = this.modalService.openModalRef<ErrorModalComponent>(
             ErrorModalComponent,

diff --git a/apps/octra/src/app/core/store/application/application.reducer.ts b/apps/octra/src/app/core/store/application/application.reducer.ts
@@ -9,6 +9,7 @@ import { AuthenticationActions } from '../authentication';
 
 export const initialState: ApplicationState = {
   initialized: false,
+  shortcutsEnabled: true,
   loading: {
     status: LoadingStatus.INITIALIZE,
     progress: 0,
@@ -58,6 +59,14 @@ export const reducer = createReducer(
     ...state,
     initialized: true,
   })),
+  on(AuthenticationActions.needReAuthentication.do, (state: ApplicationState) => ({
+    ...state,
+    shortcutsEnabled: false,
+  })),
+  on(AuthenticationActions.reauthenticate.success, AnnotationActions.prepareTaskDataForAnnotation.do, (state: ApplicationState) => ({
+    ...state,
+    shortcutsEnabled: true,
+  })),
   on(
     AuthenticationActions.loginOnline.redirectToURL,
     (state: ApplicationState) => ({
@@ -181,7 +190,6 @@ export const reducer = createReducer(
   on(AuthenticationActions.logout.success, (state: ApplicationState) => {
     return {
       ...state,
-      loading: initialState.loading,
       mode: undefined,
       queryParams: undefined,
       loggedIn: false,

diff --git a/apps/octra/src/app/core/store/application/index.ts b/apps/octra/src/app/core/store/application/index.ts
@@ -39,6 +39,7 @@ export interface URLParameters {
 export interface ApplicationState {
   initialized: boolean;
   mode?: LoginMode;
+  shortcutsEnabled: boolean;
   queryParams?: URLParameters;
   loggedIn: boolean;
   loading: {

diff --git a/apps/octra/src/app/core/store/authentication/authentication-store.service.ts b/apps/octra/src/app/core/store/authentication/authentication-store.service.ts
@@ -101,7 +101,7 @@ export class AuthenticationStoreService {
 
   reauthenticate(
     method: AccountLoginMethod,
-    actionAfterSuccess: Action,
+    actionAfterSuccess?: Action,
     username?: string,
     password?: string
   ) {
@@ -115,7 +115,7 @@ export class AuthenticationStoreService {
     );
   }
 
-  setReAuthenticationSuccess(actionAfterSuccess: Action) {
+  setReAuthenticationSuccess(actionAfterSuccess?: Action) {
     this.store.dispatch(
       AuthenticationActions.needReAuthentication.success({ actionAfterSuccess })
     );

diff --git a/apps/octra/src/app/core/store/authentication/authentication.actions.ts b/apps/octra/src/app/core/store/authentication/authentication.actions.ts
@@ -134,7 +134,7 @@ export class AuthenticationActions {
         method: AccountLoginMethod;
         username?: string;
         password?: string;
-        actionAfterSuccess: Action;
+        actionAfterSuccess?: Action;
       }>(),
       success: props<{
         auth: AuthDto;
@@ -152,10 +152,10 @@ export class AuthenticationActions {
     source: 'auth/need re-authentication',
     events: {
       do: props<{
-        actionAfterSuccess: Action;
+        actionAfterSuccess?: Action;
       }>(),
       success: props<{
-        actionAfterSuccess: Action;
+        actionAfterSuccess?: Action;
       }>(),
       abort: emptyProps(),
       fail: props<{