From 1274c0445e1cc17f0fc2f37b25b8ceec63e07ae5 Mon Sep 17 00:00:00 2001
From: rohan-chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Wed, 1 Nov 2023 16:32:48 +0530
Subject: [PATCH] feat: add mask and no-capture classes to sensitive fields

---
 frontend/app/[team]/apps/[app]/members/page.tsx          | 4 ++--
 frontend/app/[team]/apps/[app]/page.tsx                  | 4 ++--
 frontend/app/[team]/apps/[app]/tokens/page.tsx           | 2 +-
 frontend/app/[team]/newdevice/page.tsx                   | 2 +-
 frontend/app/[team]/settings/page.tsx                    | 2 +-
 frontend/app/[team]/tokens/page.tsx                      | 2 +-
 frontend/app/webauth/[requestCode]/page.tsx              | 2 +-
 frontend/components/apps/NewAppDialog.tsx                | 2 +-
 frontend/components/apps/tokens/SecretTokens.tsx         | 4 +++-
 frontend/components/auth/UnlockKeyringDialog.tsx         | 2 +-
 frontend/components/environments/SecretPropertyDiffs.tsx | 6 +++---
 frontend/components/logs/SecretLogs.tsx                  | 8 +-------
 frontend/components/onboarding/AccountPassword.tsx       | 2 +-
 13 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/app/[team]/apps/[app]/members/page.tsx b/frontend/app/[team]/apps/[app]/members/page.tsx
index d1a63f3c4..0758dbfab 100644
--- a/frontend/app/[team]/apps/[app]/members/page.tsx
+++ b/frontend/app/[team]/apps/[app]/members/page.tsx
@@ -410,7 +410,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                                         minLength={16}
                                         required
                                         autoFocus
-                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                                       />
                                       <button
                                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
@@ -820,7 +820,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                               minLength={16}
                               required
                               autoFocus
-                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                             />
                             <button
                               className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/apps/[app]/page.tsx b/frontend/app/[team]/apps/[app]/page.tsx
index 994d87666..cd8933f20 100644
--- a/frontend/app/[team]/apps/[app]/page.tsx
+++ b/frontend/app/[team]/apps/[app]/page.tsx
@@ -234,7 +234,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
           <div className="flex justify-between items-center w-full">
             <code
               className={clsx(
-                'break-all whitespace-break-spaces max-w-full',
+                'break-all whitespace-break-spaces max-w-full ph-mask',
                 sameAsProd ? 'text-amber-500' : 'text-emerald-500'
               )}
             >
@@ -299,7 +299,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
             >
               <td
                 className={clsx(
-                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2',
+                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2 ph-no-capture',
                   open ? 'font-bold' : 'font-medium'
                 )}
               >
diff --git a/frontend/app/[team]/apps/[app]/tokens/page.tsx b/frontend/app/[team]/apps/[app]/tokens/page.tsx
index 613a5dbdc..f66fbb425 100644
--- a/frontend/app/[team]/apps/[app]/tokens/page.tsx
+++ b/frontend/app/[team]/apps/[app]/tokens/page.tsx
@@ -231,7 +231,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
             </div>
             {!appSecret && <RotateAppDialog />}
           </div>
-          <code className="text-xs text-red-500">{appSecret || appSecretPlaceholder}</code>
+          <code className="text-xs text-red-500 ph-mask">{appSecret || appSecretPlaceholder}</code>
         </div>
       </div>
     )
