Commit Graph

8 Commits (b9cd20002e5b55b19743123099cfdc103effbb6a)

Author SHA1 Message Date
Boban Blaskovic b9cd20002e WP + PHP toggles + DB-password reveal — all functional
User: 'anzeigen' button on WP tab + WP/PHP toggle-rows weren't wired.

Added settings keys + wire:click:
- wp.debug, wp.cache, wp.disallow_file_edit, wp.auto_updater_off,
  wp.force_ssl_admin (5 wp-config.php toggle-rows).
- wp.search_visible, wp.registration (Allgemeine WP-Einstellungen).
- php.display_errors, php.opcache_enable, php.log_errors,
  php.allow_url_fopen (php.ini toggle-rows).

DB-password reveal: new Volt prop showDbPassword, suffix span
'anzeigen' → wire:click=$toggle('showDbPassword') flips input type
between password/text and label between 'anzeigen'/'verbergen'.

Browser-verified: WP tab toggles flip live, console clean, 5/5
SiteDetailsTest still green.
2026-06-01 00:44:35 +02:00
Boban Blaskovic a30d5a711a Toggles: visual fix (inline-block) + wire:click bindings via settings array
Bug 1 (visual): .clu-toggle is a <span> which is inline by default;
width:36px height:20px were being ignored so toggles rendered as zero-
width inline bars. Added display:inline-block + vertical-align:middle.

Bug 2 (no state): toggle-rows in vhost / ssl / access / plugins /
redirects / staging tabs were pure static markup with no wire:click.
Clicking did nothing.

Fix: generic $settings array on the Volt component (one key per toggle)
+ toggleSetting(key) action + isOn(key) helper. All toggle-rows now
emit wire:click=toggleSetting('namespace.key') and read the live state
via @if($this->isOn('namespace.key')) on @endif.

Per-plugin auto-update toggles read settings['plugin.<slug>.auto'] so
each row flips independently.

Tabs covered: vHost (server_tokens, http2_push), SSL (ocsp/auto_renew/
caa_check/ct_log), SSH-FTP access policy (password_auth/no_root/
fail2ban/ip_allowlist/ssh_2fa), Plugins (per-plugin auto + 5 policy
toggles), Redirects (keep_qs/case_insens), Staging (robots_block/
email_sandbox/payments_test).

Browser-verified: clicking Yoast SEO auto-update toggle flips from
blue ON to grey OFF instantly via Livewire. 0 console errors. 5/5
SiteDetailsTest still green.
2026-06-01 00:29:13 +02:00
Boban Blaskovic 0615e0969d Site Details: 3 high-value tabs — Plugins / Redirects / Staging
User accepted top-3 from brainstorm. Tab bar now 12 tabs (wraps cleanly).

Plugins tab:
- 4 metrics: total / updates-pending / auto-update count / themes count.
- Plugins table with favicon-letter, name + slug, version pill (green
  current, orange 'x.y → x.z' on update available), active/inactive
  health label, per-row auto-update toggle, row actions (update +
  activate/deactivate + delete).
- Themes table (Storefront parent, Storefront Child active, TT4 inactive).
- Update-Policy card with 5 toggle-rows: security-only / minor / major
  auto, pre-update snapshot, staging-test-first.
- Bulk-update CTA banner when any update is pending.

Redirects tab:
- 4 metrics: active rules / 24h hits / 404 sources / loop count.
- 'Neue Regel' card with source + target input, status-code segmented
  (301/302/307/410), match-type select, query-string + case-insensitive
  toggles. CSV import button.
- Active rules table with from → to, code pill, hits, last-hit, edit/
  test/delete actions. Sorted by hits.

Staging tab:
- Subdomain input with .domain suffix, server select.
- 5 toggle-rows: HTTP-Basic-Auth (default on), robots.txt block,
  exclude media on sync, email-sandbox, payment-gateways-test-mode.
- Two big action cards: 'Production → Staging Clone' and
  'Staging → Production Push' (push uses clu-btn-danger gradient,
  includes table-include pills + auto-snapshot note).
- Recent sync operations feed with success/info/warning icons.

Volt state additions: stagingActive, stagingSubdomain,
stagingPasswordProtect, stagingExcludeMedia, stagingLastSync. Mocked
plugins/themes/redirects via computed properties (no DB yet, would
come from WP-API/Redirect model in prod).

5/5 SiteDetailsTest still green.
2026-06-01 00:24:30 +02:00
Boban Blaskovic 9f8038d5f4 Site Details: 3 new tabs — vHost / SSL-TLS / SSH-FTP
vHost tab:
- HTTP-version segmented (HTTP/1.1 | HTTP/2 | HTTP/3 QUIC).
- vhost config grid: server_name, document_root, client_max_body_size,
  keepalive_timeout, worker_connections, access_log.
