From 87b1d495443ef8fd49947be95b30374cf3e6a342 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Fri, 18 Apr 2025 13:49:10 +0200
Subject: [PATCH] Refactor credential detail component structure (#771)

---
 .../CredentialDetails/AliasBlock.tsx          |  65 +++++
 .../CredentialDetails/EmailBlock.tsx          |  18 ++
 .../CredentialDetails/HeaderBlock.tsx         |  60 +++++
 .../LoginCredentialsBlock.tsx                 |  50 ++++
 .../CredentialDetails/NotesBlock.tsx          |  42 ++++
 .../CredentialDetails/TotpBlock.tsx           |  17 ++
 .../components/CredentialDetails/index.tsx    |  15 ++
 .../popup/pages/CredentialDetails.tsx         | 238 ++----------------
 8 files changed, 285 insertions(+), 220 deletions(-)
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/EmailBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx

diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx
new file mode 100644
index 000000000..2b65c2365
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Credential } from '../../../../utils/types/Credential';
+import { FormInputCopyToClipboard } from '../../components/FormInputCopyToClipboard';
+
+type AliasBlockProps = {
+  credential: Credential;
+  isValidDate: (date: string | null | undefined) => boolean;
+}
+
+/**
+ * Render the alias block.
+ */
+const AliasBlock: React.FC<AliasBlockProps> = ({ credential, isValidDate }) => {
+  const hasFirstName = Boolean(credential.Alias?.FirstName?.trim());
+  const hasLastName = Boolean(credential.Alias?.LastName?.trim());
+  const hasNickName = Boolean(credential.Alias?.NickName?.trim());
+  const hasBirthDate = isValidDate(credential.Alias?.BirthDate);
+
+  if (!hasFirstName && !hasLastName && !hasNickName && !hasBirthDate) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Alias</h2>
+      {(hasFirstName || hasLastName) && (
+        <FormInputCopyToClipboard
+          id="fullName"
+          label="Full Name"
+          value={[credential.Alias?.FirstName, credential.Alias?.LastName].filter(Boolean).join(' ')}
+        />
+      )}
+      {hasFirstName && (
+        <FormInputCopyToClipboard
+          id="firstName"
+          label="First Name"
+          value={credential.Alias?.FirstName ?? ''}
+        />
+      )}
+      {hasLastName && (
+        <FormInputCopyToClipboard
+          id="lastName"
+          label="Last Name"
+          value={credential.Alias?.LastName ?? ''}
+        />
+      )}
+      {hasBirthDate && (
+        <FormInputCopyToClipboard
+          id="birthDate"
+          label="Birth Date"
+          value={new Date(credential.Alias?.BirthDate).toISOString().split('T')[0]}
+        />
+      )}
+      {hasNickName && (
+        <FormInputCopyToClipboard
+          id="nickName"
+          label="Nickname"
+          value={credential.Alias?.NickName ?? ''}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AliasBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/EmailBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/EmailBlock.tsx
new file mode 100644
index 000000000..3c7d7b320
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/EmailBlock.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { EmailPreview } from '../../components/EmailPreview';
+
+type EmailBlockProps = {
+  email: string;
+  isSupported: boolean;
+}
+
+/**
+ * Render the email block.
+ */
+const EmailBlock: React.FC<EmailBlockProps> = ({ email, isSupported }) => (
+  <>
+    {isSupported && <EmailPreview email={email} />}
+  </>
+);
+
+export default EmailBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx
new file mode 100644
index 000000000..1e23a3eb7
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Credential } from '../../../../utils/types/Credential';
+import SqliteClient from '../../../../utils/SqliteClient';
+
+type HeaderBlockProps = {
+  credential: Credential;
+  onOpenNewPopup: () => void;
+}
+
+/**
+ * Render the header block.
+ */
+const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential, onOpenNewPopup }) => (
+  <div className="mb-6">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center">
+        <img
+          src={SqliteClient.imgSrcFromBytes(credential.Logo)}
+          alt={credential.ServiceName}
+          className="w-12 h-12 rounded-lg mr-4"
+        />
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
+          {credential.ServiceUrl && (
+            <a
+              href={credential.ServiceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
+            >
+              {credential.ServiceUrl}
+            </a>
+          )}
+        </div>
+      </div>
+      <button
+        onClick={onOpenNewPopup}
+        className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        title="Open in new window"
+      >
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+);
+
+export default HeaderBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx
new file mode 100644
index 000000000..598538a81
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Credential } from '../../../../utils/types/Credential';
+import { FormInputCopyToClipboard } from '../../components/FormInputCopyToClipboard';
+
+type LoginCredentialsBlockProps = {
+  credential: Credential;
+}
+
+/**
+ * Render the login credentials block.
+ */
+const LoginCredentialsBlock: React.FC<LoginCredentialsBlockProps> = ({ credential }) => {
+  const email = credential.Alias?.Email?.trim();
+  const username = credential.Username?.trim();
+  const password = credential.Password?.trim();
+
+  if (!email && !username && !password) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Login credentials</h2>
+      {email && (
+        <FormInputCopyToClipboard
+          id="email"
+          label="Email"
+          value={email}
+        />
+      )}
+      {username && (
+        <FormInputCopyToClipboard
+          id="username"
+          label="Username"
+          value={username}
+        />
+      )}
+      {password && (
+        <FormInputCopyToClipboard
+          id="password"
+          label="Password"
+          value={password}
+          type="password"
+        />
+      )}
+    </div>
+  );
+};
+
+export default LoginCredentialsBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx
new file mode 100644
index 000000000..9b51d712c
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+type NotesBlockProps = {
+  notes: string | undefined;
+}
+
+/**
+ * Convert URLs in text to clickable links.
+ */
+const convertUrlsToLinks = (text: string): string => {
+  const urlPattern = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
+
+  return text.replace(urlPattern, (url) => {
+    const href = url.startsWith('http') ? url : `http://${url}`;
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">${url}</a>`;
+  });
+};
+
+/**
+ * Render the notes block.
+ */
+const NotesBlock: React.FC<NotesBlockProps> = ({ notes }) => {
+  if (!notes) {
+    return null;
+  }
+
+  const formattedNotes = convertUrlsToLinks(notes);
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Notes</h2>
+      <div className="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
+        <p
+          className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: formattedNotes }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NotesBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx
new file mode 100644
index 000000000..4baedc9e5
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { TotpViewer } from '../../components/TotpViewer';
+
+type TotpBlockProps = {
+  credentialId: string;
+}
+
+/**
+ * Render the TOTP viewer block.
+ */
+const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => (
+  <>
+    <TotpViewer credentialId={credentialId} />
+  </>
+);
+
+export default TotpBlock;
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx b/browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx
new file mode 100644
index 000000000..32ed2cc8d
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx
@@ -0,0 +1,15 @@
+import HeaderBlock from './HeaderBlock';
+import EmailBlock from './EmailBlock';
+import TotpBlock from './TotpBlock';
+import LoginCredentialsBlock from './LoginCredentialsBlock';
+import AliasBlock from './AliasBlock';
+import NotesBlock from './NotesBlock';
+
+export {
+  HeaderBlock,
+  EmailBlock,
+  TotpBlock,
+  LoginCredentialsBlock,
+  AliasBlock,
+  NotesBlock
+};
\ No newline at end of file
diff --git a/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx b/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx
index 9f32a1749..4d2d6ac6a 100644
--- a/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx
+++ b/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx
@@ -2,212 +2,15 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useDb } from '../context/DbContext';
 import { Credential } from '../../../utils/types/Credential';
