Extend test app and demo issuer front-ends with "is adult" credential (…

…#2133)

* Extend test app and demo issuer front-ends with "is adult" credential

This PR adds front-end support for the demo applications to go through
the attribute sharing flow with an "Is adult person" credential.

* Remove trailing comma from consent message title

demos/test-app/src/index.tsx

@@ -345,6 +345,10 @@ const credentialSpecs = {
     credentialType: "UniversityDegreeCredential",
     arguments: { institutionName: "DFINITY College of Engineering" },
   },
+  adult: {
+    credentialType: "VerifiedAdult",
+    arguments: { age_at_least: 18 },
+  },
 } as const;
 
 type CredType = keyof typeof credentialSpecs;
@@ -507,6 +511,9 @@ const App = () => {
       <button data-action="verify-grad" onClick={() => startVcFlow("grad")}>
         Verify Graduate Credential
       </button>
+      <button data-action="verify-adult" onClick={() => startVcFlow("adult")}>
+        Verify Adult Person Credential
+      </button>
 
       <pre data-role="presentation">{latestPresentation}</pre>
     </>

demos/vc_issuer/app/index.tsx

@@ -73,6 +73,13 @@ const App = () => {
       const res: string = await vcIssuer.addEmployee({ principal });
       setCanisterLogs([...canisterLogs, res]);
     });
+  const addAdult = (principal: string) =>
+    withDisabled(async () => {
+      const canisterId = readCanisterId();
+      const vcIssuer = new VcIssuer(canisterId);
+      const res: string = await vcIssuer.addAdult({ principal });
+      setCanisterLogs([...canisterLogs, res]);
+    });
 
   return (
     <main data-page="add-employee">
@@ -131,6 +138,19 @@ const App = () => {
             Add employee
           </button>
         )}
+        {principal ? (
+          <button
+            data-action="add-adult"
+            disabled={dsbld}
+            onClick={() => addAdult(principal)}
+          >
+            Add Adult
+          </button>
+        ) : (
+          <button data-action="add-adult" disabled={dsbld || !principal}>
+            Add Adult
+          </button>
+        )}
       </section>
     </main>
   );

demos/vc_issuer/app/issuer.ts

@@ -31,4 +31,9 @@ export class VcIssuer {
     const actor = await this.createActor();
     return await actor.add_employee(Principal.fromText(principal));
   };
+
+  addAdult = async ({ principal }: { principal: string }): Promise<string> => {
+    const actor = await this.createActor();
+    return await actor.add_adult(Principal.fromText(principal));
+  };
 }

demos/vc_issuer/src/consent_message.rs

@@ -24,10 +24,10 @@ const DEGREE_VC_DESCRIPTION_DE: &str = r###"# Bachelor of Engineering, {institut
 
 Ausweis, der bestätigt, dass der Besitzer oder die Besitzerin einen Bachelorabschluss in einer Ingenieurwissenschaft des {institute} besitzt."###;
 
-const ADULT_VC_DESCRIPTION_EN: &str = r###"# Verified Adult,
+const ADULT_VC_DESCRIPTION_EN: &str = r###"# Verified Adult
 
 Credential that states that the holder's age is at least {age_at_least} years."###;
-const ADULT_VC_DESCRIPTION_DE: &str = r###"# Erwachsene Person,
+const ADULT_VC_DESCRIPTION_DE: &str = r###"# Erwachsene Person
 
 Ausweis, der bestätigt, dass der Besitzer oder die Besitzerin mindestens {age_at_least} Jahre alt ist."###;