Appearance

Sharing System ​

File Information ​

  • Path: app/pages/[brand_name]/sharing.vue, app/components/sharing/, app/composables/core/pages/useSharing.ts
  • Purpose: Comprehensive sharing system for assets, folders, and collages

Overview ​

The Sharing System provides comprehensive sharing functionality for digital assets, folders, and collages. It enables users to create share links and embed codes with advanced settings including password protection, expiration dates, download restrictions, and access controls. The system supports both public sharing and brand-specific shared links.

Architecture ​

System Components ​

  1. Share Dialog: Create and manage share links with settings
  2. Share Management Page: List, update, and revoke share links
  3. Embed Codes: Generate and manage embed codes for assets
  4. Public Share View: Display shared assets to external users
  5. Share Integration: Share functionality integrated into asset/folder components

Key Features ​

1. Share Link Generation ​

  • Create share links for assets, folders, and collages
  • Custom share titles and descriptions
  • Share link URL generation
  • Copy link to clipboard
  • Share link preview

2. Share Settings ​

  • Password Protection: Optional password for share links
  • Expiration Dates: Set expiration date for share links
  • Download Restrictions: Control download permissions
  • Access Controls: View-only or download access
  • Public/Private: Public or private share links

3. Share Link Management ​

  • List all share links (active and revoked)
  • Filter by Active/Revoked URLs
  • Sort by Created Date, Created By, Created Source
  • Bulk operations (revoke, delete)
  • Share link details display

4. Embed Codes ​

  • Generate embed codes for assets
  • Embed code preview
  • Copy embed code
  • Embed code management

5. Public Share View ​

  • Display shared assets to external users
  • Password-protected share access
  • Download shared assets
  • Brand-specific shared links
  • Custom domain support

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/sharing.vue - Share link management page
    • Share link list
    • Filtering and sorting
    • Bulk operations
    • Share link actions

Route: /{brand_name}/sharing

  • app/pages/shared-assets/[type].vue - Public shared assets page
    • Public-facing shared link view
    • Display shared assets
    • Download shared assets
    • Password protection interface

Route: /shared-assets/{type}

Components ​

  • app/components/dialogs/ShareAssetDialog.vue - Share dialog component

    • Share link generation
    • Permission settings
    • Expiration settings
    • Copy link functionality

  • app/components/sharing/ShareLinkListTable.vue - Share link list table

    • Display share links
    • Share link management
    • Sorting and filtering
    • Bulk actions

  • app/components/sharing/ShareTableHeader.vue - Share table header

    • Sortable columns
    • Filter controls
    • Action buttons

  • app/components/sharing/ShareTableListItem.vue - Share link row component

    • Individual share link display
    • Share link actions (edit, delete, copy)

Composables ​

  • app/composables/core/pages/useSharing.ts - Sharing page composable

    • Share link management
    • Share link operations
    • Share link filtering
    • Share link table state

  • app/composables/core/components/dialogs/useShareDialog.ts - Share dialog composable

    • Share dialog state
    • Share link generation
    • Share settings management

  • app/composables/core/components/sharing/useShareLinkListTable.ts - Share link list composable

    • Share link list management
    • Filtering and sorting
    • Bulk operations

API ​

  • app/composables/api/useSharingApi.ts - Sharing API operations
    • Get share links
    • Create share link
    • Update share link
    • Delete share link
    • Revoke share link
    • Get shared asset

Data Flow ​

  1. User selects asset/folder/collage
  2. Opens share dialog
  3. Configures share settings (title, description, password, expiration)
  4. Share link generated via API
  5. Share link displayed and can be copied
  6. Share link added to share management list
  1. User navigates to sharing page
  2. Share links fetched from API
  3. Links displayed in table
  4. User can filter, sort, revoke, or delete links
  5. Changes reflected immediately

User Interactions ​

  1. Share Link Creation

    • Select asset/folder/collage
    • Open share dialog
    • Configure settings
    • Generate and copy link

  2. Share Link Management

    • View all share links
    • Filter by Active/Revoked
    • Sort by columns
    • Revoke active links
    • Delete revoked links

  3. Bulk Operations

    • Select multiple share links
    • Bulk revoke active links
    • Bulk delete revoked links

  4. Public Share Access

    • Access shared link URL
    • Enter password (if protected)
    • View and download shared assets

Security Features ​

  1. Password Protection: Optional passwords for share links
  2. Expiration Dates: Automatic expiration of share links
  3. Access Controls: Fine-grained permission settings
  4. Secure URLs: Encrypted share link tokens
  5. Custom Domains: Brand-specific share URLs

API Endpoints ​

  • Endpoint: POST /share-urls (via createShareLink())
  • Request: Asset/folder/collage IDs, share settings
  • Response: Share link URL and details
  • Endpoint: GET /share-urls (via getShareLinks())
  • Parameters: workspace_id, page, filter_by
  • Response: List of share links with pagination
  • Endpoint: POST /share-urls/revoke (via revokeShareLink())
  • Request: Share URL ID(s)
  • Response: Success message
  • Endpoint: DELETE /share-urls (via deleteShareLink())
  • Request: Share URL ID(s)
  • Response: Success message