Generare QR Codes as SVG

README.md

@@ -58,10 +58,11 @@ Don't forget to migrate:
 
     rake db:migrate
 
-Add the gem's JavaScript to you `application.js`:
+### Default CSS
 
-    //= require devise-otp
+To use the default CSS for devise-otp, just require the devise-otp.css file as usual in your application.css file (or equivalent):
 
+    *= require devise-otp
 
 ### Custom views
 
@@ -77,9 +78,7 @@ The install generator also installs an english copy of a Devise OTP i18n file. T
 
 ### QR codes
 
-By default, Devise OTP assumes that you use [Sprockets](https://github.com/rails/sprockets) to render assets and so will use the ([qrcode.js](/app/assets/javascripts/qrcode.js)) embeded library to render the QR code.
-
-If you need something more, have a look at [QR codes](/docs/QR_CODES.md) documentation file.
+Devise OTP generates QR Codes directly as SVG's via the [rqrcode](https://github.com/whomwah/rqrcode), so there are no JavaScript (or Sprockets) dependencies.
 
 ## Configuration
 

app/assets/stylesheets/devise-otp.css

@@ -0,0 +1,4 @@
+.qrcode-container {
+  max-width: 300px;
+  margin: 0 auto;
+}

devise-otp.gemspec

@@ -17,4 +17,5 @@ Gem::Specification.new do |gem|
   gem.add_dependency "rails", ">= 7.0", "< 8.0"
   gem.add_dependency "devise", ">= 4.8.0", "< 5.0"
   gem.add_dependency "rotp", ">= 2.0.0"
+  gem.add_dependency "rqrcode", "~> 2.0"
 end

lib/devise_otp_authenticatable/controllers/helpers.rb

@@ -1,3 +1,5 @@
+require "rqrcode"
+
 module DeviseOtpAuthenticatable
   module Controllers
     module Helpers
@@ -119,33 +121,11 @@ def otp_reset_persistence_for(resource)
       # returns the URL for the QR Code to initialize the Authenticator device
       #
       def otp_authenticator_token_image(resource)
-        otp_authenticator_token_image_js(resource.otp_provisioning_uri)
-      end
-
-      private
-
-      def otp_authenticator_token_image_js(otp_url)
         content_tag(:div, class: "qrcode-container") do
-          content_tag(:div, id: "qrcode", class: "qrcode") do
-            javascript_tag(%[
-              new QRCode("qrcode", {
-                text: "#{otp_url}",
-                width: 256,
-                height: 256,
-                colorDark : "#000000",
-                colorLight : "#ffffff",
-                correctLevel : QRCode.CorrectLevel.H
-              });
-            ])
-          end
+          raw RQRCode::QRCode.new(resource.otp_provisioning_uri).as_svg(:module_size => 5, :viewbox => true, :use_path => true)
         end
       end
 
-      def otp_authenticator_token_image_google(otp_url)
-        otp_url = Rack::Utils.escape(otp_url)
-        url = "https://chart.googleapis.com/chart?chs=200x200&chld=M|0&cht=qr&chl=#{otp_url}"
-        image_tag(url, alt: "OTP Url QRCode")
-      end
     end
   end
 end

test/dummy/app/assets/javascripts/application.js

@@ -11,4 +11,3 @@
 // GO AFTER THE REQUIRES BELOW.
 //
 //= require_tree .
-//= require devise-otp

test/dummy/app/assets/stylesheets/application.css

@@ -8,6 +8,7 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
+ *= require devise-otp
  *= require_self
  *= require_tree .
  */