+1

Our patrons would love this.

Agreed, this would be useful. 

I know some websites can tell if you are on mobile and display a link or button only if you are. That could be handy since there wouldn't be a real use case for using the barcode on a PC? 

Also if we could make it so it ups the screen brightness (not sure if possible just in mobile browser) but most people don't seem to keep their phones at high enough brightness to be read by a barcode scanner.

Here's what I tried today: https://zivotdesign.com/p/view.php?p=16143692116112

Using https://github.com/lindell/JsBarcode

I think we'd have to create a system preference for defining what card type to use (CODE39, Codabar, UPC, etc). The selection could also be used to set the default in the patron card creator.

Looks like this tool has more options, including all the options we offer in the patron card creator:

https://github.com/metafloor/bwip-js

+1 - really interested in this development.

Is this something you're still experimenting with Owen?

(In reply to Martin Renvoize from comment #7)
> Is this something you're still experimenting with Owen?

I started working on Bug 27825 - Add preference for choosing the default format for patron barcodes - and got stalled. I don't recall what the sticking point was or if I just got redirected.

Going to mark this one as a duplicate of bug 26692...

*** This bug has been marked as a duplicate of bug 26692 ***

Actually, I take that back, as that one is a bit too generic still, despite it listing the same use case...

https://codelabs.developers.google.com/add-to-wallet-android#0 is interesting too

(In reply to Martin Renvoize from comment #11)
> https://codelabs.developers.google.com/add-to-wallet-android#0 is
> interesting too

Ohhh very interesting. That would be a very cool feature. I think I'll raise a ticket for that.

It's not something most of our libraries would use, but as a library user I would love to have this...

See Bug 25332 for talk about adding a library card to a smart phone wallet

*** Bug 37118 has been marked as a duplicate of this bug. ***

It would by nice to have a "Barcode" tab in OPAC accout with QR image generated from cardnumber.

(In reply to Roman Dolny from comment #15)
> It would by nice to have a "Barcode" tab in OPAC accout with QR image
> generated from cardnumber.

I've accomplished something like this with a Koha plugin as I note on bug 37118. I'll have to look at sharing that plugin publicly...

I was just skimming through the patches, and this sounds pretty good I think. Excited to take a look when you're ready for a sign off.

Created attachment 168165 [details] [review]
Bug 26777: Added new sys pref 'OPACVirtualCard'

Created attachment 168166 [details] [review]
Bug 26777: Add barcode generator file and initial styling

Created attachment 168167 [details] [review]
Bug 26777: Add new patron page 'My Virtual Card'

Created attachment 168168 [details] [review]
Bug 26777: (follow-up) Adjust script, template, and CSS

Created attachment 168169 [details] [review]
Bug 26777: (follow-up) Fix file permssions and tidy

Created attachment 168170 [details] [review]
Bug 26777: Add bwip-js library to Koha

bwip-js is the chosen library for generating and displaying barcodes in the OPAC. It allows for many different barcode types and customizable settings. This patch created a new directory and file for the js library code to live as well as updating the about.tt to give credit.

Created attachment 168171 [details] [review]
Bug 26777: Add new system preference 'OPACVirtualCardBarcode'

Created attachment 168172 [details] [review]
Bug 26777: Allow ability to select diffferent barcode types

These cumalation of patches introduce a new patron page on the OPAC: "My virtual card." This page and its contents are reliant on the system preferences 'OPACVirtualCard' and 'OPACVirtualCardBarcode'. OPACVirutalCard determines whether the virtual card page is even displayed on the OPAC whereas OPACVirtualCardBarcode selects the type of barcode to display on this page (if page is displayed). Currently, the virtual card page consits of a patron image (if available), the patron's barcode, and the library name. A potential follow up would be to allow customization of this page. The barcode generation is handled by a new library bwip-js.

To test:
1) Apply patch, updatedatabase, restart_all, build yarn
2) In system preferences, search for 'OPACVirtualCard'. Both this and the barcode sys. pref should show up with the same search. Notice they are dependent on one another. The default for the first pref should be "Don't allow". Leave this as is for now.
3) Leave the preference page open and log into the OPAC. Visit the user page. Notice that the navbar on the left consiting of 'Summary', 'Charges', etc. looks the same.
4) Go back to the sys. pref page and set the OPACVirtualCard to "Allow"
5) Also in the sys. prefs, make a search for "patron images" and set 'OPACpatronimages' to "Show" and 'patronimages' to allow.
6) Visit the patron's page that you used to sign in to the OPAC. Add a patron image if there is not one already.
7) Now, edit their details and change their card number to '00012345678905'
8) Venture back to the OPAC patron page. Refresh this and you should see a new "My Virtual Card" page at the bottom.
9) Click this page and you should see a new virtual card for you patron, consiting of their image, a barcode, and their library.
10) Open the dev tools for your browser and switch to vieiwing in mobile mode. Make sure the card looks good. This would likely be the most common use case.
11) Switch back to a system preference page and try playing around with the 'OPACVirtualCardBarcode'. Note that these changes affect the type of barcode that is display in the virtual card page. If you selected a barcode format that is incompatible, an error message should display in the virtual card page.

