Appearance

Sharing & Permissions ​

Overview ​

The Sharing and Permissions system enables secure sharing of digital assets, folders, and collages with fine-grained access control, password protection, expiration dates, and embed codes. It supports both public and private sharing with customizable permissions.

Architecture ​

Sharing Types ​

  1. Public Share: Accessible via public URL
  2. Private Share: Requires authentication
  3. Password Protected: Requires password
  4. Time-Limited: Expires after set duration
  5. Embed Code: For embedding in websites

Frontend Implementation ​

Share Dialog Component ​

vue
<template>
  <v-dialog v-model="dialog" max-width="600">
    <v-card>
      <v-card-title>Share {{ itemType }}</v-card-title>
      <v-card-text>
        <v-switch
          v-model="shareSettings.public"
          label="Public Share"
        />
        <v-text-field
          v-if="shareSettings.public"
          v-model="shareUrl"
          label="Share URL"
          readonly
        />
        <v-switch
          v-model="shareSettings.passwordProtected"
          label="Password Protected"
        />
        <v-text-field
          v-if="shareSettings.passwordProtected"
          v-model="shareSettings.password"
          label="Password"
          type="password"
        />
        <v-switch
          v-model="shareSettings.hasExpiration"
          label="Set Expiration"
        />
        <v-date-picker
          v-if="shareSettings.hasExpiration"
          v-model="shareSettings.expiresAt"
        />
      </v-card-text>
      <v-card-actions>
        <v-btn @click="generateShareLink">Generate Link</v-btn>
        <v-btn @click="copyLink">Copy Link</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

API Design ​

Create Share ​

Endpoint: POST /api/workspaces/:workspace_id/shares

Request Body:

json
{
  "resource_type": "asset",
  "resource_id": 123,
  "public": true,
  "password_protected": false,
  "expires_at": "2024-12-31T23:59:59Z",
  "permissions": {
    "view": true,
    "download": true,
    "embed": false
  }
}

Response:

json
{
  "share": {
    "id": "share-abc123",
    "share_url": "https://app.example.com/shared/abc123",
    "embed_code": "<iframe src='...'></iframe>",
    "expires_at": "2024-12-31T23:59:59Z"
  }
}

Get Share Details ​

Endpoint: GET /api/shares/:share_id

Response: Share object with resource details

Workflow ​

Share Creation Flow ​

1. User clicks "Share" on asset/folder/collage
   ↓
2. Share dialog opens
   ↓
3. User configures share settings:
   - Public/Private
   - Password protection
   - Expiration date
   - Permissions
   ↓
4. User clicks "Generate Link"
   ↓
5. Backend creates share record
   ↓
6. Generate unique share URL
   ↓
7. If public → Generate embed code
   ↓
8. Return share URL and embed code
   ↓
9. User copies link or embed code