From e18344a9cdb6e7d121908572efa3af36c4a29e00 Mon Sep 17 00:00:00 2001
From: Pavithra Ramesh <pavithrar@google.com>
Date: Thu, 8 Dec 2022 09:33:28 -0800
Subject: [PATCH] Expose enrollmentCompletionDeadline field in TotpSecret.

Also changed the demo app to display this field as a countdown.
---
 common/api-review/auth.api.md            |  1 +
 packages/auth/demo/public/index.html     |  2 +-
 packages/auth/demo/public/style.css      |  6 ++++++
 packages/auth/demo/src/index.js          | 21 +++++++++++++++++++++
 packages/auth/src/mfa/assertions/totp.ts | 10 ++++++----
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/common/api-review/auth.api.md b/common/api-review/auth.api.md
index 738c72048bb..5b147491212 100644
--- a/common/api-review/auth.api.md
+++ b/common/api-review/auth.api.md
@@ -767,6 +767,7 @@ export interface TotpMultiFactorInfo extends MultiFactorInfo {
 export class TotpSecret {
     readonly codeIntervalSeconds: number;
     readonly codeLength: number;
+    readonly enrollmentCompletionDeadline: string;
     // Warning: (ae-forgotten-export) The symbol "StartTotpMfaEnrollmentResponse" needs to be exported by the entry point index.d.ts
     //
     // @internal (undocumented)
diff --git a/packages/auth/demo/public/index.html b/packages/auth/demo/public/index.html
index e8a7c64f42f..1a30d575013 100644
--- a/packages/auth/demo/public/index.html
+++ b/packages/auth/demo/public/index.html
@@ -530,7 +530,7 @@
                     </button>
                     <br>
                     <p hidden class="totp-text" id="totp-text"> Please scan the QR code below in a TOTP app </p>
-                    <br>
+                    <p hidden class="totp-deadline" id="totp-deadline"></p>
                     <img hidden class="totp-qr-image" id="totp-qr-image"/>
                     <br> 
                     <input type="text" id="enroll-mfa-totp-verification-code"
diff --git a/packages/auth/demo/public/style.css b/packages/auth/demo/public/style.css
index 84750c29ea1..1a7554ae618 100644
--- a/packages/auth/demo/public/style.css
+++ b/packages/auth/demo/public/style.css
@@ -180,6 +180,12 @@ input + .form,
 .totp-text {
   font-family: 'Courier New', Courier;
 }
+
+.totp-deadline {
+  font-family: 'Courier New', Courier;
+  color: #d9534f;
+}
+
 .totp-qr-image {
   height: 120px;
   margin-right: 10px;
diff --git a/packages/auth/demo/src/index.js b/packages/auth/demo/src/index.js
index 5cd16dd9722..d0dd59a738b 100644
--- a/packages/auth/demo/src/index.js
+++ b/packages/auth/demo/src/index.js
@@ -675,6 +675,27 @@ async function onStartEnrollWithTotpMultiFactor() {
     );
     const url = totpSecret.generateQrCodeUrl('test', 'testissuer');
     console.log('TOTP URL is ' + url);
+    console.log(
+      'Finalize sign in by ' + totpSecret.enrollmentCompletionDeadline
+    );
+    // display the numbr of seconds left to enroll.
+    $('p.totp-deadline').show();
+    var id = setInterval(function () {
+      var deadline = new Date(totpSecret.enrollmentCompletionDeadline);
+      var t = deadline - new Date().getTime();
+      if (t < 0) {
+        clearInterval(id);
+        document.getElementById('totp-deadline').innerText =
+          'TOTP enrollment expired!';
+      } else {
+        var minutes = Math.floor(t / (1000 * 60));
+        var seconds = Math.floor((t % (60 * 1000)) / 1000);
+        // accessing the field using $ does not work here.
+        document.getElementById(
+          'totp-deadline'
+        ).innerText = `Time left - ${minutes} minutes, ${seconds} seconds.`;
+      }
+    }, 1000);
     // Use the QRServer API documented at https://goqr.me/api/doc/
     const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${url}&amp;size=30x30`;
     $('img.totp-qr-image').attr('src', qrCodeUrl).show();
diff --git a/packages/auth/src/mfa/assertions/totp.ts b/packages/auth/src/mfa/assertions/totp.ts
index 00c80a94fd2..5bbc7febe07 100644
--- a/packages/auth/src/mfa/assertions/totp.ts
+++ b/packages/auth/src/mfa/assertions/totp.ts
@@ -199,9 +199,11 @@ export class TotpSecret {
    * The interval (in seconds) when the OTP codes should change.
    */
   readonly codeIntervalSeconds: number;
-  // TODO(prameshj) - make this public after API review.
+  /**
+   * The timestamp(UTC string) by which TOTP enrollment should be completed.
+   */
   // This can be used by callers to show a countdown of when to enter OTP code by.
-  private readonly finalizeEnrollmentBy: string;
+  readonly enrollmentCompletionDeadline: string;
 
   // The public members are declared outside the constructor so the docs can be generated.
   private constructor(
@@ -209,7 +211,7 @@ export class TotpSecret {
     hashingAlgorithm: string,
     codeLength: number,
     codeIntervalSeconds: number,
-    finalizeEnrollmentBy: string,
+    enrollmentCompletionDeadline: string,
     private readonly sessionInfo: string,
     private readonly auth: AuthInternal
   ) {
@@ -217,7 +219,7 @@ export class TotpSecret {
     this.hashingAlgorithm = hashingAlgorithm;
     this.codeLength = codeLength;
     this.codeIntervalSeconds = codeIntervalSeconds;
-    this.finalizeEnrollmentBy = finalizeEnrollmentBy;
+    this.enrollmentCompletionDeadline = enrollmentCompletionDeadline;
   }
 
   /** @internal */