File size: 4,700 Bytes
ff7128b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | class CustomApiKeyModal extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['open'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'open') {
this.render();
}
}
connectedCallback() {
this.render();
}
render() {
const isOpen = this.hasAttribute('open');
this.shadowRoot.innerHTML = `
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal-content {
background-color: white;
border-radius: 0.5rem;
width: 100%;
max-width: 28rem;
transform: translateY(20px);
transition: transform 0.3s ease;
}
.dark .modal-content {
background-color: #1f2937;
}
.modal-overlay.open .modal-content {
transform: translateY(0);
}
</style>
<div class="modal-overlay ${isOpen ? 'open' : ''}">
<div class="modal-content shadow-xl">
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium">Enter Your API Key</h3>
</div>
<div class="p-6">
<div class="mb-4">
<label class="block text-sm font-medium mb-2">DeepSeek API Key</label>
<input type="password" id="api-key-input" placeholder="sk-..." class="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg p-3 focus:ring-blue-500 focus:border-blue-500 block w-full">
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Your API key is stored locally in your browser.</p>
</div>
<div class="flex justify-end space-x-3">
<button id="cancel-button" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700">
Cancel
</button>
<button id="save-button" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
Save
</button>
</div>
</div>
</div>
</div>
`;
if (isOpen) {
setTimeout(() => {
const apiKeyInput = this.shadowRoot.getElementById('api-key-input');
const cancelButton = this.shadowRoot.getElementById('cancel-button');
const saveButton = this.shadowRoot.getElementById('save-button');
// Load saved key if exists
const savedKey = localStorage.getItem('deepseek_api_key');
if (savedKey) {
apiKeyInput.value = savedKey;
}
cancelButton.addEventListener('click', () => {
this.removeAttribute('open');
});
saveButton.addEventListener('click', () => {
const apiKey = apiKeyInput.value.trim();
if (apiKey) {
localStorage.setItem('deepseek_api_key', apiKey);
this.removeAttribute('open');
}
});
// Focus input when modal opens
apiKeyInput.focus();
}, 0);
}
}
}
customElements.define('custom-api-key-modal', CustomApiKeyModal); |