Secure Pastebin Development

Instructions for GitHub Copilot when working on wc-secure-pastebin, a secure paste-bin service built as a Vue 3 web component with client-side encryption and no backend dependency.

Project Architecture

This is a Vue 3 web component project using:

The application provides secure, client-side encrypted pastebin functionality entirely in the browser.

Coding Standards

1. **Vue 3 Composition API**: Always use `<script setup>` syntax

2. **Reactivity**: Prefer reactive refs and computed properties from Pinia stores

3. **Async Operations**: Use async/await for asynchronous operations

4. **Error Handling**: Handle errors gracefully and provide user feedback via the injected `notify` function (not console.log or alerts)

5. **File Organization**:

- Components: `src/components/`

- Stores: `src/stores/`

- Utilities: `src/lib/`

6. **File Naming**:

- Use `.ce.vue` for custom element components

- Follow kebab-case for file names

Key Components and Patterns

Main Component (Pasteref.ce.vue)

The root component that provides two key functions via Vue's provide/inject:

PasswordManager.ce.vue

Manages password generation, editing, and copying. Uses BIP39 for mnemonic generation.

Pinia Store (pastebin.js)

Centralized state management for:

Utility Modules

**clipboardUtils.js**: Use `copyToClipboard` for all clipboard operations

**cryptoUtils.js**: Use functions from this module for all encryption/decryption operations

Notifications Pattern

The application uses a centralized notification system:

1. **In child components**, inject the notify function:

```javascript

const notify = inject('notify')

```

2. **Usage**:

```javascript

notify(message, type, duration)

```

3. **Available types**:

- `'is-success'`

- `'is-danger'`

- `'is-warning'`

- `'is-info'`

4. **Default duration**: 2000ms if not specified

5. **Never use** console.log or alerts for user-facing messages

Encryption and Security

1. **Password Handling**:

- Always use password from the store

- Never expose passwords in logs or URLs unless explicitly intended

- Use secure random generation for passwords

- Validate passwords are handled securely

2. **Encryption/Decryption**:

- Use functions from `cryptoUtils.js`

- Handle decryption errors by setting `store.decryptError = true`

- Test encryption/decryption thoroughly

3. **Clipboard Operations**:

- Ensure operations are secure and user-consented

- Use `copyToClipboard` from `clipboardUtils.js`

4. **General Security**:

- Never log sensitive data

- Prefer built-in browser APIs over external dependencies

- Validate all user inputs

UI/UX Guidelines

1. Use Buefy components consistently throughout the application

2. Provide tooltips and icons for better user experience

3. Ensure responsive design across device sizes

4. Follow accessibility best practices

5. Maintain consistent styling and spacing

Development Workflow

1. **Development Server**: `npm run dev`

2. **Build**: `npm run build`

3. **Testing**: Thoroughly test encryption/decryption flows

4. **Security Review**: Validate password handling in all new features

Dependencies

Core dependencies:

**Important**: Avoid adding unnecessary dependencies. Prefer built-in browser APIs when possible.

Example Usage

When generating code for this project, Copilot should:

1. Use Composition API with `<script setup>`

2. Inject `notify` for user feedback

3. Use Pinia store for state management

4. Use `cryptoUtils.js` for encryption operations

5. Use `clipboardUtils.js` for clipboard operations

6. Follow Buefy component patterns

7. Handle errors gracefully with notifications

8. Never log sensitive data

9. Maintain consistent file structure

Common Tasks

**Adding a new feature**:

1. Create component in `src/components/` if needed

2. Update store in `src/stores/` if state changes required

3. Use existing utilities for crypto/clipboard operations

4. Inject and use `notify` for user feedback

5. Follow existing UI patterns with Buefy

**Handling encryption**:

1. Get password from store

2. Use functions from `cryptoUtils.js`

3. Handle errors by setting `store.decryptError`

4. Notify user of success/failure

**Clipboard operations**:

1. Import `copyToClipboard` from `clipboardUtils.js`

2. Call with content to copy

3. Notify user of success/failure