Created attachment 168289 [details] [review]
Bug 26777: Added new sys pref 'OPACVirtualCard'

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168290 [details] [review]
Bug 26777: Add barcode generator file and initial styling

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168291 [details] [review]
Bug 26777: Add new patron page 'My Virtual Card'

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168292 [details] [review]
Bug 26777: (follow-up) Adjust script, template, and CSS

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168293 [details] [review]
Bug 26777: (follow-up) Fix file permssions and tidy

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168294 [details] [review]
Bug 26777: Add bwip-js library to Koha

bwip-js is the chosen library for generating and displaying barcodes in the OPAC. It allows for many different barcode types and customizable settings. This patch created a new directory and file for the js library code to live as well as updating the about.tt to give credit.

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168295 [details] [review]
Bug 26777: Add new system preference 'OPACVirtualCardBarcode'

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

Created attachment 168296 [details] [review]
Bug 26777: Allow ability to select diffferent barcode types

These cumalation of patches introduce a new patron page on the OPAC: "My virtual card." This page and its contents are reliant on the system preferences 'OPACVirtualCard' and 'OPACVirtualCardBarcode'. OPACVirutalCard determines whether the virtual card page is even displayed on the OPAC whereas OPACVirtualCardBarcode selects the type of barcode to display on this page (if page is displayed). Currently, the virtual card page consits of a patron image (if available), the patron's barcode, and the library name. A potential follow up would be to allow customization of this page. The barcode generation is handled by a new library bwip-js.

To test:
1) Apply patch, updatedatabase, restart_all, build yarn
2) In system preferences, search for 'OPACVirtualCard'. Both this and the barcode sys. pref should show up with the same search. Notice they are dependent on one another. The default for the first pref should be "Don't allow". Leave this as is for now.
3) Leave the preference page open and log into the OPAC. Visit the user page. Notice that the navbar on the left consiting of 'Summary', 'Charges', etc. looks the same.
4) Go back to the sys. pref page and set the OPACVirtualCard to "Allow"
5) Also in the sys. prefs, make a search for "patron images" and set 'OPACpatronimages' to "Show" and 'patronimages' to allow.
6) Visit the patron's page that you used to sign in to the OPAC. Add a patron image if there is not one already.
7) Now, edit their details and change their card number to '00012345678905'
8) Venture back to the OPAC patron page. Refresh this and you should see a new "My Virtual Card" page at the bottom.
9) Click this page and you should see a new virtual card for you patron, consiting of their image, a barcode, and their library.
10) Open the dev tools for your browser and switch to vieiwing in mobile mode. Make sure the card looks good. This would likely be the most common use case.
11) Switch back to a system preference page and try playing around with the 'OPACVirtualCardBarcode'. Note that these changes affect the type of barcode that is display in the virtual card page. If you selected a barcode format that is incompatible, an error message should display in the virtual card page.

Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>

*** Bug 26692 has been marked as a duplicate of this bug. ***

*** Bug 27825 has been marked as a duplicate of this bug. ***

Created attachment 169742 [details] [review]
Bug 26777: Added new sys pref 'OPACVirtualCard'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169743 [details] [review]
Bug 26777: Add barcode generator file and initial styling

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169744 [details] [review]
Bug 26777: Add new patron page 'My Virtual Card'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169745 [details] [review]
Bug 26777: (follow-up) Adjust script, template, and CSS

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169746 [details] [review]
Bug 26777: (follow-up) Fix file permssions and tidy

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169747 [details] [review]
Bug 26777: Add bwip-js library to Koha

