Add authorization request URI handling and update presentation options component

Author: gdimtsas

src/app/core/constants/general.ts

@@ -1,4 +1,9 @@
+import { Profile, RequestUriMethod } from "../models/TransactionInitializationRequest";
+
 export const ACTIVE_TRANSACTION = 'ACTIVE_TRANSACTION';
 export const SCHEME = 'scheme';
 export const DEFAULT_SCHEME = 'haip-vp://';
 export const ISSUER_CHAIN = 'ISSUER_CHAIN';
+
+export const DefaultRequestUriMethod: RequestUriMethod = 'get';
+export const DefaultProfile: Profile = 'openid4vp';

src/app/core/models/TransactionInitializationRequest.ts

@@ -9,6 +9,7 @@ export type TransactionInitializationRequest = {
   dcql_query: DCQL;
   issuer_chain?: string;
   profile: Profile;
+  authorization_request_uri: string;
 };
 
 export type PresentationQuery = DCQL;

src/app/core/services/dcql-service.ts

@@ -23,6 +23,7 @@ export class DCQLService {
     selectedAttributes: { [id: string]: string[] },
     selectedRequestUriMethod: RequestUriMethod,
     selectedProfile: Profile,
+    authorizationRequestUri: string,
     issuerChain?: string
   ): TransactionInitializationRequest {
     let dcqlQueries: CredentialQuery[] = selectedAttestations.map(
@@ -45,7 +46,8 @@ export class DCQLService {
       nonce: uuidv4(),
       request_uri_method: selectedRequestUriMethod,
       issuer_chain: issuerChain,
-      profile: selectedProfile
+      profile: selectedProfile,
+      authorization_request_uri: authorizationRequestUri
     };
   }
 

src/app/features/presentation-request-preparation/components/presentation-options/presentation-options.component.html

@@ -59,6 +59,7 @@ <h5>Presentation Options</h5>
             placeholder="scheme://"
             [formControl]="authorizationSchemeControl"
             autocomplete="off"
+            (input)="authorizationSchemeChange.emit(authorizationSchemeControl.value)"
           />
         </mat-form-field>
       </div>

src/app/features/presentation-request-preparation/components/presentation-options/presentation-options.component.ts

@@ -25,5 +25,5 @@ export class PresentationOptionsComponent {
 
   @Output() profileChange = new EventEmitter<Profile>();
   @Output() requestUriMethodChange = new EventEmitter<RequestUriMethod>();
-
+  @Output() authorizationSchemeChange = new EventEmitter<string>();
 }

src/app/features/presentation-request-preparation/home/home.component.html

@@ -42,6 +42,7 @@ <h4>Define your presentation request</h4>
               [authorizationSchemeControl]="authorizationSchemeControl"
               (profileChange)="handleProfileChangedEvent($event)"
               (requestUriMethodChange)="handleRequestUriMethodChangedEvent($event)"
+              (authorizationSchemeChange)="handleAuthorizationSchemeChangedEvent($event)"
             ></vc-presentation-options>
 
             <mat-expansion-panel>

src/app/features/presentation-request-preparation/home/home.component.ts

@@ -17,9 +17,16 @@ import {
   Validators,
 } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { AttestationSelection, AttributeSelectionMethod } from '@features/presentation-request-preparation/models/AttestationSelection';
+import {
+  AttestationSelection,
+  AttributeSelectionMethod,
+} from '@features/presentation-request-preparation/models/AttestationSelection';
 import { AttributeSelectionComponent } from '@features/presentation-request-preparation/components/attribute-selection/attribute-selection.component';
-import { Profile, RequestUriMethod, TransactionInitializationRequest } from '@core/models/TransactionInitializationRequest';
+import {
+  Profile,
+  RequestUriMethod,
+  TransactionInitializationRequest,
+} from '@core/models/TransactionInitializationRequest';
 import { VerifierEndpointService } from '@core/services/verifier-endpoint.service';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -30,7 +37,13 @@ import { AttributesSelectionEvent } from '../models/AttributesSelection';
 import { DCQLService } from '@app/core/services/dcql-service';
 import { Subject } from 'rxjs';
 import { SessionStorageService } from '@app/core/services/session-storage.service';
-import { DEFAULT_SCHEME, ISSUER_CHAIN, SCHEME } from '@app/core/constants/general';
+import {
+  DEFAULT_SCHEME,
+  DefaultProfile,
+  DefaultRequestUriMethod,
+  ISSUER_CHAIN,
+  SCHEME,
+} from '@app/core/constants/general';
 import { SUPPORTED_ATTESTATIONS } from '@app/core/constants/attestation-definitions';
 import { PresentationOptionsComponent } from '../components/presentation-options/presentation-options.component';
 
@@ -53,7 +66,7 @@ import { PresentationOptionsComponent } from '../components/presentation-options
     ClipboardModule,
     MatTooltipModule,
     MatButtonToggleModule,
-    PresentationOptionsComponent
+    PresentationOptionsComponent,
   ],
   providers: [VerifierEndpointService],
   selector: 'vc-presentation-preparation-home',
@@ -65,23 +78,21 @@ export class HomeComponent implements OnDestroy {
     private readonly navigateService: NavigateService,
     private readonly verifierEndpointService: VerifierEndpointService,
     private readonly dcqlService: DCQLService,
-    private readonly sessionStorageService: SessionStorageService,
+    private readonly sessionStorageService: SessionStorageService
   ) {}
 
   actions: BodyAction[] = HOME_ACTIONS;
 
