From 73d186e8e8cbeaa064760161074d749390407343 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Fri, 2 Jan 2026 21:29:48 +0100 Subject: [PATCH] feat: rename CryptID to enCryptID, improve Settings Menu styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Renamed all user-facing "CryptID" references to "enCryptID" - Updated emails, error messages, UI text, and onboarding tour - Enhanced BoardSettingsDropdown with section headers, icons, and alternating background colors for better visual hierarchy 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/components/BoardSettingsDropdown.tsx | 115 +++++++++--- src/components/WalletLinkPanel.tsx | 12 +- src/components/auth/AnonymousViewerBanner.tsx | 2 +- src/components/auth/CryptID.tsx | 14 +- src/components/auth/CryptIDDropdown.tsx | 164 +++++++++++++++++- src/components/auth/Profile.tsx | 2 +- src/hooks/useWallet.ts | 12 +- src/routes/LinkDevice.tsx | 2 +- src/ui/OnboardingTour/tourSteps.ts | 2 +- src/ui/UserSettingsModal.tsx | 8 +- worker/cryptidAuth.ts | 26 +-- worker/walletAuth.ts | 2 +- 12 files changed, 294 insertions(+), 67 deletions(-) diff --git a/src/components/BoardSettingsDropdown.tsx b/src/components/BoardSettingsDropdown.tsx index 3ba543c..0115703 100644 --- a/src/components/BoardSettingsDropdown.tsx +++ b/src/components/BoardSettingsDropdown.tsx @@ -325,44 +325,74 @@ const BoardSettingsDropdown: React.FC = ({ className Loading... ) : ( -
+
- {/* Board Info */} -
-
+ {/* Board Info Section */} +
+
+ + + + + Board Info
-
-
- ID: {boardId} +
+
+ ID: + {boardId}
{boardInfo?.ownerUsername && ( -
- Owner: @{boardInfo.ownerUsername} +
+ Owner: + @{boardInfo.ownerUsername}
)} -
- Status: +
+ Status: - {boardInfo?.isProtected ? 'Protected (View-only)' : 'Open (Anyone can edit)'} + {boardInfo?.isProtected ? 'Protected' : 'Open'}
- {/* Admin Section */} + {/* Admin Section - Protection Settings */} {isAdmin && ( <> -
-
- Protection Settings {isGlobalAdmin && (Global Admin)} +
+
+ + + + Protection {isGlobalAdmin && (Global Admin)}
{/* Protection Toggle */} @@ -413,8 +443,24 @@ const BoardSettingsDropdown: React.FC = ({ className {/* Editor Management (only when protected) */} {boardInfo?.isProtected && ( -
-
+
+
+ + + + + + Editors ({editors.length})
@@ -475,10 +521,10 @@ const BoardSettingsDropdown: React.FC = ({ className display: 'flex', alignItems: 'center', justifyContent: 'space-between', - padding: '8px', + padding: '8px 10px', borderRadius: '6px', marginBottom: '4px', - background: 'var(--color-muted-2)', + background: 'var(--color-panel)', }} >
@@ -514,7 +560,26 @@ const BoardSettingsDropdown: React.FC = ({ className {/* Request Admin Access (for non-admins) */} {!isAdmin && session.authed && ( -
+
+
+ + + + + + + Admin Access +
diff --git a/src/components/auth/CryptIDDropdown.tsx b/src/components/auth/CryptIDDropdown.tsx index 3b76de5..cad01a7 100644 --- a/src/components/auth/CryptIDDropdown.tsx +++ b/src/components/auth/CryptIDDropdown.tsx @@ -8,6 +8,7 @@ import { GoogleExportBrowser } from '../GoogleExportBrowser'; import { getFathomApiKey, saveFathomApiKey, removeFathomApiKey, isFathomApiKeyConfigured } from '../../lib/fathomApiKey'; import { isMiroApiKeyConfigured } from '../../lib/miroApiKey'; import { MiroIntegrationModal } from '../MiroIntegrationModal'; +import { WalletLinkPanel } from '../WalletLinkPanel'; import { getMyConnections, createConnection, removeConnection, updateTrustLevel, updateEdgeMetadata } from '../../lib/networking/connectionService'; import { TRUST_LEVEL_COLORS, type TrustLevel, type UserConnectionWithProfile, type EdgeMetadata } from '../../lib/networking/types'; @@ -26,6 +27,7 @@ const CryptIDDropdown: React.FC = ({ isDarkMode = false }) const [showGoogleBrowser, setShowGoogleBrowser] = useState(false); const [showObsidianModal, setShowObsidianModal] = useState(false); const [showMiroModal, setShowMiroModal] = useState(false); + const [showWalletModal, setShowWalletModal] = useState(false); const [obsidianVaultUrl, setObsidianVaultUrl] = useState(''); const [googleConnected, setGoogleConnected] = useState(false); const [googleLoading, setGoogleLoading] = useState(false); @@ -335,7 +337,7 @@ const CryptIDDropdown: React.FC = ({ isDarkMode = false }) transition: 'background 0.15s', pointerEvents: 'all', }} - title={session.authed ? session.username : 'Sign in with CryptID'} + title={session.authed ? session.username : 'Sign in with enCryptID'} > {session.authed ? ( <> @@ -429,7 +431,7 @@ const CryptIDDropdown: React.FC = ({ isDarkMode = false }) - CryptID secured + enCryptID secured
@@ -812,6 +814,63 @@ const CryptIDDropdown: React.FC = ({ isDarkMode = false }) )}
+ {/* Web3 Wallet */} +
+
+
+ 👛 +
+
+
+ Web3 Wallet +
+
+ Link wallet to enCryptID +
+
+
+ +
+ {/* Miro Board Import - Coming Soon */}
@@ -1160,6 +1219,107 @@ const CryptIDDropdown: React.FC = ({ isDarkMode = false }) document.body )} + {/* Web3 Wallet Modal */} + {showWalletModal && createPortal( +
{ + if (e.target === e.currentTarget) { + setShowWalletModal(false); + } + }} + > +
e.stopPropagation()} + > + {/* Header */} +
+
+
+ 👛 +
+
+

+ Web3 Wallet +

+

+ Connect & link to enCryptID +

+
+
+ +
+ + {/* WalletLinkPanel content */} + +
+
, + document.body + )} + {/* CryptID Sign In Modal - rendered via portal */} {showCryptIDModal && createPortal(
= ({ onLogout, onOpenVaultBrowser } return (
-

CryptID: {session.username}

+

enCryptID: {session.username}

diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 4b7b3fb..5c01b33 100644 --- a/src/hooks/useWallet.ts +++ b/src/hooks/useWallet.ts @@ -3,7 +3,7 @@ * * Provides functionality for: * - Connecting/disconnecting wallets - * - Linking wallets to CryptID accounts + * - Linking wallets to enCryptID accounts * - Managing linked wallets */ @@ -59,7 +59,7 @@ function generateLinkMessage( timestamp: string, nonce: string ): string { - return `Link wallet to CryptID + return `Link wallet to enCryptID Account: ${username} Wallet: ${address} @@ -120,7 +120,7 @@ export function useWalletConnection() { } // ============================================================================= -// useWalletLink - Link wallet to CryptID +// useWalletLink - Link wallet to enCryptID // ============================================================================= export function useWalletLink() { @@ -136,7 +136,7 @@ export function useWalletLink() { } if (!session.authed || !session.username) { - return { success: false, error: 'Not authenticated with CryptID' }; + return { success: false, error: 'Not authenticated with enCryptID' }; } setIsLinking(true); @@ -159,7 +159,7 @@ export function useWalletLink() { // Get public key for auth header const publicKey = crypto.getPublicKey(session.username); if (!publicKey) { - throw new Error('Could not get CryptID public key'); + throw new Error('Could not get enCryptID public key'); } // Send to backend for verification @@ -227,7 +227,7 @@ export function useLinkedWallets() { const publicKey = crypto.getPublicKey(session.username); if (!publicKey) { - setError('Could not get CryptID public key'); + setError('Could not get enCryptID public key'); return; } diff --git a/src/routes/LinkDevice.tsx b/src/routes/LinkDevice.tsx index 46f2f2f..2d16e2b 100644 --- a/src/routes/LinkDevice.tsx +++ b/src/routes/LinkDevice.tsx @@ -30,7 +30,7 @@ export const LinkDevice: React.FC = () => { if (result.success) { setStatus('success'); setCryptidUsername(result.cryptidUsername || ''); - setMessage('This device has been linked to your CryptID account!'); + setMessage('This device has been linked to your enCryptID account!'); // Set the session - user is now logged in if (result.cryptidUsername) { diff --git a/src/ui/OnboardingTour/tourSteps.ts b/src/ui/OnboardingTour/tourSteps.ts index 869b52e..8c334d5 100644 --- a/src/ui/OnboardingTour/tourSteps.ts +++ b/src/ui/OnboardingTour/tourSteps.ts @@ -34,7 +34,7 @@ export const TOUR_STEPS: TourStep[] = [ { id: 'cryptid-login', title: 'Encrypted Identity', - content: 'Sign in with CryptID for end-to-end encrypted sync across devices. Your password never leaves your browser - we use cryptographic keys instead.', + content: 'Sign in with enCryptID for end-to-end encrypted sync across devices. Your password never leaves your browser - we use cryptographic keys instead.', targetSelector: '.cryptid-dropdown-trigger', fallbackPosition: { top: 60, left: window.innerWidth - 200 }, placement: 'bottom-left', diff --git a/src/ui/UserSettingsModal.tsx b/src/ui/UserSettingsModal.tsx index 5f53123..195d860 100644 --- a/src/ui/UserSettingsModal.tsx +++ b/src/ui/UserSettingsModal.tsx @@ -412,9 +412,9 @@ export function UserSettingsModal({ onClose, isDarkMode, onToggleDarkMode }: Use
- {/* CryptID Account Section */} + {/* enCryptID Account Section */}

- CryptID Account + enCryptID Account

{session.authed && session.username ? ( @@ -433,7 +433,7 @@ export function UserSettingsModal({ onClose, isDarkMode, onToggleDarkMode }: Use {session.username}

- Your CryptID username - cryptographically secured + Your enCryptID username - cryptographically secured

@@ -541,7 +541,7 @@ export function UserSettingsModal({ onClose, isDarkMode, onToggleDarkMode }: Use }} >

- Sign in to manage your CryptID account settings + Sign in to manage your enCryptID account settings

)} diff --git a/worker/cryptidAuth.ts b/worker/cryptidAuth.ts index 84d9a2f..eaa346e 100644 --- a/worker/cryptidAuth.ts +++ b/worker/cryptidAuth.ts @@ -32,7 +32,7 @@ async function sendEmail( 'Content-Type': 'application/json', }, body: JSON.stringify({ - from: env.CRYPTID_EMAIL_FROM || 'CryptID ', + from: env.CRYPTID_EMAIL_FROM || 'enCryptID ', to: [to], subject, html: htmlContent, @@ -115,7 +115,7 @@ export async function handleLinkEmail( if (existingUser && existingUser.cryptid_username !== cryptidUsername) { return new Response(JSON.stringify({ - error: 'Email already linked to a different CryptID account' + error: 'Email already linked to a different enCryptID account' }), { status: 409, headers: { 'Content-Type': 'application/json' }, @@ -175,10 +175,10 @@ export async function handleLinkEmail( const emailSent = await sendEmail( env, email, - 'Verify your CryptID email', + 'Verify your enCryptID email', ` -

Verify your CryptID email

-

Click the link below to verify your email address for CryptID: ${cryptidUsername}

+

Verify your enCryptID email

+

Click the link below to verify your email address for enCryptID: ${cryptidUsername}

Verify Email

Or copy this link: ${verifyUrl}

This link expires in 24 hours.

@@ -310,7 +310,7 @@ export async function handleRequestDeviceLink( if (!user) { return new Response(JSON.stringify({ - error: 'No verified CryptID account found for this email' + error: 'No verified enCryptID account found for this email' }), { status: 404, headers: { 'Content-Type': 'application/json' }, @@ -351,10 +351,10 @@ export async function handleRequestDeviceLink( const emailSent = await sendEmail( env, email, - 'Link new device to your CryptID', + 'Link new device to your enCryptID', `

New Device Link Request

-

Someone is trying to link a new device to your CryptID: ${user.cryptid_username}

+

Someone is trying to link a new device to your enCryptID: ${user.cryptid_username}

Device: ${deviceName || 'New Device'}

If this was you, click the button below to approve:

Approve Device

@@ -527,7 +527,7 @@ export async function handleSendBackupEmail( const emailSent = await sendEmail( env, email, - `Set up CryptID "${username}" on another device`, + `Set up enCryptID "${username}" on another device`, ` @@ -549,13 +549,13 @@ export async function handleSendBackupEmail(
🔐
-

Welcome to CryptID

+

Welcome to enCryptID

Your passwordless account is ready!

Hi ${username},

-

Your CryptID account has been created on your current device. To access your account from another device (like your phone), follow these steps:

+

Your enCryptID account has been created on your current device. To access your account from another device (like your phone), follow these steps:

@@ -590,9 +590,9 @@ export async function handleSendBackupEmail(
-

This email was sent because you created a CryptID account and opted for multi-device backup.

+

This email was sent because you created an enCryptID account and opted for multi-device backup.

If you didn't request this, you can safely ignore this email.

-

CryptID by jeffemmett.com

+

enCryptID by jeffemmett.com

diff --git a/worker/walletAuth.ts b/worker/walletAuth.ts index 3b7114d..c9e0b2f 100644 --- a/worker/walletAuth.ts +++ b/worker/walletAuth.ts @@ -41,7 +41,7 @@ export function generateLinkMessage( timestamp: string, nonce: string ): string { - return `Link wallet to CryptID + return `Link wallet to enCryptID Account: ${username} Wallet: ${address}