0bf1e53f65
- 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.
177 lines
3.6 KiB
CSS
177 lines
3.6 KiB
CSS
.analytics-hub-settings {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 30px;
|
|
}
|
|
|
|
.analytics-hub-settings__section {
|
|
margin-bottom: 35px;
|
|
padding: 25px;
|
|
border: 1px solid #e0e0e6;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.analytics-hub-settings__section h3 {
|
|
color: #0066cc;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.analytics-hub-settings__field {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.analytics-hub-settings__field label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.analytics-hub-settings__required {
|
|
color: #dc3545;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.analytics-hub-settings__optional {
|
|
color: #6c757d;
|
|
margin-left: 3px;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.analytics-hub-settings__field input[type="text"],
|
|
.analytics-hub-settings__field input[type="password"] {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.analytics-hub-settings__field input[type="text"]:focus,
|
|
.analytics-hub-settings__field input[type="password"]:focus {
|
|
outline: none;
|
|
border-color: #0066cc;
|
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
|
}
|
|
|
|
.analytics-hub-settings__hint {
|
|
font-size: 13px;
|
|
color: #666;
|
|
margin-top: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.analytics-hub-settings__success {
|
|
padding: 20px;
|
|
background: #d4edda;
|
|
border-left: 4px solid #28a745;
|
|
border-radius: 4px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.analytics-hub-settings__success h3 {
|
|
color: #28a745;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.analytics-hub-settings__warning {
|
|
padding: 20px;
|
|
background: #fff3cd;
|
|
border-left: 4px solid #dc3545;
|
|
border-radius: 4px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.analytics-hub-settings__warning h3 {
|
|
color: #dc3545;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.analytics-hub-settings__actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e0e0e6;
|
|
}
|
|
|
|
.analytics-hub-settings__actions button {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.analytics-hub-settings__actions button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.analytics-hub-settings__actions button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.analytics-hub-settings__actions .primary {
|
|
background-color: #0066cc;
|
|
color: white;
|
|
}
|
|
|
|
.analytics-hub-settings__actions .primary:hover:not(:disabled) {
|
|
background-color: #0052a3;
|
|
}
|
|
|
|
.analytics-hub-settings__actions .secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.analytics-hub-settings__actions .secondary:hover:not(:disabled) {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.analytics-hub-settings__status {
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0e0e6;
|
|
}
|
|
|
|
.analytics-hub-settings__status h3 {
|
|
color: #0066cc;
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.analytics-hub-settings__status p {
|
|
margin-bottom: 8px;
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.analytics-hub-settings__status strong {
|
|
color: #0066cc;
|
|
}
|
|
|
|
.analytics-hub-settings__success {
|
|
background: #d4edda;
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.analytics-hub-settings__success h3 {
|
|
color: #28a745;
|
|
}
|