-  requestUriMethodControl = new FormControl<RequestUriMethod>('get', {
+  requestUriMethodControl = new FormControl<RequestUriMethod>(DefaultRequestUriMethod, {
     nonNullable: true,
   });
   authorizationSchemeControl = new FormControl<string>(
     this.getStoredAuthorizationScheme(),
     { nonNullable: true }
   );
-  presentationProfileControl = new FormControl<Profile>(
-    'openid4vp',
-    { nonNullable: true }
-  );
-
+  presentationProfileControl = new FormControl<Profile>(DefaultProfile, {
+    nonNullable: true,
+  });
 
   private readonly _formBuilder = inject(FormBuilder);
   formGroup = this._formBuilder.group({
@@ -90,8 +101,9 @@ export class HomeComponent implements OnDestroy {
 
   selectedAttestations: AttestationSelection[] | null = null;
   selectedAttributes: { [id: string]: string[] } | null = {};
-  selectedRequestUriMethod: RequestUriMethod = 'get';
-  selectedProfile: Profile = 'openid4vp';
+  selectedRequestUriMethod: RequestUriMethod = DefaultRequestUriMethod;
+  selectedProfile: Profile = DefaultProfile;
+  authorizationRequestUri: string = DEFAULT_SCHEME;
 
   initializationRequest: TransactionInitializationRequest | null = null;
 
@@ -104,21 +116,23 @@ export class HomeComponent implements OnDestroy {
 
   handleSelectionChangedEvent($event: AttestationSelection[]) {
     this.selectedAttestations = $event;
-    
+
     if (this.selectedAttestations) {
-      this.selectedAttestations.forEach(attestation => {
+      this.selectedAttestations.forEach((attestation) => {
         const attestationDef = SUPPORTED_ATTESTATIONS[attestation.type];
         if (attestationDef) {
           const neverSelectivelyDisclosableAttributes = attestationDef.dataSet
-            .filter(dataElement => dataElement.selectivelyDisclosable === 'never')
-            .map(dataElement => dataElement.identifier);
+            .filter(
+              (dataElement) => dataElement.selectivelyDisclosable === 'never'
+            )
+            .map((dataElement) => dataElement.identifier);
           if (neverSelectivelyDisclosableAttributes.length > 0) {
-            this.selectedAttributes![attestation.type] = neverSelectivelyDisclosableAttributes;
+            this.selectedAttributes![attestation.type] =
+              neverSelectivelyDisclosableAttributes;
           }
         }
       });
     }
-    
   }
 
   handleAttributesCollectedEvent($event: AttributesSelectionEvent) {
@@ -165,21 +179,37 @@ export class HomeComponent implements OnDestroy {
     }
   }
 
+  handleAuthorizationSchemeChangedEvent($event: string) {
+    this.authorizationRequestUri = $event;
+    if (this.selectedAttestations && this.selectedAttributes) {
+      this.initializationRequest = this.prepareInitializationRequest(
+        this.selectedAttestations,
+        this.selectedAttributes,
+        this.selectedRequestUriMethod,
+        this.selectedProfile
+      );
+    } else {
+      this.initializationRequest = null;
+    }
+  }
+
   private prepareInitializationRequest(
     selectedAttestations: AttestationSelection[],
     selectedAttributes: { [id: string]: string[] },
     selectedRequestUriMethod: RequestUriMethod,
     selectedProfile: Profile
   ): TransactionInitializationRequest {
-
-    const issuerChain = this.sessionStorageService.get(ISSUER_CHAIN) ?? undefined;
+    const issuerChain =
+      this.sessionStorageService.get(ISSUER_CHAIN) ?? undefined;
 
     return this.dcqlService.dcqlPresentationRequest(
       selectedAttestations,
       selectedAttributes,
       selectedRequestUriMethod,
       selectedProfile,
-      issuerChain);
+      this.authorizationRequestUri,
+      issuerChain
+    );
   }
 
   proceedToInvokeWallet() {
@@ -196,21 +226,32 @@ export class HomeComponent implements OnDestroy {
   }
 
   attestationsSelected(): boolean {
-    return this.selectedAttestations !== null
-      && this.selectedAttestations
-      .filter((attestation) =>
-        attestation.format !== null && attestation.attributeSelectionMethod !== null
-      ).
-      length > 0;
+    return (
+      this.selectedAttestations !== null &&
+      this.selectedAttestations.filter(
+        (attestation) =>
+          attestation.format !== null &&
+          attestation.attributeSelectionMethod !== null
+      ).length > 0
+    );
   }
 
   attributesSelected(): boolean {
-    return this.selectedAttestations !== null
-    && this.selectedAttestations.filter((attestation) => {
-      if(attestation.attributeSelectionMethod === AttributeSelectionMethod.SELECTABLE) {
-        return this.selectedAttributes?.[attestation.type]?.length?? 0 > 0;
-      } else return attestation.attributeSelectionMethod === AttributeSelectionMethod.ALL_ATTRIBUTES;
-    }).length === this.selectedAttestations.length;
+    return (
+      this.selectedAttestations !== null &&
+      this.selectedAttestations.filter((attestation) => {
+        if (
+          attestation.attributeSelectionMethod ===
+          AttributeSelectionMethod.SELECTABLE
+        ) {
+          return this.selectedAttributes?.[attestation.type]?.length ?? 0 > 0;
+        } else
+          return (
+            attestation.attributeSelectionMethod ===
+            AttributeSelectionMethod.ALL_ATTRIBUTES
+          );
+      }).length === this.selectedAttestations.length
+    );
   }
 
   canProceed() {