pinokiod 8.0.7 → 8.0.8

package/kernel/api/hf/index.js

@@ -118,6 +118,8 @@ class HF {
           href: login.verification_uri_complete,
           target: "_blank",
           features: "browser",
+          copyText: login.user_code,
+          copyFeedbackSelector: ".hf-login-modal-copy",
           primary: true,
           close: false,
           icon: "fa-solid fa-arrow-up-right-from-square"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.0.7",
+  "version": "8.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/htmlmodal.js

@@ -286,17 +286,59 @@
       return classes.join(' ')
     }
 
+    async copyActionText(action) {
+      if (!action || typeof action.copyText !== 'string') {
+        return
+      }
+      const feedback = action.copyFeedbackSelector
+        ? this.body.querySelector(action.copyFeedbackSelector)
+        : null
+      try {
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+          await navigator.clipboard.writeText(action.copyText)
+        } else {
+          const input = createElement('textarea')
+          try {
+            input.value = action.copyText
+            input.setAttribute('readonly', '')
+            input.style.position = 'fixed'
+            input.style.opacity = '0'
+            document.body.appendChild(input)
+            input.select()
+            if (!document.execCommand('copy')) {
+              throw new Error('Clipboard copy was rejected')
+            }
+          } finally {
+            input.remove()
+          }
+        }
+        if (feedback) {
+          feedback.textContent = 'The code has been copied to your clipboard.'
+          feedback.classList.remove('warning')
+          feedback.classList.add('success')
+        }
+      } catch (_) {
+        if (feedback) {
+          feedback.textContent = 'Clipboard copy failed. Copy the displayed code manually.'
+          feedback.classList.remove('success')
+          feedback.classList.add('warning')
+        }
+      }
+    }
+
     handleAction(action) {
       if (!action) {
         return
       }
+      if (typeof action.copyText === 'string') {
+        this.copyActionText(action)
+      }
       if (action.type === 'link' && action.href) {
-        const target = action.target || '_blank'
-        window.open(action.href, target, action.features || 'noopener')
+        this.openActionUrl(action)
         return
       }
       if (action.type === 'submit' && action.href) {
-        window.open(action.href, action.target || '_blank', action.features || 'noopener')
+        this.openActionUrl(action)
       }
       if (action.type === 'submit' && this.current.awaiting && this.current.socket) {
         this.emitResponse({ action: action.id || 'submit', payload: action.payload || null })
@@ -306,8 +348,21 @@
       } else if (action.type === 'button' && this.current.socket && this.current.awaiting) {
         this.emitResponse({ action: action.id || 'button', payload: action.payload || null })
       } else if (action.type === 'button' && action.href) {
-        window.open(action.href, action.target || '_blank', action.features || 'noopener')
+        this.openActionUrl(action)
+      }
+    }
+
+    openActionUrl(action) {
+      if (action.features && action.features.includes('browser')) {
+        const agent = document.body.getAttribute('data-agent')
+        if (agent === 'electron') {
+          window.open(action.href, action.target || '_blank', 'browser')
+        } else {
+          window.open(action.href, action.target || '_blank')
+        }
+        return
       }
+      window.open(action.href, action.target || '_blank', action.features || 'noopener')
     }
 
     emitResponse(data) {

package/test/hf-api.test.js

@@ -108,6 +108,8 @@ test('hf.login shows a modal, waits for the user to open Hugging Face, then clos
       href: 'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
       target: '_blank',
       features: 'browser',
+      copyText: 'ABCD-EFGH',
+      copyFeedbackSelector: '.hf-login-modal-copy',
       primary: true,
       close: false,
       icon: 'fa-solid fa-arrow-up-right-from-square'

package/test/htmlmodal-clipboard.test.js

@@ -0,0 +1,115 @@
+const assert = require('node:assert/strict')
+const fs = require('node:fs/promises')
+const path = require('node:path')
+const test = require('node:test')
+const { JSDOM } = require('jsdom')
+
+const htmlModalPath = path.resolve(__dirname, '../server/public/htmlmodal.js')
+
+async function createModalDom(options = {}) {
+  const script = await fs.readFile(htmlModalPath, 'utf8')
+  const opened = []
+  const dom = new JSDOM(`<!doctype html><html><head></head><body><script>${script}</script></body></html>`, {
+    url: 'http://127.0.0.1:42000/',
+    runScripts: 'dangerously',
+    pretendToBeVisual: true,
+    beforeParse(window) {
+      if (options.clipboard) {
+        Object.defineProperty(window.navigator, 'clipboard', {
+          configurable: true,
+          value: options.clipboard
+        })
+      }
+      if (options.execCommand) {
+        window.document.execCommand = options.execCommand
+      }
+      window.open = (...args) => {
+        opened.push(args)
+      }
+    }
+  })
+
+  if (!dom.window.HtmlModal) {
+    await new Promise((resolve) => dom.window.addEventListener('DOMContentLoaded', resolve, { once: true }))
+  }
+  if (options.agent) {
+    dom.window.document.body.setAttribute('data-agent', options.agent)
+  }
+  return { dom, manager: dom.window.HtmlModal, opened }
+}
+
+function openCopyModal(manager) {
+  manager.handle({
+    id: 'packet',
+    data: {
+      action: 'open',
+      id: 'hf-login:test',
+      html: '<div class="hf-login-modal-copy custom-class">Copy this code.</div>',
+      actions: [{
+        id: 'open',
+        label: 'Open Hugging Face',
+        type: 'submit',
+        href: 'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+        target: '_blank',
+        features: 'browser',
+        copyText: 'ABCD-EFGH',
+        copyFeedbackSelector: '.hf-login-modal-copy'
+      }]
+    }
+  }, null)
+  manager.actions.querySelector('button').click()
+}
+
+test('html modal copies action text from the user click and opens a client-side web tab', async () => {
+  const copied = []
+  const { manager, opened } = await createModalDom({
+    clipboard: {
+      async writeText(value) {
+        copied.push(value)
+      }
+    }
+  })
+  openCopyModal(manager)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  assert.deepEqual(copied, ['ABCD-EFGH'])
+  assert.deepEqual(opened, [[
+    'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+    '_blank'
+  ]])
+  const feedback = manager.body.querySelector('.hf-login-modal-copy')
+  assert.equal(feedback.textContent, 'The code has been copied to your clipboard.')
+  assert.equal(feedback.classList.contains('custom-class'), true)
+  assert.equal(feedback.classList.contains('success'), true)
+})
+
+test('html modal keeps the Electron external-browser hint', async () => {
+  const { manager, opened } = await createModalDom({
+    agent: 'electron',
+    clipboard: { async writeText() {} }
+  })
+  openCopyModal(manager)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  assert.deepEqual(opened, [[
+    'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+    '_blank',
+    'browser'
+  ]])
+})
+
+test('html modal reports fallback copy failure and removes its temporary textarea', async () => {
+  const { dom, manager } = await createModalDom({
+    execCommand() {
+      throw new Error('copy denied')
+    }
+  })
+  openCopyModal(manager)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  const feedback = manager.body.querySelector('.hf-login-modal-copy')
+  assert.equal(feedback.textContent, 'Clipboard copy failed. Copy the displayed code manually.')
+  assert.equal(feedback.classList.contains('custom-class'), true)
+  assert.equal(feedback.classList.contains('warning'), true)
+  assert.equal(dom.window.document.querySelectorAll('body > textarea').length, 0)
+})