You have not generated any API keys yet.
';
return;
}
let tableHtml = `
Label cannot be empty.
";
return;
}
createKeyIndicator.style.display = 'block';
if(submitButton) submitButton.disabled = true;
apiKeyStatusDiv.innerHTML = ''; // Clear previous messages
try {
const token = await getAccessToken(); // Assumes getAccessToken() is defined elsewhere
if (!token) {
apiKeyStatusDiv.innerHTML = "Authentication error. Please refresh or log in again.
";
return;
}
const formData = new FormData();
formData.append('label', label);
// API Call: POST /api/keys
const response = await fetch('/api/keys', {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`
},
body: formData
});
const result = await response.json();
if (response.ok) {
displayNewKey(result);
apiKeyLabelInput.value = '';
fetchApiKeys(); // Assumes fetchApiKeys() is defined elsewhere to refresh the list
} else {
apiKeyStatusDiv.innerHTML = `An unexpected error occurred.
";
} finally {
createKeyIndicator.style.display = 'none';
if(submitButton) submitButton.disabled = false;
}
}
function displayNewKey(keyData) {
if (!newKeyDisplay || !newKeyValue || !newKeyLabelElement || !copyKeyButton) return;
newKeyValue.textContent = keyData.api_key;
newKeyLabelElement.textContent = keyData.label;
newKeyDisplay.style.display = 'block';
newKeyDisplay.scrollIntoView({ behavior: 'smooth', block: 'center' });
copyKeyButton.textContent = 'Copy';
copyKeyButton.disabled = false;
}
async function copyApiKeyToClipboard() {
if (!newKeyValue || !copyKeyButton) return;
try {
await navigator.clipboard.writeText(newKeyValue.textContent);
copyKeyButton.textContent = 'Copied!';
copyKeyButton.disabled = true;
setTimeout(() => {
copyKeyButton.textContent = 'Copy';
copyKeyButton.disabled = false;
}, 2000);
} catch (err) {
console.error('Failed to copy API key: ', err);
alert('Failed to copy key. Please copy it manually.');
}
}
async function revokeApiKey(keyId) {
if (!keyId || !auth || !auth.currentUser) return;
if (!confirm("Are you sure you want to revoke this API key? This action cannot be undone.")) {
return;
}
apiKeyStatusDiv.innerHTML = 'Revoking key...';
try {
const token = await getAccessToken();
if (!token) {
apiKeyStatusDiv.innerHTML = "Authentication error. Please refresh or log in again.
";
return;
}
// API Call: DELETE /api/keys/{keyId}
const response = await fetch(`/api/keys/${keyId}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`
}
});
if (response.ok) {
apiKeyStatusDiv.innerHTML = "API Key revoked successfully.
";
fetchApiKeys(); // Refresh list
} else {
const errorData = await response.json();
apiKeyStatusDiv.innerHTML = `An unexpected error occurred.
";
} finally {
setTimeout(() => {
if (apiKeyStatusDiv && apiKeyStatusDiv.innerHTML.includes('Revoking key...')) {
apiKeyStatusDiv.innerHTML = '';
}
}, 3000);
}
}
// --- Authentication Logic ---
async function signOutUser() {
if (!auth) return;
try {
await signOut(auth); // Assumes signOut is imported from firebase/auth
window.location.href = '/'; // Redirect to home page after sign out
} catch (error) {
console.error("Sign Out Error:", error);
alert(`Sign-out failed: ${error.message}`);
}
}
function updateUI(user) {
if (!authStatusDiv || !logoutButton) return;
if (user) {
authStatusDiv.textContent = `Logged in as: ${user.email}`;
logoutButton.style.display = 'inline-block';
fetchApiKeys(); // Fetch API keys now that user is confirmed
} else {
authStatusDiv.textContent = 'Redirecting to login...';
logoutButton.style.display = 'none';
window.location.href = '/'; // Redirect to home
}
}
// --- Initialization ---
document.addEventListener('DOMContentLoaded', () => {
// Get DOM elements
createKeyForm = document.getElementById('create-key-form');
apiKeyLabelInput = document.getElementById('apiKeyLabel');
newKeyDisplay = document.getElementById('new-key-display');
newKeyValue = document.getElementById('new-key-value');
newKeyLabelElement = document.getElementById('new-key-label');
copyKeyButton = document.getElementById('copy-key-button');
apiKeysListDiv = document.getElementById('api-keys-list');
apiKeyStatusDiv = document.getElementById('api-key-status');
createKeyIndicator = document.getElementById('create-key-indicator');
authStatusDiv = document.getElementById('auth-status');
logoutButton = document.getElementById('logout-button');
// Add event listeners
if (createKeyForm) createKeyForm.addEventListener('submit', createApiKey);
if (copyKeyButton) copyKeyButton.addEventListener('click', copyApiKeyToClipboard);
if (logoutButton) logoutButton.addEventListener('click', signOutUser);
if (apiKeysListDiv) {
apiKeysListDiv.addEventListener('click', function(event) {
if (event.target.classList.contains('revoke-key-btn')) {
const keyId = event.target.getAttribute('data-key-id');
if (keyId) {
revokeApiKey(keyId);
}
}
});
}
// Set up auth state listener
if (auth) {
onAuthStateChanged(auth, (user) => { // Assumes onAuthStateChanged is imported from firebase/auth
console.log("Auth state changed on API Keys page:", user ? `User: ${user.email}` : "No user");
updateUI(user);
});
}
});
// Placeholder for assumed functions/variables
// const auth = getAuth(); // Example: Initialize Firebase Auth
// async function getAccessToken() { return 'fake-token'; } // Example: Function to get auth token
// function fetchApiKeys() { console.log('Fetching API keys...'); } // Example: Function to fetch and display keys
// const submitButton = document.getElementById('submit-key-button'); // Example: Assuming a submit button exists
```
--------------------------------
### Create New API Key
Source: https://quicktranscript.app/api-keys
Handles the submission of the API key creation form. It prevents default submission, validates the label, and sends a request to the backend to create a new API key. Shows loading indicators and disables the submit button during the process.
```javascript
async function createApiKey(event) {
event.preventDefault();
if (!auth || !auth.currentUser || !createKeyForm || !apiKeyLabelInput || !createKeyIndicator || !apiKeyStatusDiv) return;
const label = apiKeyLabelInput.value.trim();
if (!label) {
apiKeyStatusDiv.innerHTML = `Please enter a label for the key.
`;
return;
}
createKeyIndicator.style.display = 'inline';
apiKeyStatusDiv.innerHTML = '';
const submitButton = createKeyForm.querySelector('button[type="submit"]');
if(submitButton) submitButton.disabled = true;
try {
const token = await getAccessToken();
if (!token) {
apiKeyStatusDiv.innerHTML = `Authentication er
```
--------------------------------
### Purchase Credits Function Placeholder
Source: https://quicktranscript.app/
A placeholder function for handling the purchase of credit packages. This function is intended to be implemented or handled by an authentication module, making it available globally for user interactions.
```javascript
window.purchaseCredits = function(packageId) {
// This will be handled by the auth module
};
```
--------------------------------
### Fetch API Keys from Backend
Source: https://quicktranscript.app/api-keys
Fetches the list of API keys associated with the authenticated user from the '/api/keys' endpoint. Requires a valid Firebase ID token for authorization. Displays loading states and handles API response errors.
```javascript
async function fetchApiKeys() {
if (!auth || !auth.currentUser) {
if (apiKeysListDiv) apiKeysListDiv.innerHTML = '
Authentication required.
';
return;
}
if (!apiKeysListDiv) return;
apiKeysListDiv.innerHTML = '
Loading keys...
';
try {
const token = await getAccessToken();
if (!token) {
apiKeysListDiv.innerHTML = '
Authentication error. Please refresh or log in again.
';
return;
}
const response = await fetch('/api/keys', {
headers: {
'Authorization': `Bearer ${token}`
}
});
if (response.ok) {
const keys = await response.json();
renderApiKeysList(keys);
} else {
const errorData = await response.json();
console.error('Failed to fetch API keys:', errorData);
apiKeysListDiv.innerHTML = `
Failed to load keys: ${errorData.detail || response.statusText}
`;
}
} catch (error) {
console.error('Error fetching API keys:', error);
apiKeysListDiv.innerHTML = '
An error occurred while loading keys.
';
}
}
```
--------------------------------
### API Key Generation Form Styling
Source: https://quicktranscript.app/api-keys
Styles the form used for generating new API keys, including input fields, labels, and buttons. It supports responsive layout with wrapping for form elements.
```css
#create-key-form {
display: flex;
gap: 15px;
margin-bottom: 25px;
align-items: flex-end;
flex-wrap: wrap;
}
#create-key-form .form-group {
flex-grow: 1;
margin-bottom: 0;
}
#create-key-form label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #495057;
}
#create-key-form input[type="text"] {
width: 100%;
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
box-sizing: border-box;
}
#create-key-form .submit-button.small {
padding: 9px 18px;
white-space: nowrap;
background-color: #4285F4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
#create-key-form .submit-button.small:hover {
background-color: #3367D6;
}
#create-key-form .htmx-indicator {
font-style: italic;
color: #666;
margin-left: 10px;
display: none;
}
```
--------------------------------
### UI Styles for Media Transcriber
Source: https://quicktranscript.app/
CSS rules for styling the web interface, including tab navigation, input fields, and specific elements for YouTube and file URL inputs. These styles enhance user experience and visual feedback.
```css
.her-section { display: block; } /* Shown when logged in */
.footer-link { color: #4285F4; text-decoration: none; margin: 0 10px; }
/* Tab Styles */
.upload-tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid #e0e0e0; }
.tab-button { background: none; border: none; padding: 12px 24px; cursor: pointer; font-size: 16px; color: #666; border-bottom: 3px solid transparent; transition: all 0.3s ease; flex: 1; }
.tab-button:hover { color: #4285F4; background-color: #f8f9fa; }
.tab-button.active { color: #4285F4; border-bottom-color: #4285F4; font-weight: 500; }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* YouTube-specific styles */
.youtube-notice { background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 8px 12px; margin: 10px 0; font-size: 0.9rem; }
#youtubeInput { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 16px; }
#urlInput { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 16px; }
#youtubeInput:focus { border-color: #4285F4; outline: none; }
#youtubeInput:valid { border-color: #28a745; }
#youtubeInput:invalid:not(:placeholder-shown) { border-color: #dc3545; }
#youtube-display { min-height: 40px; display: flex; align-items: center; }
/* File URL tab specific styles */
.provider-info { margin-top: 8px; padding: 8px 12px; background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 4px; font-size: 0.9em; }
.provider-label { color: #1976d2; font-weight: 500; }
.provider-name { color: #0d47a1; font-weight: bold; margin-left: 5px; }
.url-help { margin-top: 15px; padding: 15px; background: #f5f5f5; border-radius: 6px; border-left: 4px solid #4285f4; }
.url-help p { margin: 0 0 10px 0; color: #333; }
.url-help ul { margin: 10px 0; padding-left: 20px; }
.url-help li { margin: 5px 0; color: #555; }
.url-help small { color: #666; font-style: italic; }
#url-display { min-height: 40px; display: flex; align-items: center; }
/* Disabled submit button visual */
.submit-button[disabled] { opacity: 0.6; cursor: not-allowed; }
```
--------------------------------
### Initialize Google Tag Manager
Source: https://quicktranscript.app/privacy
This script initializes Google Tag Manager for website analytics and tracking. It is designed to be placed in the head of the HTML document to ensure timely loading of tags.
```JavaScript
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-W928F3WF');
```
--------------------------------
### JavaScript UI Update on Auth Status
Source: https://quicktranscript.app/api-keys
This JavaScript code fragment illustrates updating the user interface based on the outcome of an authentication process. It handles both successful authentication, by calling updateUI with user data, and failed initialization, by calling updateUI with null.
```javascript
});
updateUI(user);
});
} else {
// Handle case where auth failed to initialize
updateUI(null);
}
});
```
--------------------------------
### API Endpoint: /api/keys
Source: https://quicktranscript.app/api-keys
This API endpoint is used for managing user API keys. It supports fetching a list of existing keys and creating new ones. Authentication is required via a Bearer token (Firebase ID token).
```APIDOC
GET /api/keys
Description: Retrieves a list of API keys associated with the authenticated user.
Authentication: Required (Bearer Token - Firebase ID Token)
Parameters:
- Authorization: Bearer
(string, required)
Responses:
- 200 OK:
Content-Type: application/json
Body:
[
{
"key_id": "string",
"label": "string",
"key_prefix": "string",
"created_at": "datetime",
"last_used": "datetime | null",
"is_active": "boolean"
}
]
- 401 Unauthorized: If the authentication token is missing or invalid.
- 500 Internal Server Error: If there's a server-side issue.
POST /api/keys
Description: Creates a new API key for the authenticated user.
Authentication: Required (Bearer Token - Firebase ID Token)
Parameters:
- Authorization: Bearer (string, required)
- Request Body (JSON):
{
"label": "string" // User-defined label for the API key (required)
}
Responses:
- 201 Created:
Content-Type: application/json
Body:
{
"key_id": "string",
"label": "string",
"key": "string", // The newly generated API key
"key_prefix": "string",
"created_at": "datetime",
"last_used": null,
"is_active": true
}
- 400 Bad Request: If the request body is invalid (e.g., missing label).
- 401 Unauthorized: If the authentication token is missing or invalid.
- 500 Internal Server Error: If there's a server-side issue.
DELETE /api/keys/{key_id}
Description: Revokes (deactivates) an existing API key.
Authentication: Required (Bearer Token - Firebase ID Token)
Parameters:
- Authorization: Bearer (string, required)
- key_id: The unique identifier of the API key to revoke (string, path parameter, required)
Responses:
- 200 OK:
Content-Type: application/json
Body:
{
"message": "API key revoked successfully."
}
- 401 Unauthorized: If the authentication token is missing or invalid.
- 404 Not Found: If the specified key_id does not exist or does not belong to the user.
- 500 Internal Server Error: If there's a server-side issue.
```
--------------------------------
### Transcription Job Management
Source: https://quicktranscript.app/api-docs
Endpoints for submitting new transcription jobs, checking the status of existing jobs, and retrieving a list of completed transcriptions. These are crucial for processing audio files and integrating with workflows.
```APIDOC
Create Transcription Job:
Method: POST
Endpoint: /api/transcriptions
Description: Submits a new audio file for transcription.
Input:
(Details on file upload and parameters like language, format, etc. would be here)
Output:
(Details on response, e.g., task ID for status checking)
Check Transcription Status:
Method: GET
Endpoint: /api/transcriptions/{task_id}
Description: Monitors the progress and status of a specific transcription job.
Parameters:
task_id: The unique identifier for the transcription task.
Output:
(Details on status, progress percentage, and final result when available)
Get Completed Transcriptions:
Method: GET
Endpoint: /api/transcriptions/completed
Description: Polls for new transcriptions that have been successfully completed.
Output:
(List of completed transcription jobs, potentially with metadata)
```
--------------------------------
### Voucher Section Styling
Source: https://quicktranscript.app/
Styles for the voucher redemption section, including a container with background and border, a heading, and a form for voucher input. Also styles status messages for success or errors.
```css
/* Voucher section styles */
.voucher-container {
background-color: #f0f8ff; /* AliceBlue */
padding: 20px;
border-radius: 8px;
margin-top: 20px;
margin-bottom: 30px;
border: 1px solid #d6eaff;
}
.voucher-container h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
text-align: center;
}
#voucher-form {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
#voucher-form .form-group {
margin-bottom: 0; /* Remove default bottom margin */
display: flex; /* Align label and input */
align-items: center;
gap: 8px;
}
#voucher-form label {
margin-bottom: 0; /* Override default label margin */
font-weight: 500;
}
#voucher-form input[type="text"] {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
min-width: 180px; /* Ensure input has some width */
}
.submit-button.small {
padding: 8px 16px; /* Smaller padding */
font-size: 0.9rem;
}
.voucher-status {
margin-top: 15px;
text-align: center;
font-weight: 500;
}
.voucher-status .success-message {
color: #28a745; /* Green */
background-color: #e9f7ec;
padding: 8px;
border-radius: 4px;
border: 1px solid #c3e6cb;
display: inline-block; /* Fit content */
}
.voucher-status .error-container {
/* Reuse error style */
color: #dc3545; /* Red */
background-color: #f8d7da;
padding: 8px;
border-radius: 4px;
border: 1px solid #f5c6cb;
display: inline-block; /* Fit content */
}
#voucher-indicator {
font-style: italic;
color: #555;
}
/* Show voucher section only when logged in */
#voucher-section {
display: none; /* Hidden by default */
}
body.user-logged-in #voucher-section {
display: block; /* Show when logged in */
}
```
--------------------------------
### Conditional Visibility Styles
Source: https://quicktranscript.app/
Styles that control the visibility of UI elements based on application state, such as user login status or form processing. Includes hiding/showing buy buttons and login prompts.
```css
/* Hide landing section when the form is being processed */
body.upload-in-progress .landing-section {
display: none;
}
/* Credit package button/prompt visibility */
.buy-package-btn {
display: none; /* Hide buy buttons by default */
}
.login-to-purchase-prompt {
display: block; /* Show login prompt by default */
font-size: 0.9em;
color: #666;
margin-top: 15px;
}
body.user-logged-in .buy-package-btn {
display: block; /* Show buy buttons when user is logged in */
}
body.user-logged-in .login-to-purchase-prompt {
display: none; /* Hide login prompt when user is logged in */
}
```
--------------------------------
### SEO Content Styling
Source: https://quicktranscript.app/
Basic styling for SEO-related content sections, including headings and paragraph text, to ensure readability and structure.
```css
.seo-content {
color: #666;
line-height: 1.8;
margin-top: 50px;
}
.seo-content h2, .seo-content h3 {
color: #2c3e50;
margin-top: 30px;
margin-bottom: 15px;
}
```
--------------------------------
### API Keys List Table Styling
Source: https://quicktranscript.app/api-keys
Styles the table used to display existing API keys, including headers, cells, and borders. It also styles specific elements like revoke buttons and inactive status indicators.
```css
#api-keys-list table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
#api-keys-list th, #api-keys-list td {
border: 1px solid #dee2e6;
padding: 10px 12px;
text-align: left;
vertical-align: middle;
}
#api-keys-list th {
background-color: #e9ecef;
font-weight: 600;
color: #495057;
}
#api-keys-list td {
color: #212529;
}
#api-keys-list .revoke-key-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
#api-keys-list .revoke-key-btn:hover {
background-color: #c82333;
}
#api-keys-list .key-status-inactive {
font-style: italic;
color: #6c757d;
}
```
--------------------------------
### Status Message Styling
Source: https://quicktranscript.app/api-keys
Defines shared styles for status messages, such as success or error notifications, used within the API key management section. This includes padding, borders, and color schemes for different message types.
```css
.api-key-status {
margin-top: 10px;
text-align: center;
font-weight: 500;
}
.api-key-status .error-container,
.api-key-status .success-message {
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
display: inline-block;
margin-bottom: 15px;
}
.api-key-status .error-container {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.api-key-status .success-message {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.