|
import { api } from '../api.js';
|
|
|
|
export class ShareModal extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.fileId = null;
|
|
this.folderId = null;
|
|
this.handleEscape = this.handleEscape.bind(this);
|
|
this.render();
|
|
this.attachListeners();
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = `
|
|
<div class="share-modal" id="share-modal" style="display: none;">
|
|
<div class="share-modal-content">
|
|
<div class="share-header">
|
|
<h3>Share</h3>
|
|
<button class="close-btn" id="close-share">×</button>
|
|
</div>
|
|
|
|
<form id="share-form">
|
|
<div class="form-group">
|
|
<label>Permission Level</label>
|
|
<select name="permission_level" class="input-field">
|
|
<option value="viewer">Viewer</option>
|
|
<option value="uploader">Uploader</option>
|
|
<option value="editor">Editor</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Password Protection (optional)</label>
|
|
<input type="password" name="password" class="input-field" placeholder="Leave blank for no password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Expiration Date (optional)</label>
|
|
<input type="datetime-local" name="expires_at" class="input-field">
|
|
</div>
|
|
|
|
<button type="submit" class="button button-primary">Create Share Link</button>
|
|
</form>
|
|
|
|
<div id="share-result" style="display: none;">
|
|
<div class="form-group">
|
|
<label>Share Link</label>
|
|
<div class="share-link-container">
|
|
<input type="text" id="share-link" readonly class="input-field">
|
|
<button class="button" id="copy-link-btn">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="error-message" id="share-error"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
attachListeners() {
|
|
const closeBtn = this.querySelector('#close-share');
|
|
closeBtn.addEventListener('click', () => this.hide());
|
|
|
|
const form = this.querySelector('#share-form');
|
|
form.addEventListener('submit', (e) => this.handleCreateShare(e));
|
|
|
|
const copyBtn = this.querySelector('#copy-link-btn');
|
|
copyBtn.addEventListener('click', () => this.copyLink());
|
|
}
|
|
|
|
handleEscape(e) {
|
|
if (e.key === 'Escape') {
|
|
const modal = this.querySelector('#share-modal');
|
|
if (modal.style.display === 'flex') {
|
|
this.hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
show(fileId = null, folderId = null) {
|
|
this.fileId = fileId;
|
|
this.folderId = folderId;
|
|
this.querySelector('#share-modal').style.display = 'flex';
|
|
this.querySelector('#share-result').style.display = 'none';
|
|
this.querySelector('#share-form').reset();
|
|
document.addEventListener('keydown', this.handleEscape);
|
|
}
|
|
|
|
hide() {
|
|
this.querySelector('#share-modal').style.display = 'none';
|
|
this.fileId = null;
|
|
this.folderId = null;
|
|
document.removeEventListener('keydown', this.handleEscape);
|
|
}
|
|
|
|
async handleCreateShare(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const errorDiv = this.querySelector('#share-error');
|
|
|
|
try {
|
|
const permissionLevel = formData.get('permission_level');
|
|
const password = formData.get('password') || null;
|
|
const expiresAt = formData.get('expires_at') || null;
|
|
|
|
const share = await api.createShare(
|
|
this.fileId,
|
|
this.folderId,
|
|
expiresAt,
|
|
password,
|
|
permissionLevel
|
|
);
|
|
|
|
const shareLink = `${window.location.origin}/share/${share.token}`;
|
|
this.querySelector('#share-link').value = shareLink;
|
|
this.querySelector('#share-result').style.display = 'block';
|
|
errorDiv.textContent = '';
|
|
} catch (error) {
|
|
errorDiv.textContent = 'Failed to create share link: ' + error.message;
|
|
}
|
|
}
|
|
|
|
copyLink() {
|
|
const linkInput = this.querySelector('#share-link');
|
|
linkInput.select();
|
|
document.execCommand('copy');
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Link copied to clipboard!', type: 'success' }
|
|
}));
|
|
}
|
|
}
|
|
|
|
customElements.define('share-modal', ShareModal);
|