Bug 1854918 - Add bio enrollment management (list, add and delete enr…

…ollments) to about:webauthn (r=jschanck,fluent-reviewers,desktop-theme-reviewers,flod,Itiel) Differential Revision: https://phabricator.services.mozilla.com/D189115
dothq · Jan 4, 2024 · dce5c0c · dce5c0c
1 parent 2b3981e
commit dce5c0c
Show file tree

Hide file tree

Showing 10 changed files with 758 additions and 15 deletions.
diff --git a/dom/webauthn/authrs_bridge/src/about_webauthn_controller.rs b/dom/webauthn/authrs_bridge/src/about_webauthn_controller.rs
@@ -6,7 +6,7 @@ use super::*;
 use authenticator::{
     ctap2::commands::{PinUvAuthResult, StatusCode},
     errors::{CommandError, HIDError},
-    CredManagementCmd, InteractiveRequest, InteractiveUpdate, PinError,
+    BioEnrollmentCmd, CredManagementCmd, InteractiveRequest, InteractiveUpdate, PinError,
 };
 use serde::{Deserialize, Serialize};
 
@@ -25,11 +25,13 @@ pub enum RequestWrapper {
     ChangePIN(Pin, Pin),
     SetPIN(Pin),
     CredentialManagement(CredManagementCmd),
+    BioEnrollment(BioEnrollmentCmd),
 }
 
 pub(crate) fn authrs_to_prompt<'a>(e: AuthenticatorError) -> BrowserPromptType<'a> {
     match e {
         AuthenticatorError::PinError(PinError::PinIsTooShort) => BrowserPromptType::PinIsTooShort,
+        AuthenticatorError::PinError(PinError::PinNotSet) => BrowserPromptType::PinNotSet,
         AuthenticatorError::PinError(PinError::PinRequired) => BrowserPromptType::PinRequired,
         AuthenticatorError::PinError(PinError::PinIsTooLong(_)) => BrowserPromptType::PinIsTooLong,
         AuthenticatorError::PinError(PinError::InvalidPin(r)) => {
@@ -88,6 +90,15 @@ pub(crate) fn interactive_status_callback(
                 send_about_prompt(&prompt)?;
                 continue;
             }
+            Ok(StatusUpdate::InteractiveManagement(InteractiveUpdate::BioEnrollmentUpdate((
+                bio_res,
+                puat_res,
+            )))) => {
+                cache_puat(transaction.clone(), puat_res); // We don't care if we fail here. Worst-case: User has to enter PIN more often.
+                let prompt = BrowserPromptType::BioEnrollmentUpdate { result: bio_res };
+                send_about_prompt(&prompt)?;
+                continue;
+            }
             Ok(StatusUpdate::SelectDeviceNotice) => {
                 info!("STATUS: Please select a device by touching one of them.");
                 let prompt = BrowserPromptType::SelectDevice;

diff --git a/dom/webauthn/authrs_bridge/src/lib.rs b/dom/webauthn/authrs_bridge/src/lib.rs
@@ -20,8 +20,8 @@ use authenticator::{
     },
     errors::AuthenticatorError,
     statecallback::StateCallback,
-    AuthenticatorInfo, CredentialManagementResult, InteractiveRequest, ManageResult, Pin,
-    RegisterResult, SignResult, StateMachine, StatusPinUv, StatusUpdate,
+    AuthenticatorInfo, BioEnrollmentResult, CredentialManagementResult, InteractiveRequest,
+    ManageResult, Pin, RegisterResult, SignResult, StateMachine, StatusPinUv, StatusUpdate,
 };
 use base64::Engine;
 use cstr::cstr;
@@ -101,6 +101,9 @@ enum BrowserPromptType<'a> {
     CredentialManagementUpdate {
         result: CredentialManagementResult,
     },
+    BioEnrollmentUpdate {
+        result: BioEnrollmentResult,
+    },
     UnknownError,
 }
 
@@ -1435,6 +1438,7 @@ impl AuthrsService {
                 RequestWrapper::CredentialManagement(c) => {
                     InteractiveRequest::CredentialManagement(c, puat)
                 }
+                RequestWrapper::BioEnrollment(c) => InteractiveRequest::BioEnrollment(c, puat),
             };
             match &guard.as_ref().unwrap().interactive_receiver {
                 Some(channel) => channel.send(command).or(Err(NS_ERROR_FAILURE)),

diff --git a/toolkit/components/aboutwebauthn/content/aboutWebauthn.css b/toolkit/components/aboutwebauthn/content/aboutWebauthn.css
@@ -15,15 +15,15 @@ body {
 }
 
 label {
-    display: block;
+  display: block;
 }
 
 #info-text-div {
-    padding: 20px;
+  padding: 20px;
 }
 
 #ctap-listen-div {
-    padding-top: 15px;
+  padding-top: 15px;
 }
 #ctap-listen-result {
   font-weight: 600;
@@ -62,15 +62,20 @@ label {
 }
 
 .token-info-flex-box {
-    display: flex;
+  display: flex;
 }
 
 .token-info-flex-child {
-    flex: 1;
+  flex: 1;
 }
 
 .token-info-flex-child#authenticator-options {
-    margin-inline-end: 2px;
+  margin-inline-end: 2px;
+}
+
+.bio-enrollment-sample {
+ display: flex;
+ gap: 0.5em;
 }
 
 .button-row {

diff --git a/toolkit/components/aboutwebauthn/content/aboutWebauthn.html b/toolkit/components/aboutwebauthn/content/aboutWebauthn.html
@@ -44,6 +44,12 @@
           data-l10n-id="about-webauthn-credential-management-section-title"
         ></span>
       </div>
+      <div id="bio-enrollments-tab-button" class="category">
+        <span
+          class="tablinks"
+          data-l10n-id="about-webauthn-bio-enrollment-section-title"
+        ></span>
+      </div>
     </div>
 
     <div hidden id="main-content">
@@ -142,6 +148,69 @@ <h3 data-l10n-id="about-webauthn-info-subsection-title"></h3>
         ></button>
       </div>
 
+      <div
+        hidden
+        class="tabcontent bio-enrollment-section"
+        id="bio-enrollment-section"
+      >
+        <h2
+          class="categoryTitle"
+          data-l10n-id="about-webauthn-bio-enrollment-section-title"
+        ></h2>
+        <div
+          hidden
+          id="bio-enrollment-list-subsection"
+          class="token-info-flex-child"
+        >
+          <h3
+            data-l10n-id="about-webauthn-bio-enrollment-list-subsection-title"
+          ></h3>
+          <div hidden id="bio-enrollment-list-empty-label">
+            <label
+              hidden
+              data-l10n-id="about-webauthn-enrollment-list-empty"
+            ></label>
+          </div>
+          <table id="bio-enrollment-list"></table>
+        </div>
+        <button
+          class="bio-enrollment-button button-row"
+          id="list-bio-enrollments-button"
+          data-l10n-id="about-webauthn-list-bio-enrollments-button"
+        ></button>
+        <button
+          class="bio-enrollment-button button-row"
+          id="add-bio-enrollment-button"
+          data-l10n-id="about-webauthn-add-bio-enrollment-button"
+        ></button>
+      </div>
+      <div
+        hidden
+        class="tabcontent add-bio-enrollment-section"
+        id="add-bio-enrollment-section"
+      >
+        <h2
+          class="categoryTitle"
+          data-l10n-id="about-webauthn-add-bio-enrollment-section-title"
+        ></h2>
+        <label
+          for="enrollment-name"
+          data-l10n-id="about-webauthn-enrollment-name-label"
+        ></label>
+        <input id="enrollment-name" name="enrollment-name" autofocus />
+        <button
+          class="bio-enrollment-button button-row"
+          id="start-enrollment-button"
+          data-l10n-id="about-webauthn-start-enrollment-button"
+        ></button>
+        <button
+          id="cancel-enrollment-button"
+          class="button-row"
+          data-l10n-id="about-webauthn-cancel-button"
+        ></button>
+        <div id="enrollment-update"></div>
+      </div>
+
       <div
         hidden
         class="tabcontent pin-required-section"