29 Jun
2016
29 Jun
'16
3:05 p.m.
Uh, tough, is there something like a stack trace for the error message?
First stop would be to check is the clipboard.min.js is really loaded and displays without
error,
but I guess it does as otherwise the problem would appear on page load already ...
One thing that looks odd to me is:
<button class="btn"
data-clipboard-target="$doc.display('sTxtPassword')">
This will render the value of the sTxtPassword field as clipboard target; I guess you want
to use the id of the input field instead, e.g.
<button class="btn"
data-clipboard-target="#XPass.Code.XPassClass_0_sTxtPassword">
or something like that. At least the generated HTML should look this.
HTH
Clemens
D R wrote on 29.06.2016, 14:52
> 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+JavaScri…
> 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(a)xwiki.org
> http://lists.xwiki.org/mailman/listinfo/users
>