feat(puzzel-dashboard): Puzzel Dashboard App with screenly_inject.js

[salmanfarisvp]

PR Type

Enhancement

---

Description

• Add Puzzle Dashboard Edge App

• Load dashboard URL in iframe

• Configure URL and credential settings

• Automate dashboard login injection

---

Diagram Walkthrough

flowchart LR
  manifest["screenly.yml settings"]
  app["index.html iframe app"]
  inject["screenly_inject.js login automation"]
  dashboard["Puzzle Dashboard"]
  manifest -- "provides URL and credentials" --> app
  app -- "loads dashboard URL" --> dashboard
  inject -- "fills login form" --> dashboard

Loading

File Walkthrough

	Relevant files
Enhancement	screenly_inject.js Automate dashboard login form submission                                  edge-apps/puzzle-dashboard/screenly_inject.js Adds an injected login automation script. Reads username and password from screenly_settings. Fills matching username and password inputs. Submits forms or clicks submit buttons. +65/-0    index.html Render configured dashboard in iframe                                        edge-apps/puzzle-dashboard/index.html Adds the Puzzle Dashboard HTML entrypoint. Displays configured dashboard URL in fullscreen iframe. Loads Screenly settings via screenly.js. Signals readiness after initialization. +49/-0
Configuration changes	screenly.yml Define Puzzle Dashboard app manifest                                          edge-apps/puzzle-dashboard/screenly.yml Adds Screenly Edge App manifest. Defines dashboard category and ready signal. Configures dashboard_url, username, and password. Marks password setting as secret. +40/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 Security concerns Credential exfiltration: screenly_inject.js automatically fills and submits the configured credentials into any page containing matching username/password fields, without checking that the current origin matches the intended dashboard. A typo, redirect, or malicious configured URL could receive the saved credentials.

⚡ Recommended focus areas for review Invalid Manifest The manifest declares an empty id. If the Screenly manifest validator or app registry requires a unique non-empty app id, this app can fail validation or be registered with an unusable/null identifier. id: Credential Leak The injector fills and submits credentials into the first matching login form without verifying the page origin. If dashboard_url is mistyped, redirected, or changed to a phishing page, the configured username and password will be submitted to that page. usernameField.value = username; usernameField.dispatchEvent(new Event('input', { bubbles: true })); usernameField.dispatchEvent(new Event('change', { bubbles: true })); passwordField.value = password; passwordField.dispatchEvent(new Event('input', { bubbles: true })); passwordField.dispatchEvent(new Event('change', { bubbles: true })); var form = passwordField.closest('form') || usernameField.closest('form'); if (form) { form.submit(); Login Failure Calling form.submit() bypasses normal submit event handlers and constraint validation. Dashboards that rely on JavaScript submit handlers, such as React/Vue login forms, may have the credentials filled but never execute the login flow; requestSubmit() or clicking the submit button is safer. var form = passwordField.closest('form') || usernameField.closest('form'); if (form) { form.submit();

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Wait for dashboard load screenly.signalReadyForRendering() is called before the iframe has loaded the dashboard, so Screenly may capture/render a blank page. Signal readiness from the iframe load event after assigning src, and keep a fallback for missing url. edge-apps/puzzle-dashboard/index.html [41-45] +const dashboard = document.getElementById('dashboard'); + if (url) { - document.getElementById('dashboard').src = url; + dashboard.addEventListener('load', () => { + screenly.signalReadyForRendering(); + }, { once: true }); + + dashboard.src = url; +} else { + screenly.signalReadyForRendering(); } -screenly.signalReadyForRendering(); - Suggestion importance[1-10]: 8 __ Why: This correctly identifies that screenly.signalReadyForRendering() can fire before the iframe content has loaded, which may cause Screenly to render a blank page. Waiting for the load event is a meaningful functional improvement.	Medium
	Preserve form submit behavior Calling form.submit() bypasses native validation and submit event handlers, which can break login flows implemented by modern dashboards. Prefer requestSubmit() when available so the form behaves like a real user submission. edge-apps/puzzle-dashboard/screenly_inject.js [29-41] if (form) { - form.submit(); + if (form.requestSubmit) { + form.requestSubmit(); + } else { + var formSubmitButton = + form.querySelector('button[type="submit"]') || + form.querySelector('input[type="submit"]'); + + if (formSubmitButton) { + formSubmitButton.click(); + } else { + form.submit(); + } + } } else { var submitButton = document.querySelector('button[type="submit"]') || document.querySelector('input[type="submit"]') || document.querySelector('button'); if (submitButton) { submitButton.click(); } else { console.log('[screenly_inject] No submit button found, cannot submit form.'); } } Suggestion importance[1-10]: 7 __ Why: This is a valid issue because form.submit() bypasses native validation and submit handlers that login flows may rely on. Using requestSubmit() with a fallback improves compatibility without changing the broader behavior.	Medium

[nicomiguelino]

@salmanfarisvp, don't forget to rename the puzzle-dashboard directory to puzzel-dashboard: https://github.com/Screenly/Playground/pull/815/changes

[nicomiguelino]

We still need to test this against Puzzel.

[salmanfarisvp]

We still need to test this against Puzzel.

Yeah, @nicomiguelino . Once we have a demo account, we can test before merging.