diff --git a/frontend/app/[team]/newdevice/page.tsx b/frontend/app/[team]/newdevice/page.tsx
index 8dbf52b3a..21fc78aa6 100644
--- a/frontend/app/[team]/newdevice/page.tsx
+++ b/frontend/app/[team]/newdevice/page.tsx
@@ -241,7 +241,7 @@ export default function NewDevice({ params }: { params: { team: string } }) {
                       minLength={16}
                       required
                       autoFocus
-                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                     />
                     <button
                       className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx
index f84b8c621..8a4b1118c 100644
--- a/frontend/app/[team]/settings/page.tsx
+++ b/frontend/app/[team]/settings/page.tsx
@@ -133,7 +133,7 @@ const ViewRecoveryDialog = () => {
                                 minLength={16}
                                 required
                                 autoFocus
-                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                               />
                               <button
                                 className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/tokens/page.tsx b/frontend/app/[team]/tokens/page.tsx
index 602b92de1..7ed729f9a 100644
--- a/frontend/app/[team]/tokens/page.tsx
+++ b/frontend/app/[team]/tokens/page.tsx
@@ -206,7 +206,7 @@ const CreateUserTokenDialog = (props: { organisationId: string }) => {
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-blue-500">{userToken}</code>
+                        <code className="text-xs break-all text-blue-500 ph-mask">{userToken}</code>
                       </div>
                     </div>
                   ) : (
diff --git a/frontend/app/webauth/[requestCode]/page.tsx b/frontend/app/webauth/[requestCode]/page.tsx
index d53654eeb..c5ab2be3f 100644
--- a/frontend/app/webauth/[requestCode]/page.tsx
+++ b/frontend/app/webauth/[requestCode]/page.tsx
@@ -243,7 +243,7 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                         minLength={16}
                         required
                         autoFocus
-                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                       />
                       <button
                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/components/apps/NewAppDialog.tsx b/frontend/components/apps/NewAppDialog.tsx
index c0b3527f0..f9349505c 100644
--- a/frontend/components/apps/NewAppDialog.tsx
+++ b/frontend/components/apps/NewAppDialog.tsx
@@ -510,7 +510,7 @@ export default function NewAppDialog(props: {
                                 type={showPw ? 'text' : 'password'}
                                 minLength={16}
                                 required
-                                className="w-full "
+                                className="w-full ph-mask"
                               />
                               <button
                                 className="absolute inset-y-0 right-4"
diff --git a/frontend/components/apps/tokens/SecretTokens.tsx b/frontend/components/apps/tokens/SecretTokens.tsx
index af29839c3..73fe73417 100644
--- a/frontend/components/apps/tokens/SecretTokens.tsx
+++ b/frontend/components/apps/tokens/SecretTokens.tsx
@@ -280,7 +280,9 @@ const CreateServiceTokenDialog = (props: { organisationId: string; appId: string
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-teal-500">{serviceToken}</code>
+                        <code className="text-xs break-all text-teal-500 ph-mask">
+                          {serviceToken}
+                        </code>
                       </div>
                     </div>
                   ) : (
diff --git a/frontend/components/auth/UnlockKeyringDialog.tsx b/frontend/components/auth/UnlockKeyringDialog.tsx
index 59f8bb434..3f2439a45 100644
--- a/frontend/components/auth/UnlockKeyringDialog.tsx
+++ b/frontend/components/auth/UnlockKeyringDialog.tsx
@@ -110,7 +110,7 @@ export default function UnlockKeyringDialog(props: { organisationId: string }) {
                             minLength={16}
                             required
                             autoFocus
-                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-mask"
                           />
                           <button
                             className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/components/environments/SecretPropertyDiffs.tsx b/frontend/components/environments/SecretPropertyDiffs.tsx
index 2f4de44e9..e70b7fafc 100644
--- a/frontend/components/environments/SecretPropertyDiffs.tsx
+++ b/frontend/components/environments/SecretPropertyDiffs.tsx
@@ -30,7 +30,7 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.key !== previousItem.key && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">KEY:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.key}</s>
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-mask">{previousItem.key}</s>
           <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
             {historyItem!.key}
           </span>
@@ -40,7 +40,7 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.value !== previousItem.value && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">VALUE:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.value}</s>
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-mask">{previousItem.value}</s>
           <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
             {historyItem!.value}
           </span>
@@ -50,7 +50,7 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.comment !== previousItem.comment && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">COMMENT:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.comment}</s>
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-mask">{previousItem.comment}</s>
           <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
             {historyItem!.comment}
           </span>
diff --git a/frontend/components/logs/SecretLogs.tsx b/frontend/components/logs/SecretLogs.tsx
index 3680c2a21..c7f0c9190 100644
--- a/frontend/components/logs/SecretLogs.tsx
+++ b/frontend/components/logs/SecretLogs.tsx
@@ -194,12 +194,6 @@ export default function SecretLogs(props: { app: string }) {
         // Decrypt event fields
         decryptedEvent!.key = await decryptAsymmetric(event!.key, privateKey, publicKey)
 
-        // decryptedEvent!.value = await decryptAsymmetric(event!.value, privateKey, publicKey)
-
-        // if (decryptedEvent!.comment !== '') {
-        //   decryptedEvent!.comment = await decryptAsymmetric(event!.comment, privateKey, publicKey)
-        // }
-
         setDecryptedEvent(decryptedEvent)
       }
 
@@ -319,7 +313,7 @@ export default function SecretLogs(props: { app: string }) {
 
                   <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 text-sm">
                     <LogField label="Key">
-                      <div className="flex items-center gap-2">{decryptedEvent?.key}</div>
+                      <div className="flex items-center gap-2 ph-mask">{decryptedEvent?.key}</div>
                     </LogField>
 
                     <LogField label="IP address"> {log.ipAddress}</LogField>
diff --git a/frontend/components/onboarding/AccountPassword.tsx b/frontend/components/onboarding/AccountPassword.tsx
index da5030972..7ddccda1f 100644
--- a/frontend/components/onboarding/AccountPassword.tsx
+++ b/frontend/components/onboarding/AccountPassword.tsx
@@ -98,7 +98,7 @@ export const AccountPassword = (props: AccountPasswordProps) => {
             type={showPw2 ? 'text' : 'password'}
             minLength={16}
             required
-            className="w-full"
+            className="w-full ph-mask"
           />
           <button
             className="absolute inset-y-0 right-4 text-neutral-500"