Lmendoza/9694 capture affiliations during sign in (#2522)

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

* 9694-capture-affiliations-during-sign-in

---------

Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>

Author: cryptalith

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {
 import { MatLegacySelectModule } from '@angular/material/legacy-select'
 import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field'
 import { MatLegacyInputModule } from '@angular/material/legacy-input'
+import { FormsModule } from '@angular/forms'
 
 @NgModule({
   declarations: [AppComponent],
@@ -38,6 +39,7 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input'
     PseudoModule, // Remove on angular 10 https://bit.ly/3ezbF4v
     // Environmental dependent modules
     EnvironmentBannerModule,
+    FormsModule,
   ],
   providers: [
     TitleService,

src/app/authorize/authorize.module.ts

@@ -16,6 +16,7 @@ import { OauthErrorComponent } from './components/oauth-error/oauth-error.compon
 import { AuthorizeComponent } from './pages/authorize/authorize.component'
 import { FormAuthorizeComponent } from './components/form-authorize/form-authorize.component'
 import { InterstitialsModule } from '../cdk/interstitials/interstitials.module'
+import { PortalModule } from '@angular/cdk/portal'
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { InterstitialsModule } from '../cdk/interstitials/interstitials.module'
     FormAuthorizeComponent,
   ],
   imports: [
+    PortalModule,
     CommonModule,
     AuthorizeRoutingModule,
     MatCardModule,

src/app/authorize/pages/authorize/authorize.component.html

@@ -12,11 +12,7 @@
             *ngIf="showAuthorizationComponent"
             (redirectUrl)="handleRedirect($event)"
           ></app-form-authorize>
-          <app-share-emails-domains
-            *ngIf="showInterstital"
-            (finish)="finishRedirect()"
-            [userEmailsJson]="originalEmailsBackendCopy"
-          ></app-share-emails-domains>
+          <ng-template #interstitialOutlet cdkPortalOutlet></ng-template>
           <app-oauth-error *ngIf="showAuthorizationError"></app-oauth-error>
         </mat-card>
       </div>

src/app/authorize/pages/authorize/authorize.component.spec.ts

@@ -13,6 +13,8 @@ import { Overlay } from '@angular/cdk/overlay'
 import { UserService } from '../../../core'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { P } from '@angular/cdk/keycodes'
+import { LoginMainInterstitialsManagerService } from 'src/app/core/login-interstitials-manager/login-main-interstitials-manager.service'
 
 describe('AuthorizeComponent', () => {
   let component: AuthorizeComponent
@@ -31,6 +33,10 @@ describe('AuthorizeComponent', () => {
         MatSnackBar,
         MatDialog,
         Overlay,
+        {
+          provide: LoginMainInterstitialsManagerService,
+          useValue: {},
+        },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents()

src/app/authorize/pages/authorize/authorize.component.ts

@@ -1,24 +1,41 @@
-import { Component, Inject } from '@angular/core'
+import { ComponentType } from '@angular/cdk/overlay'
+import { Component, Inject, ViewChild } from '@angular/core'
 import { cloneDeep } from 'lodash'
 import { Observable, forkJoin, NEVER, of } from 'rxjs'
-import { first, map, switchMap, take, tap } from 'rxjs/operators'
+import {
+  filter,
+  finalize,
+  first,
+  map,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs/operators'
 import { InterstitialsService } from 'src/app/cdk/interstitials/interstitials.service'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { UserService } from 'src/app/core'
 import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
 import { GoogleTagManagerService } from 'src/app/core/google-tag-manager/google-tag-manager.service'
+import { LoginMainInterstitialsManagerService } from 'src/app/core/login-interstitials-manager/login-main-interstitials-manager.service'
 import { RecordEmailsService } from 'src/app/core/record-emails/record-emails.service'
+import { RecordService } from 'src/app/core/record/record.service'
 import { TogglzService } from 'src/app/core/togglz/togglz.service'
 import { ERROR_REPORT } from 'src/app/errors'
 import { EmailsEndpoint, RequestInfoForm } from 'src/app/types'
+import { UserRecord } from 'src/app/types/record.local'
+import { UserSession } from 'src/app/types/session.local'
+import { CdkPortalOutlet, ComponentPortal, Portal } from '@angular/cdk/portal'
 
 @Component({
   templateUrl: './authorize.component.html',
   styleUrls: ['./authorize.component.scss'],
   preserveWhitespaces: true,
 })
 export class AuthorizeComponent {
+  @ViewChild('interstitialOutlet', { static: false, read: CdkPortalOutlet })
+  outlet!: CdkPortalOutlet
+
   redirectUrl: string
 
   platform: PlatformInfo
@@ -38,58 +55,71 @@ export class AuthorizeComponent {
 
   // User session properties
   isNotImpersonating = false
-  insidePopUpWindows = false
-  redirectByReportAlreadyAuthorize = false
+  interstitialComponent: ComponentType<any>
+  redirectByReportAlreadyAuthorize: boolean
 
   constructor(
     private userService: UserService,
     private platformInfoService: PlatformInfoService,
-    private recordEmailsService: RecordEmailsService,
-    private togglzService: TogglzService,
-    private interstitialsService: InterstitialsService,
     @Inject(WINDOW) private window: Window,
     private googleTagManagerService: GoogleTagManagerService,
-    private errorHandlerService: ErrorHandlerService
+    private errorHandlerService: ErrorHandlerService,
+    private recordService: RecordService,
+    private loginMainInterstitialsManagerService: LoginMainInterstitialsManagerService
   ) {}
 
   /**
    * Lifecycle hook. Initiates data loading and handles session logic.
    */
   ngOnInit(): void {
     this.loading = true
-    this.insidePopUpWindows = !!this.window.opener
 
     forkJoin({
-      userSession: this.loadUserSession(),
       platform: this.loadPlatformInfo(),
-      togglz: this.loadTogglzState(),
-      emails: this.loadEmails(),
+      userSession: this.loadUserSession(),
+      userRecord: this.recordService.getRecord({}).pipe(
+        filter((userRecord: UserRecord) => {
+          return (
+            !!userRecord &&
+            !!userRecord?.userInfo &&
+            !!userRecord?.emails &&
+            !!userRecord?.affiliations?.length
+          )
+        }),
+        take(1)
+      ),
     })
       .pipe(
-        switchMap((results) => {
-          if (!results.userSession?.userInfo) {
-            return of(results)
-          } else {
-            return this.loadInterstitialViewed().pipe(
-              map(() => {
-                return results
+        switchMap((record) => {
+          return this.loginMainInterstitialsManagerService
+            .checkLoginInterstitials(record.userRecord, {
+              returnType: 'component',
+              togglzPrefix: 'OAUTH',
+            })
+            .pipe(
+              take(1),
+              map((interstitial) => {
+                this.interstitialComponent = interstitial
+              }),
+              switchMap(() => {
+                return of(record.userSession)
+              }),
+              finalize(() => {
+                this.handleUserSession(record.userSession)
               })
             )
-          }
         })
       )
-      .subscribe(({ userSession }) => {
-        this.handleUserSession(userSession)
-      })
+      .subscribe()
   }
 
   /**
    * Called by template to handle final redirection.
    */
   handleRedirect(url: string): void {
     this.redirectUrl = url
-    if (url && this.canShowDomainInterstitial()) {
-      this.showDomainInterstitial()
+    if (this.redirectUrl && this.isThereInterstitialToShow()) {
+      this.showInterstitial()
     } else {
       this.finishRedirect()
     }
@@ -119,35 +149,34 @@ export class AuthorizeComponent {
   }
 
   /**
-   * Determines whether the domain interstitial should be displayed
-   * based on user domain status, togglz, impersonation, etc.
+   * Determines whether a interstitial should be displayed
    */
-  private canShowDomainInterstitial(): boolean {
-    return (
-      this.hasPrivateDomains &&
-      !this.hasPublicDomains &&
-      this.isOAuthDomainsInterstitialEnabled &&
-      !this.hasDomainInterstitialBeenViewed &&
-      this.isNotImpersonating &&
-      !this.insidePopUpWindows
-    )
+  private isThereInterstitialToShow(): boolean {
+    return !!this.interstitialComponent
   }
 
   /**
-   * Displays the domain interstitial and marks it as viewed.
+   * Displays the interstitial
    */
-  private showDomainInterstitial(): void {
+  private showInterstitial(): void {
+    const portal = new ComponentPortal(this.interstitialComponent)
+
+    const componentRef = this.outlet.attachComponentPortal(portal)
+
+    componentRef.instance.finish.subscribe(() => {
+      this.finishRedirect()
+    })
+
+    componentRef.changeDetectorRef.detectChanges()
+
     this.showAuthorizationComponent = false
     this.showInterstital = true
-    this.interstitialsService
-      .setInterstitialsViewed('DOMAIN_INTERSTITIAL')
-      .subscribe()
   }
 
   /**
    * Loads the user session data.
    */
-  private loadUserSession(): Observable<any> {
+  private loadUserSession(): Observable<UserSession> {
     return this.userService.getUserSession().pipe(first())
   }
 
@@ -161,91 +190,35 @@ export class AuthorizeComponent {
     )
   }
 
-  /**
-   * Checks if the domain interstitial was previously viewed by the user.
-   */
-  private loadInterstitialViewed(): Observable<boolean> {
-    return this.interstitialsService
-      .getInterstitialsViewed('DOMAIN_INTERSTITIAL')
-      .pipe(
-        tap((wasViewed) => {
-          this.hasDomainInterstitialBeenViewed = wasViewed
-        })
-      )
-  }
-
-  /**
-   * Loads togglz (feature flag) state for the OAuth domains interstitial feature.
-   */
-  private loadTogglzState(): Observable<boolean> {
-    return this.togglzService.getStateOf('OAUTH_DOMAINS_INTERSTITIAL').pipe(
-      take(1),
-      tap((state) => (this.isOAuthDomainsInterstitialEnabled = state))
-    )
-  }
-
-  /**
-   * Loads the user emails from the backend and determines public/private domain flags.
-   */
-  private loadEmails(): Observable<EmailsEndpoint> {
-    return this.userService.getUserSession().pipe(
-      take(1),
-      switchMap((session) => {
-        // Load emails only if user is logged in
-        if (session.oauthSessionIsLoggedIn) {
-          return this.recordEmailsService.getEmails().pipe(
-            first(),
-            tap((emails) => {
-              this.originalEmailsBackendCopy = cloneDeep(emails)
-              this.hasPrivateDomains = this.userHasPrivateEmails(emails)
-              this.hasPublicDomains = this.userHasPublicEmails(emails)
-            })
-          )
-        } else {
-          // If user is not logged in, return empty emails object
-          // This scenario is for users who are not logged in and the OAUTH URL is invalid
-          // Those will load this component to display the error message by the component `app-oauth-error`
-          this.originalEmailsBackendCopy = {
-            emails: [],
-            emailDomains: [],
-            errors: [],
-          }
-          return of({} as EmailsEndpoint)
-        }
-      })
-    )
-  }
-
   /**
    * After loading forkJoin data, decide on final flow:
    * show error, show domain interstitial, or show authorization screen.
    */
-  private handleUserSession(userSession: any): void {
-    // Check if user is impersonating
-    this.isNotImpersonating =
-      userSession?.userInfo?.REAL_USER_ORCID ===
-      userSession?.userInfo?.EFFECTIVE_USER_ORCID
-
+  private handleUserSession(userSession: UserSession): void {
     this.oauthSession = userSession.oauthSession
 
     // 1. If the backend returned an error
     if (this.oauthSession && this.oauthSession.error) {
+      this.debugLog(`Oauth session error: ${this.oauthSession.error}`)
       this.showAuthorizationError = true
       this.loading = false
       return
     }
 
     // 2. If the user was already authorized, we might show domain interstitial or just redirect
     if (this.isUserAlreadyAuthorized(this.oauthSession)) {
-      if (this.canShowDomainInterstitial()) {
+      this.debugLog('User alreay authorized this app')
+      if (this.isThereInterstitialToShow()) {
         this.redirectByReportAlreadyAuthorize = true
-        this.showDomainInterstitial()
+        this.showInterstitial()
         this.loading = false
         this.redirectUrl = this.oauthSession.redirectUrl
       } else {
         this.finishRedirectObs(this.oauthSession)
       }
       return
+    } else {
+      this.debugLog('User has not authorized this app')
     }
 
     // 3. Otherwise, show the standard authorization component
@@ -267,21 +240,9 @@ export class AuthorizeComponent {
     return oauthSession.redirectUrl.includes(oauthSession.responseType + '=')
   }
 
-  /**
-   * Helper to check if at least one email domain is public.
-   */
-  private userHasPublicEmails(emails: EmailsEndpoint): boolean {
-    return !!emails.emailDomains?.some(
-      (domain) => domain.visibility === 'PUBLIC'
-    )
-  }
-
-  /**
-   * Helper to check if at least one email domain is private.
-   */
-  private userHasPrivateEmails(emails: EmailsEndpoint): boolean {
-    return !!emails.emailDomains?.some(
-      (domain) => domain.visibility !== 'PUBLIC'
-    )
+  private debugLog(message: string): void {
+    if (runtimeEnvironment.debugger) {
+      console.info('[OAuth]', message)
+    }
   }
 }