bwip-js is the chosen library for generating and displaying barcodes in the OPAC. It allows for many different barcode types and customizable settings. This patch created a new directory and file for the js library code to live as well as updating the about.tt to give credit.

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169748 [details] [review]
Bug 26777: Add new system preference 'OPACVirtualCardBarcode'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 169749 [details] [review]
Bug 26777: Allow ability to select diffferent barcode types

These cumalation of patches introduce a new patron page on the OPAC: "My virtual card." This page and its contents are reliant on the system preferences 'OPACVirtualCard' and 'OPACVirtualCardBarcode'. OPACVirutalCard determines whether the virtual card page is even displayed on the OPAC whereas OPACVirtualCardBarcode selects the type of barcode to display on this page (if page is displayed). Currently, the virtual card page consits of a patron image (if available), the patron's barcode, and the library name. A potential follow up would be to allow customization of this page. The barcode generation is handled by a new library bwip-js.

To test:
1) Apply patch, updatedatabase, restart_all, build yarn
2) In system preferences, search for 'OPACVirtualCard'. Both this and the barcode sys. pref should show up with the same search. Notice they are dependent on one another. The default for the first pref should be "Don't allow". Leave this as is for now.
3) Leave the preference page open and log into the OPAC. Visit the user page. Notice that the navbar on the left consiting of 'Summary', 'Charges', etc. looks the same.
4) Go back to the sys. pref page and set the OPACVirtualCard to "Allow"
5) Also in the sys. prefs, make a search for "patron images" and set 'OPACpatronimages' to "Show" and 'patronimages' to allow.
6) Visit the patron's page that you used to sign in to the OPAC. Add a patron image if there is not one already.
7) Now, edit their details and change their card number to '00012345678905'
8) Venture back to the OPAC patron page. Refresh this and you should see a new "My Virtual Card" page at the bottom.
9) Click this page and you should see a new virtual card for you patron, consiting of their image, a barcode, and their library.
10) Open the dev tools for your browser and switch to vieiwing in mobile mode. Make sure the card looks good. This would likely be the most common use case.
11) Switch back to a system preference page and try playing around with the 'OPACVirtualCardBarcode'. Note that these changes affect the type of barcode that is display in the virtual card page. If you selected a barcode format that is incompatible, an error message should display in the virtual card page.

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Nice to see this moved along.  Passing QA

This needs a rebase, probably because of bug 35402. Please fix, it will appear back on top of my queue then.

Created attachment 170667 [details] [review]
Bug 26777: Added new sys pref 'OPACVirtualCard'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170668 [details] [review]
Bug 26777: Add barcode generator file and initial styling

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170669 [details] [review]
Bug 26777: Add new patron page 'My Virtual Card'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170670 [details] [review]
Bug 26777: (follow-up) Adjust script, template, and CSS

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170671 [details] [review]
Bug 26777: (follow-up) Fix file permssions and tidy

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170672 [details] [review]
Bug 26777: Add bwip-js library to Koha

bwip-js is the chosen library for generating and displaying barcodes in the OPAC. It allows for many different barcode types and customizable settings. This patch created a new directory and file for the js library code to live as well as updating the about.tt to give credit.

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170673 [details] [review]
Bug 26777: Add new system preference 'OPACVirtualCardBarcode'

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Created attachment 170674 [details] [review]
Bug 26777: Allow ability to select diffferent barcode types

These cumalation of patches introduce a new patron page on the OPAC: "My virtual card." This page and its contents are reliant on the system preferences 'OPACVirtualCard' and 'OPACVirtualCardBarcode'. OPACVirutalCard determines whether the virtual card page is even displayed on the OPAC whereas OPACVirtualCardBarcode selects the type of barcode to display on this page (if page is displayed). Currently, the virtual card page consits of a patron image (if available), the patron's barcode, and the library name. A potential follow up would be to allow customization of this page. The barcode generation is handled by a new library bwip-js.

