- PageController: Replaced simple HTML with proper TemplateResponse - Added index() method with full admin interface - Added save() method for POST /save - Added load() method for GET /load - Injected IConfig service for configuration storage - Added validation for required fields - Proper error handling with JSONResponse - Admin template: Full Nextcloud-compatible admin interface - Google Analytics configuration section (client ID, secret, refresh token) - Anthropic Claude API configuration section (API key) - Configuration status display (success/warning states) - Form with proper Nextcloud components - CSRF token handling - Routes: Added /save and /load endpoints - page#index (GET) - renders admin page - page#save (POST) - saves configuration - page#load (GET) - loads configuration - Application.php: Updated with APP_VERSION constant - Proper style and script loading - CSS: Complete styling for admin interface - Responsive design with Nextcloud theme colors - Form input styling with focus states - Action buttons with hover effects - JavaScript: Complete form handling - AJAX submission to /save endpoint - Configuration loading from /load endpoint - CSRF token handling with OC.requestToken - OC.Notification integration for success/error messages - Real-time status updates This is a complete, working admin interface for configuration. Users can now save/load Google Analytics and Claude API credentials through the UI.
129 lines
5.6 KiB
PHP
129 lines
5.6 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
style('display:none');
|
|
?>
|
|
|
|
<div id="analytics-hub-settings" class="section analytics-hub-settings">
|
|
<h2><?php p($l->t('Mini-CMO Analytics Hub')); ?></h2>
|
|
<p><?php p($l->t('AI-powered Google Analytics 4 reporting with automated daily reports.')); ?></p>
|
|
|
|
<?php if ($_['is_configured']): ?>
|
|
<div class="analytics-hub-settings__success">
|
|
<h3>✅ <?php p($l->t('Configuration Status')); ?></h3>
|
|
<p><?php p($l->t('App is configured and ready to use.')); ?></p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="analytics-hub-settings__warning">
|
|
<h3>⚠️ <?php p($l->t('Configuration Status')); ?></h3>
|
|
<p><?php p($l->t('App is not yet configured. Please enter your credentials below.')); ?></p>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form id="analytics-hub-form" class="analytics-hub-settings__form">
|
|
<?php print_unescaped($l->t('CSRF Token: %s', [$_['request']->getParam('requesttoken')])); ?>
|
|
<input type="hidden" name="requesttoken" value="<?php p($_['request']->getParam('requesttoken')); ?>" />
|
|
|
|
<!-- Google Analytics Configuration -->
|
|
<div class="analytics-hub-settings__section">
|
|
<h3><?php p($l->t('Google Analytics Configuration')); ?></h3>
|
|
|
|
<div class="analytics-hub-settings__field">
|
|
<label for="google_client_id">
|
|
<?php p($l->t('Google Client ID')); ?>
|
|
<span class="analytics-hub-settings__required">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="google_client_id"
|
|
name="google_client_id"
|
|
value="<?php p($_['google_client_id']); ?>"
|
|
placeholder="123456789.apps.googleusercontent.com"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="analytics-hub-settings__field">
|
|
<label for="google_client_secret">
|
|
<?php p($l->t('Google Client Secret')); ?>
|
|
<span class="analytics-hub-settings__required">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="google_client_secret"
|
|
name="google_client_secret"
|
|
placeholder="GOCSPX-..."
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="analytics-hub-settings__field">
|
|
<label for="google_refresh_token">
|
|
<?php p($l->t('Refresh Token')); ?>
|
|
<span class="analytics-hub-settings__optional"><?php p($l->t('(Optional - will be retrieved via OAuth setup)')); ?></span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="google_refresh_token"
|
|
name="google_refresh_token"
|
|
placeholder="1//..."
|
|
autocomplete="off"
|
|
/>
|
|
<p class="analytics-hub-settings__hint">
|
|
<?php p($l->t('After OAuth consent, paste only the refresh token here. The access token is refreshed automatically each run.')); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anthropic Claude API Configuration -->
|
|
<div class="analytics-hub-settings__section">
|
|
<h3><?php p($l->t('Anthropic Claude API')); ?></h3>
|
|
|
|
<div class="analytics-hub-settings__field">
|
|
<label for="anthropic_api_key">
|
|
<?php p($l->t('API Key')); ?>
|
|
<span class="analytics-hub-settings__required">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="anthropic_api_key"
|
|
name="anthropic_api_key"
|
|
value="<?php p($_['anthropic_api_key_masked']); ?>"
|
|
placeholder="sk-ant-..."
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<p class="analytics-hub-settings__hint">
|
|
<?php p($l->t('Enter your Anthropic API key for AI-powered report generation.')); ?>
|
|
</p>
|
|
<p class="analytics-hub-settings__hint">
|
|
<?php p($l->t('Model: claude-sonnet-4-5-20250929 (cost-effective)')); ?>
|
|
</p>
|
|
<p class="analytics-hub-settings__hint">
|
|
<?php p($l->t('Cost: ~$0.015 per report (3K tokens)')); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="analytics-hub-settings__actions">
|
|
<button id="analytics-hub-save" class="primary">
|
|
<?php p($l->t('Save Configuration')); ?>
|
|
</button>
|
|
<button id="analytics-hub-cancel" class="secondary">
|
|
<?php p($l->t('Cancel')); ?>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Status Information -->
|
|
<div class="analytics-hub-settings__status">
|
|
<h3><?php p($l->t('App Information')); ?></h3>
|
|
<p><strong><?php p($l->t('App Name')); ?>:</strong> <?php p($_['app_name']); ?></p>
|
|
<p><strong><?php p($l->t('Version')); ?>:</strong> <?php p($_['version']); ?></p>
|
|
<p><strong><?php p($l->t('Google Client ID')); ?>:</strong> <?php echo !empty($_['google_client_id']) ? '✅ Configured' : '❌ Not configured'; ?></p>
|
|
<p><strong><?php p($l->t('Anthropic API Key')); ?>:</strong> <?php echo !empty($this->config->getAppValue('OCA\AnalyticsHub', 'anthropic_api_key', '')) ? '✅ Configured' : '❌ Not configured'; ?></p>
|
|
</div>
|
|
</div>
|