Merge pull request #48 from HORNET-Storage/feature/api-migration-and-personal-mode

Feature/api migration and personal mode

Author: f7f376a1fcd0d0e11a10ed1b6577c9

src/api/allowedUsers.api.ts

@@ -6,13 +6,14 @@ import {
   AllowedUsersNpubsResponse,
   BulkImportRequest,
   AllowedUsersNpub,
+  AllowedUsersMode,
   DEFAULT_TIERS
 } from '@app/types/allowedUsers.types';
 
 // Settings Management
 export const getAllowedUsersSettings = async (): Promise<AllowedUsersSettings> => {
   const token = readToken();
-  const response = await fetch(`${config.baseURL}/api/settings/allowed_users`, {
+  const response = await fetch(`${config.baseURL}/api/settings`, {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
@@ -22,25 +23,49 @@ export const getAllowedUsersSettings = async (): Promise<AllowedUsersSettings> =
 
   const text = await response.text();
   try {
-    const data: AllowedUsersApiResponse = JSON.parse(text);
+    const data = JSON.parse(text);
+    
+    // Extract allowed_users from the new nested structure
+    const allowedUsersData = data.settings?.allowed_users;
+    if (!allowedUsersData) {
+      throw new Error('No allowed_users data found in response');
+    }
 
     // Transform tiers from backend format to frontend format
-    let transformedTiers = data.allowed_users.tiers.map(tier => ({
-      data_limit: (tier as any).datalimit || tier.data_limit || '',
-      price: tier.price
-    }));
+    let transformedTiers = [];
+    
+    // Check if tiers exist in response, otherwise use defaults
+    if (allowedUsersData.tiers && Array.isArray(allowedUsersData.tiers)) {
+      transformedTiers = allowedUsersData.tiers.map((tier: any) => ({
+        name: tier.name || 'Unnamed Tier',
+        price_sats: tier.price_sats || 0,
+        monthly_limit_bytes: tier.monthly_limit_bytes || 0,
+        unlimited: tier.unlimited || false
+      }));
+    } else {
+      // Use default tiers for the mode if none provided
+      const mode = allowedUsersData.mode as AllowedUsersMode;
+      transformedTiers = DEFAULT_TIERS[mode] || DEFAULT_TIERS.free;
+    }
 
     // For free mode, reconstruct full UI options with active tier marked
-    if (data.allowed_users.mode === 'free' && transformedTiers.length === 1) {
-      const activeTierDataLimit = transformedTiers[0].data_limit;
+    if (allowedUsersData.mode === 'free' && transformedTiers.length === 1) {
+      const activeTierBytes = transformedTiers[0].monthly_limit_bytes;
       transformedTiers = DEFAULT_TIERS.free.map(defaultTier => ({
         ...defaultTier,
-        active: defaultTier.data_limit === activeTierDataLimit
+        active: defaultTier.monthly_limit_bytes === activeTierBytes
       }));
     }
 
+    // For personal mode, reconstruct with single unlimited tier
+    if (allowedUsersData.mode === 'personal' && transformedTiers.length === 1) {
+      transformedTiers = DEFAULT_TIERS.personal;
+    }
+    
     const transformedSettings = {
-      ...data.allowed_users,
+      mode: allowedUsersData.mode || 'free',
+      read_access: allowedUsersData.read_access || { enabled: true, scope: 'all_users' },
+      write_access: allowedUsersData.write_access || { enabled: true, scope: 'all_users' },
       tiers: transformedTiers
     };
 
@@ -53,33 +78,37 @@ export const getAllowedUsersSettings = async (): Promise<AllowedUsersSettings> =
 export const updateAllowedUsersSettings = async (settings: AllowedUsersSettings): Promise<{ success: boolean, message: string }> => {
   const token = readToken();
 
-  // Filter tiers based on mode - for free mode, only send active tier
-  const tiersToSend = settings.mode === 'free' 
+  // Filter tiers based on mode - for free and personal modes, only send active tier
+  const tiersToSend = (settings.mode === 'free' || settings.mode === 'personal')
     ? settings.tiers.filter(tier => tier.active)
     : settings.tiers;
 
-  // Transform to nested format as expected by backend
+  // Transform to nested format as expected by new unified backend API
   const nestedSettings = {
-    "allowed_users": {
-      "mode": settings.mode,
-      "read_access": {
-        "enabled": settings.read_access.enabled,
-        "scope": settings.read_access.scope
-      },
-      "write_access": {
-        "enabled": settings.write_access.enabled,
-        "scope": settings.write_access.scope
-      },
-      "tiers": tiersToSend.map(tier => ({
-        "datalimit": tier.data_limit || "1 GB per month",  // Backend expects 'datalimit' not 'data_limit', fallback for empty values
-        "price": tier.price || "0"
-      }))
+    "settings": {
+      "allowed_users": {
+        "mode": settings.mode,
+        "read_access": {
+          "enabled": settings.read_access.enabled,
+          "scope": settings.read_access.scope
+        },
+        "write_access": {
+          "enabled": settings.write_access.enabled,
+          "scope": settings.write_access.scope
+        },
+        "tiers": tiersToSend.map(tier => ({
+          "name": tier.name,
+          "price_sats": tier.price_sats,
+          "monthly_limit_bytes": tier.monthly_limit_bytes,
+          "unlimited": tier.unlimited
+        }))
+      }
     }
   };
 
   console.log('Sending to backend:', JSON.stringify(nestedSettings, null, 2));
 
-  const response = await fetch(`${config.baseURL}/api/settings/allowed_users`, {
+  const response = await fetch(`${config.baseURL}/api/settings`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -97,9 +126,10 @@ export const updateAllowedUsersSettings = async (settings: AllowedUsersSettings)
   }
 
   try {
-    return JSON.parse(text);
+    return JSON.parse(text) || { success: true, message: 'Settings updated successfully' };
   } catch (jsonError) {
-    throw new Error(`Invalid JSON response: ${text}`);
+    // If response is not JSON, assume success if status was OK
+    return { success: true, message: 'Settings updated successfully' };
   }
 };
 

src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts

@@ -8,12 +8,14 @@ export const Container = styled.div`
 
 export const ModeGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 1rem;
   margin-bottom: 1.5rem;
 
   ${media.md} {
     grid-template-columns: 1fr;
+    grid-template-rows: none;
     gap: 0.75rem;
   }
 `;
@@ -24,10 +26,14 @@ interface ModeButtonProps {
 }
 
 export const ModeButton = styled(Button)<ModeButtonProps>`
-  height: 60px;
+  height: 80px;
   border-radius: 8px;
   font-weight: 600;
   transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
 
   ${({ $isActive, $color }) => $isActive && `
     background-color: ${$color} !important;
@@ -41,7 +47,7 @@ export const ModeButton = styled(Button)<ModeButtonProps>`
   }
 
   ${media.md} {
-    height: 50px;
+    height: 70px;
   }
 `;
 

src/components/allowed-users/components/ModeSelector/ModeSelector.tsx

@@ -10,20 +10,29 @@ interface ModeSelectorProps {
 }
 
 const MODE_INFO = {
+  personal: {
+    label: 'Only Me',
+    subtitle: '[Free]',
+    description: 'Personal relay for single user with unlimited access',
+    color: '#fa541c'
+  },
+  exclusive: {
+    label: 'Invite Only',
+    subtitle: '[Free]',
+    description: 'Invite-only access with manual NPUB management',
+    color: '#722ed1'
+  },
   free: {
-    label: 'Free Mode',
+    label: 'Public Relay',
+    subtitle: '[Free]',
     description: 'Open access with optional free tiers',
     color: '#1890ff'
   },
   paid: {
-    label: 'Paid Mode', 
+    label: 'Subscription',
+    subtitle: '[Paid]',
     description: 'Subscription-based access control',
     color: '#52c41a'
-  },
-  exclusive: {
-    label: 'Exclusive Mode',
-    description: 'Invite-only access with manual NPUB management',
-    color: '#722ed1'
   }
 };
 
@@ -35,7 +44,7 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({
   return (
     <S.Container>
       <S.ModeGrid>
-        {(Object.keys(MODE_INFO) as AllowedUsersMode[]).map((mode) => {
+        {(['personal', 'exclusive', 'free', 'paid'] as AllowedUsersMode[]).map((mode) => {
           const info = MODE_INFO[mode];
           const isActive = currentMode === mode;
 
@@ -49,7 +58,16 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({
                 $isActive={isActive}
                 $color={info.color}
               >
-                {info.label}
+                <div style={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  alignItems: 'center',
+                  gap: '2px',
+                  lineHeight: '1.2'
+                }}>
+                  <div style={{ fontSize: '16px', fontWeight: '600' }}>{info.label}</div>
+                  <div style={{ fontSize: '12px', opacity: 0.8, fontWeight: '400' }}>{info.subtitle}</div>
+                </div>
               </S.ModeButton>
             </Tooltip>
           );

src/components/allowed-users/components/NPubManagement/NPubManagement.tsx

@@ -72,10 +72,16 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
 
     setUnifiedUsers(Array.from(allNpubs.values()));
   }, [readNpubs.npubs, writeNpubs.npubs]);
-  const tierOptions = settings.tiers.map(tier => ({
-    label: `${tier.data_limit} (${tier.price === '0' ? 'Free' : `${tier.price} sats`})`,
-    value: tier.data_limit
-  }));
+  const tierOptions = settings.tiers.map(tier => {
+    const displayFormat = tier.unlimited 
+      ? 'unlimited' 
+      : `${(tier.monthly_limit_bytes / 1073741824).toFixed(tier.monthly_limit_bytes % 1073741824 === 0 ? 0 : 1)} GB per month`;
+    
+    return {
+      label: `${tier.name} - ${displayFormat} (${tier.price_sats === 0 ? 'Free' : `${tier.price_sats} sats`})`,
+      value: tier.name
+    };
+  });
 
   const handleAddNpub = async () => {
     try {
@@ -140,7 +146,7 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
     }
 
     const lines = bulkText.split('\n').filter(line => line.trim());
-    const defaultTier = settings.tiers[0]?.data_limit || 'basic';
+    const defaultTier = settings.tiers[0]?.name || 'basic';
 
     try {
       for (const line of lines) {