From 9d618b4ae9ab9978e1357bd863e0fd8caa3f86b7 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 20 Nov 2024 14:01:40 -0800
Subject: [PATCH] minor text revisions/additions and add colors/icons to totp
 token expiry countdown

---
 .../platform/dynamic-secrets/totp.mdx         |  2 +-
 .../CreateDynamicSecretLease.tsx              | 22 ++++++++++++++-----
 .../EditDynamicSecretTotpForm.tsx             |  4 ++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/docs/documentation/platform/dynamic-secrets/totp.mdx b/docs/documentation/platform/dynamic-secrets/totp.mdx
index ca9b6eae1..201a402e1 100644
--- a/docs/documentation/platform/dynamic-secrets/totp.mdx
+++ b/docs/documentation/platform/dynamic-secrets/totp.mdx
@@ -7,7 +7,7 @@ The Infisical TOTP dynamic secret allows you to generate time-based one-time pas
 
 ## Prerequisite
 
-- Infisical requires either the OTP url or the secret key from the TOTP provider.
+- Infisical requires either an OTP url or a secret key from a TOTP provider.
 
 ## Set up Dynamic Secrets with TOTP
 
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
index 21c71837d..84fe76c2e 100644
--- a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faClock, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
@@ -95,11 +95,23 @@ const TotpOutputDisplay = ({
   }, [totp, remainingSeconds]);
 
   return (
-    <div>
+    <div className="h-36">
       <OutputDisplay label="Time-based one-time password" value={totp} />
-      {remainingTime > 0 && (
-        <div>
-          Valid for {remainingTime} {remainingTime > 1 ? "seconds" : "second"}
+      {remainingTime > 0 ? (
+        <div
+          className={`ml-2 flex items-center text-sm ${
+            remainingTime < 10 ? "text-red-500" : "text-yellow-500"
+          } transition-colors duration-500`}
+        >
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          <span>
+            Expires in {remainingTime} {remainingTime > 1 ? "seconds" : "second"}
+          </span>
+        </div>
+      ) : (
+        <div className="ml-2 flex items-center text-sm text-red-500">
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          Expired
         </div>
       )}
       {shouldShowRegenerate && (
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
index 07070ccea..1e2e01c82 100644
--- a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
@@ -295,6 +295,10 @@ export const EditDynamicSecretTotpForm = ({
                       )}
                     />
                   </div>
+                  <p className="mb-8 text-sm font-normal text-gray-400">
+                    The period, digits, and algorithm values can remain at their defaults unless
+                    your TOTP provider specifies otherwise.
+                  </p>
                 </>
               )}
             </div>