-import { FormInputCopyToClipboard } from '../components/FormInputCopyToClipboard';
-import { EmailPreview } from '../components/EmailPreview';
-import { TotpViewer } from '../components/TotpViewer';
 import { useLoading } from '../context/LoadingContext';
-import SqliteClient from '../../../utils/SqliteClient';
-
-type BlockProps = {
-  children: React.ReactNode;
-  className?: string;
-}
-
-/**
- * Render a block.
- */
-const Block: React.FC<BlockProps> = ({ children, className = '' }) => (
-  <div className={`space-y-4 ${className}`}>
-    {children}
-  </div>
-);
-
-/**
- * Render the header block.
- */
-const HeaderBlock: React.FC<{ credential: Credential; onOpenNewPopup: () => void }> = ({ credential, onOpenNewPopup }) => (
-  <Block className="mb-6">
-    <div className="flex items-center justify-between">
-      <div className="flex items-center">
-        <img
-          src={SqliteClient.imgSrcFromBytes(credential.Logo)}
-          alt={credential.ServiceName}
-          className="w-12 h-12 rounded-lg mr-4"
-        />
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
-          {credential.ServiceUrl && (
-            <a
-              href={credential.ServiceUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-            >
-              {credential.ServiceUrl}
-            </a>
-          )}
-        </div>
-      </div>
-      <button
-        onClick={onOpenNewPopup}
-        className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-        title="Open in new window"
-      >
-        <svg
-          className="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-          />
-        </svg>
-      </button>
-    </div>
-  </Block>
-);
-
-/**
- * Render the email block.
- */
-const EmailBlock: React.FC<{ email: string; isSupported: boolean }> = ({ email, isSupported }) => (
-  <Block>
-    {isSupported && <EmailPreview email={email} />}
-  </Block>
-);
-
-/**
- * Render the TOTP viewer block.
- */
-const TotpBlock: React.FC<{ credentialId: string }> = ({ credentialId }) => (
-  <Block>
-    <TotpViewer credentialId={credentialId} />
-  </Block>
-);
-
-/**
- * Render the login credentials block.
- */
-const LoginCredentialsBlock: React.FC<{ credential: Credential }> = ({ credential }) => {
-  const email = credential.Alias?.Email?.trim();
-  const username = credential.Username?.trim();
-  const password = credential.Password?.trim();
-
-  if (!email && !username && !password) {
-    return null;
-  }
-
-  return (
-    <Block>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Login credentials</h2>
-      {email && (
-        <FormInputCopyToClipboard
-          id="email"
-          label="Email"
-          value={email}
-        />
-      )}
-      {username && (
-        <FormInputCopyToClipboard
-          id="username"
-          label="Username"
-          value={username}
-        />
-      )}
-      {password && (
-        <FormInputCopyToClipboard
-          id="password"
-          label="Password"
-          value={password}
-          type="password"
-        />
-      )}
-    </Block>
-  );
-};
-
-/**
- * Render the alias block.
- */
-const AliasBlock: React.FC<{ credential: Credential; isValidDate: (date: string | null | undefined) => boolean }> = ({ 
-  credential, 
-  isValidDate 
-}) => {
-  const hasFirstName = Boolean(credential.Alias?.FirstName?.trim());
-  const hasLastName = Boolean(credential.Alias?.LastName?.trim());
-  const hasNickName = Boolean(credential.Alias?.NickName?.trim());
-  const hasBirthDate = isValidDate(credential.Alias?.BirthDate);
-
-  if (!hasFirstName && !hasLastName && !hasNickName && !hasBirthDate) {
-    return null;
-  }
-
-  return (
-    <Block>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Alias</h2>
-      {(hasFirstName || hasLastName) && (
-        <FormInputCopyToClipboard
-          id="fullName"
-          label="Full Name"
-          value={[credential.Alias?.FirstName, credential.Alias?.LastName].filter(Boolean).join(' ')}
-        />
-      )}
-      {hasFirstName && (
-        <FormInputCopyToClipboard
-          id="firstName"
-          label="First Name"
-          value={credential.Alias?.FirstName}
-        />
-      )}
-      {hasLastName && (
-        <FormInputCopyToClipboard
-          id="lastName"
-          label="Last Name"
-          value={credential.Alias?.LastName}
-        />
-      )}
-      {hasBirthDate && (
-        <FormInputCopyToClipboard
-          id="birthDate"
-          label="Birth Date"
-          value={new Date(credential.Alias?.BirthDate).toISOString().split('T')[0]}
-        />
-      )}
-      {hasNickName && (
-        <FormInputCopyToClipboard
-          id="nickName"
-          label="Nickname"
-          value={credential.Alias?.NickName ?? ''}
-        />
-      )}
-    </Block>
-  );
-};
-
-/**
- * Render the notes block.
- */
-const NotesBlock: React.FC<{ notes: string | undefined }> = ({ notes }) => {
-  if (!notes) {
-    return null;
-  }
-
-  return (
-    <Block>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Notes</h2>
-      <div className="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
-        <p className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
-          {notes}
-        </p>
-      </div>
-    </Block>
-  );
-};
+import {
+  HeaderBlock,
+  EmailBlock,
+  TotpBlock,
+  LoginCredentialsBlock,
+  AliasBlock,
+  NotesBlock
+} from '../components/CredentialDetails';
 
 /**
  * Credential details page.
@@ -302,26 +105,21 @@ const CredentialDetails: React.FC = () => {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       <HeaderBlock credential={credential} onOpenNewPopup={openInNewPopup} />
-      
       {credential.Alias?.Email && (
-        <EmailBlock 
-          email={credential.Alias.Email} 
-          isSupported={isEmailDomainSupported(credential.Alias.Email)} 
+        <EmailBlock
+          email={credential.Alias.Email}
+          isSupported={isEmailDomainSupported(credential.Alias.Email)}
         />
       )}
-      
-      <TotpBlock credentialId={credential.Id} />
-      
-      <LoginCredentialsBlock credential={credential} />
-      
-      <AliasBlock 
-        credential={credential} 
-        isValidDate={isValidDate} 
-      />
-      
       <NotesBlock notes={credential.Notes} />
+      <TotpBlock credentialId={credential.Id} />
+      <LoginCredentialsBlock credential={credential} />
+      <AliasBlock
+        credential={credential}
+        isValidDate={isValidDate}
+      />
     </div>
   );
 };