Hi,

I'm trying to implement a basic password manager as an XWiki application. I
have short text fields for username and password. In view mode the password
is replaced by ********** to hide it from prying eyes.

Now I'd like to have a button next to the username and password fields for
copying the values to the clipboard.

I found two sources:
1.
http://extensions.xwiki.org/xwiki/bin/view/Extension/Cross-browser+JavaScript+clipboard+access
2. https://clipboardjs.com/

As the Wiki entry (1) is rather old I tried to replace it by (2) but I'm
not sure how to insert the code exactly.

I uploaded the clipboard.min.js as an attachment to the Application code
page.
My Application sheet looks like this:

{{velocity}}
{{html wiki="true"}}
#set ($discard = $doc.use('XPass.Code.XPassClass'))
#set($theSharedPanel = $xwiki.getDocument('XPass.Code'))
<script src="$theSharedPanel.getAttachmentURL('clipboard.min.js')"></script>
(% class="xform" %)
(((
  <script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
  </script>
  ; <label
for="XPass.Code.XPassClass_0_sTxtName">$escapetool.xml($doc.displayPrettyName('sTxtName',
false, false))</label>
  : $doc.display('sTxtName')
  ; <label
for="XPass.Code.XPassClass_0_sListCategory">$escapetool.xml($doc.displayPrettyName('sListCategory',
false, false))</label>
  : $doc.display('sListCategory')
  ; <label
for="XPass.Code.XPassClass_0_sTxtURL">$escapetool.xml($doc.displayPrettyName('sTxtURL',
false, false))</label>
  : $doc.display('sTxtURL')
  ; <label
for="XPass.Code.XPassClass_0_lTxtDesc">$escapetool.xml($doc.displayPrettyName('lTxtDesc',
false, false))</label>
  : $doc.display('lTxtDesc')
  ; <label
for="XPass.Code.XPassClass_0_sTxtUser">$escapetool.xml($doc.displayPrettyName('sTxtUser',
false, false))</label>
  : $doc.display('sTxtUser')

  ; <label
for="XPass.Code.XPassClass_0_sTxtPassword">$escapetool.xml($doc.displayPrettyName('sTxtPassword',
false, false))</label>
  :
  #if ($context.display == 'edit')
    $doc.display('sTxtPassword')
  #else
    ~*~*~*~*~*~*~*~*~*~*
  #end
  <button class="btn" data-clipboard-target="$doc.display('sTxtPassword')">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
  </button>
)))
{{/html}}
{{/velocity}}

Now then pressing the "Copy to clipboard" button the clipboard is not
updated and the console shows:
"ReferenceError: Clipboard is not defined"

I'm not sure where to place the scripts to make it work so mybe someone can
enlighten me.

Regards,
Dennis
_______________________________________________
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Reply via email to