- 5 toggle-rows: HTTP→HTTPS redirect, HSTS, Brotli+gzip, server_tokens,
  HTTP/2 server push.
- Custom Headers kv-card (X-Frame-Options, X-Content-Type-Options,
  Referrer-Policy, Permissions-Policy).
- Rate Limit kv-card (/wp-login.php 5 req/min, /xmlrpc.php blocked).
- Actions: 'nginx -t (Syntax-Check)', 'vHost speichern + reload'.

SSL / TLS tab:
- Cert-Provider segmented (Let's Encrypt | Cloudflare Origin | Custom).
- CN + SAN + TLS-min (1.2 | 1.3) + Cipher Suite (Mozilla Modern/
  Intermediate/Old).
- 4 toggle-rows: OCSP Stapling, Auto-Renewal, CAA-Check, CT-Log.
- Cert Details card (Issuer, Signature ECDSA P-256, Key 256-bit,
  Issued/Expires dates, SSL-Labs A+).
- Bisherige Zertifikate table.
- Actions: download, renew now, save+reload.

SSH / FTP tab:
- SSH-Benutzer table (deploy/m.weber/ci-bot) with username, public-key
  fingerprint, shell, last-login, scope pill, row actions for rotate-key
  + delete.
- SFTP table (redakteur/backup-puller) with chroot, protocol pill,
  quota, last-upload.
- Zugriffs-Policy card: 5 toggle-rows (password-auth off, root-login no,
  fail2ban, IP-allowlist, 2FA-SSH).
- Actions: 'Public Key importieren', 'SSH/SFTP-Benutzer anlegen'.

Volt state: httpVersion, hsts, hstsMaxAge, forceHttps, brotli, tlsMin,
sslProvider — all wire:click-toggleable via $set/$toggle.

All 5 site-details Pest tests still green.
2026-06-01 00:18:14 +02:00
Boban Blaskovic 933f641e58 Site Details: WP/PHP/Overview tabs use template's toggle-row pattern + file tree folder toggle
WP tab now matches template verbatim:
- wp-config.php card with set-grid of fields, MB/sek suffix input-groups,
  5 template-exact toggle-rows (WP_DEBUG, WP_CACHE, DISALLOW_FILE_EDIT,
  AUTOMATIC_UPDATER_DISABLED, FORCE_SSL_ADMIN) with title + description.
- Datenbank card with DB_NAME/USER/HOST/PASSWORD fields + 'verbunden' pill.
- Sicherheits-Schlüssel (Salts) card with kv rows + warning regenerate btn.
- Allgemeine WordPress-Einstellungen card with 4 fields + 2 toggles.

PHP tab now matches template verbatim:
- php.ini card with 8 fields (4 with M/sek suffix groups), 4 toggle-rows
  (display_errors, opcache.enable, log_errors, allow_url_fopen).
- OPcache card with kv stats + leeren btn.
- Extensions card with pill list + '+ 16' accent pill.

Overview Schnellaktionen card converted to clu-toggle-row pattern with
title + description + clu-toggle switch (template's pattern, not the
checkbox-style).

File tree folders now toggle:
- New Volt openDirs array tracks expanded paths.
- toggleDir(path) Livewire action adds/removes path.
- clu_render_tree($items, $activeFile, $openDirs, $base) walks the tree,
  derives full path per node, emits wire:click=toggleDir on dirs.

CSS additions: clu-toggle-row, clu-tr-body/title/desc, clu-toggle (iOS-style
switch with .on state), clu-input-group with suffix, clu-kv, clu-field,
clu-form-actions, clu-hico.
2026-05-31 23:57:41 +02:00
Boban Blaskovic 4d4e2cbc33 Site Details: exact template rebuild + xterm.js logs + fileContents tree
User-requested rebuild + browser-verified:

1. **Full template port** (templates/akutell/Site Details.html + sitedetails.js):
   - All 6 tabs match template structure verbatim (Übersicht, WordPress,
     PHP / ini, Datei-Manager, Cronjobs, Logs).
   - Tab bar uses clu-dtabs glass button group instead of generic seg.
   - Site hero (favicon + domain + server/wp/php/ssl meta) + Besuchen +
     WP-Admin buttons in topbar.

2. **Filemanager tab** (template's clu-fm grid):
   - File tree rendered recursively from PHP-mirrored sitedetails.js
     'tree' array. Folder rows show clu-chev rotation on .open, nested
     children indent via clu-tree-children border-left + margin-left.
   - 7 baked file contents from sitedetails.js fileContents object
     (wp-config.php, .htaccess, robots.txt, index.php, functions.php,
     style.css, php.ini) — click any leaf in tree, editor loads it.
   - clu-gutter dynamic line-numbers + clu-code-area textarea +
     Verwerfen/Speichern action row.

3. **Logs tab with xterm.js**:
   - resources/js/app.js imports @xterm/xterm + @xterm/addon-fit,
     exposes window.XTerm + window.XTermFit globally.
   - resources/css/app.css imports xterm.css.
   - Sites show component pushes inline init script with logData baked
     in (4 log types × ~8 entries each). xterm renders with ANSI
     truecolor escapes per level (INFO blue / WARN yellow / ERROR red /
     OK green / DEBUG purple), keeps dark gradient host with custom
     scrollbar.
   - 4-tab seg (access / error / php / wp) switches log type via
     setLog() Livewire action; xterm re-init on livewire:navigated.
   - Live folgen checkbox wired (Volt logFollow state).

4. **Cronjobs tab**:
   - Real $site->crons table with name/expression-pill/command/last-run/
     status + run/more actions + Cronjob-anlegen primary button.

5. **WordPress + PHP tabs**:
   - Full forms with all 6 wp-config fields + 5 toggles + Datenbank +
     Security Keys cards.
   - php.ini with 8 fields + 4 toggles + OPcache stats + 16 extension
     pills.

6. **CSS additions**: clu-dtabs/dtab, clu-pane, clu-site-hero, clu-fm,
   clu-tree*, clu-chev, clu-editor*, clu-gutter, clu-code-area,
   clu-xterm-host (dark gradient + custom scrollbar), clu-set-grid,
   clu-switch-line, clu-section-head.

7. SiteDetailsTest assertions updated to match new template wording
   (PHP / ini, Datei-Manager, Cronjobs, Schnellaktionen). 36 Pest tests
   green.

8. Browser-verified: chart loads, xterm renders logs in correct color,
   files tab tree expands + editor loads wp-config.php, 0 console errors.
2026-05-31 23:49:48 +02:00
Boban Blaskovic 665ca4e40b UI: sidebar fixed-header/scroll-mid/fixed-foot + mobile drawer + ChartJS
Sidebar layout (per user request: header+footer fix, only nav scrollable):
- Restructured clu-sidebar into 3 flex-children: clu-sidebar-head (brand +
  ws-switch fixed at top), clu-sidebar-scroll (nav, overflow-y:auto in
  middle), clu-sidebar-foot (plan-box fixed at bottom).

Mobile sidebar (per user request: drawer + hamburger):
- <920px: sidebar position fixed, translateX(-110%) hidden, .open class
  slides in. clu-sidebar-backdrop overlay dimms main + click-to-close.
- New x-clu.burger component with hamburger icon, visible only <920px
  via display:grid in media query. Injected into all 9 topbars.
- Alpine state sidebarOpen on <body>, nav-item click closes drawer
  after navigation.

Linking (per user request: sites detail unreachable):
- Sites index table + dashboard top-sites table: domain cell now <a>
  to route('sites.show', $site) with wire:navigate.

Charts (per user request: chart.js):
- composer/npm: chart.js ^4.5.
- resources/js/app.js: register all chart.js plugins, expose window.Chart
  for inline page scripts.
- Dashboard: added Traffic-24h line chart (Chart.js line+gradient fill)
  between metrics and 2-col row. Init re-runs on livewire:navigated for
  wire:navigate compatibility.

Modal (per user request: wire-elements):
- @livewire('wire-elements-modal') already in layouts/app.blade.php
  master layout per wire-elements/modal v3 docs (single mount). Open
  pattern: wire:click="$dispatch('openModal', { component: 'name' })".

Full Pest regression: 47/47 green.
2026-05-31 23:17:29 +02:00
Boban Blaskovic 4f0c787f89 Pages: Cluster Wizard (4-step) + Site Details (6 tabs) — final 12/12
- pages/clusters/create: 4-step wizard (Basis/Region+Size/WordPress/Review),
  sticky summary card with live monthly price (size × nodes), creates real
  Cluster on submit, redirects to servers index. 6 tests.
- pages/sites/show: 6-tab interface (Übersicht/WordPress/PHP/Files/Cron/Logs)
  via Volt setTab(), URL-bound tab state. Overview metrics + Quick-Action
  toggles (maintenance/cache/CDN) persist directly. WP+PHP config forms,
  file tree + wp-config preview, cron table, log console with level coloring.
  5 tests.
- Routes: Volt for clusters.create + sites.show with route-model-binding.
- CSS: clu-detail-tabs, clu-log-console, clu-log-level (info/warn/error),
  clu-file-tree, clu-file-row.
- Full regression: 47/47 Pest tests green (214 assertions).

ALL 12 templates ported to Volt + Pest.
2026-05-31 23:08:15 +02:00