To test:
1) Apply patch, updatedatabase, restart_all, build yarn
2) In system preferences, search for 'OPACVirtualCard'. Both this and the barcode sys. pref should show up with the same search. Notice they are dependent on one another. The default for the first pref should be "Don't allow". Leave this as is for now.
3) Leave the preference page open and log into the OPAC. Visit the user page. Notice that the navbar on the left consiting of 'Summary', 'Charges', etc. looks the same.
4) Go back to the sys. pref page and set the OPACVirtualCard to "Allow"
5) Also in the sys. prefs, make a search for "patron images" and set 'OPACpatronimages' to "Show" and 'patronimages' to allow.
6) Visit the patron's page that you used to sign in to the OPAC. Add a patron image if there is not one already.
7) Now, edit their details and change their card number to '00012345678905'
8) Venture back to the OPAC patron page. Refresh this and you should see a new "My Virtual Card" page at the bottom.
9) Click this page and you should see a new virtual card for you patron, consiting of their image, a barcode, and their library.
10) Open the dev tools for your browser and switch to vieiwing in mobile mode. Make sure the card looks good. This would likely be the most common use case.
11) Switch back to a system preference page and try playing around with the 'OPACVirtualCardBarcode'. Note that these changes affect the type of barcode that is display in the virtual card page. If you selected a barcode format that is incompatible, an error message should display in the virtual card page.

Signed-off-by: Laura Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Please verify my changes once pushed and reply to 1) :)

1) Naming and positioning

This is a question: You named the tab "My virtual card", but that appears very general. What about we named it "Library card" or "Virtual library card" instead? 
Tbh I struggle a bit with the 'virtual and the "my" that we once had removed from all the other tabs.

Also, right now the tab appears last in the patron's account, should we move it to be first or second?

2) Capitalization

- My Virtual Card => My virtual card

I've fixed this in a follow-up patch.

3) Translatability

This is untranslatable:
+        document.getElementById('barcode-container').innerHTML = `<p><strong>Error: </strong>${errorMessage}</p>`;

Also, strings should always be enclosed using double quotes. That's so that languages using single quotes like French don't break the JS by accident.
See: JS2: Enabling translation of language strings in embedded JavaScript

I attached a follow-up patch.

4) Missing CSS file 

This is not right, maybe related to the Bootstrap 5 change:

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt:    [% Asset.css("css/src/opac.css") | $raw %]

This file doesn't exist. Updated to: css/opac.css in a follow-up patch.

Pushed for 24.11!

Well done everyone, thank you!

I wanted to thoroughly test this but ran out of time chasing a different bug...

Just wanted to point out that you almost never want to use innerHTML() for setting a value. It's a good way to accidentally introduce a XSS vulnerability. Look at OWASP documents for preventing Cross-Site Scripting (XSS).

In this case, I think that you're mostly, as it seems unlikely someone could slip XSS in through the SVG. I'm more worried about the error message, which appears to be broken anyway...

(In reply to Katrin Fischer from comment #63)
> 3) Translatability
> 
> This is untranslatable:
> +        document.getElementById('barcode-container').innerHTML =
> `<p><strong>Error: </strong>${errorMessage}</p>`;
> 
> Also, strings should always be enclosed using double quotes. That's so that
> languages using single quotes like French don't break the JS by accident.
> See: JS2: Enabling translation of language strings in embedded JavaScript

So this was using a template literal, which I thought the translations could use? 

Personally, I quite like template literals, but using innerHTML here was a good way to potentially introduce XSS via the errorMessage... (although it would need to come from the third party Javascript in this case which is probably unlikely but still better to be safe than sorry...)

> I attached a follow-up patch.

The follow-up patch accidentally broke the errorMessage display, since it retained the template literal syntax for errorMessage. See bug 37742.

(In reply to David Cook from comment #66)
> The follow-up patch accidentally broke the errorMessage display, since it
> retained the template literal syntax for errorMessage. See bug 37742.

Btw, while I fix this in bug 37742, I don't think that we should actually show the error message to patrons. If we're going to show an error message, it would probably be better to say "Failed to generate barcode" or something like that.

A user doesn't need to see "Code 39 must contain only digits, capital letters, spaces and the symbols -.$/+%"

(In reply to David Cook from comment #67)
> (In reply to David Cook from comment #66)
> > The follow-up patch accidentally broke the errorMessage display, since it
> > retained the template literal syntax for errorMessage. See bug 37742.
> 
> Btw, while I fix this in bug 37742, I don't think that we should actually
> show the error message to patrons. If we're going to show an error message,
> it would probably be better to say "Failed to generate barcode" or something
> like that.
> 
> A user doesn't need to see "Code 39 must contain only digits, capital
> letters, spaces and the symbols -.$/+%"

Sorry for breaking it. :( I did check for JS errors, and didn't see any, but that was not enough.

Fixed on 37742 I believe.