Go

scipost/forms.py

@@ -3,6 +3,7 @@ __license__ = "AGPL v3"
 
 
 import datetime
+import pyotp
 
 from django import forms
 from django.contrib.auth.models import User, Group
@@ -348,6 +349,21 @@ class TOTPDeviceForm(forms.Form):
     token = forms.CharField()
     key = forms.CharField(widget=forms.HiddenInput(), required=True)
 
+    def __init__(self, *args, **kwargs):
+        self.current_user = kwargs.pop('current_user')
+        super().__init__(*args, **kwargs)
+        self.initial['key'] = 'JBSWY3DPEHPK3PXP'
+
+    @property
+    def secret_key(self):
+        if hasattr(self, 'cleaned_data') and 'key' in self.cleaned_data:
+            return self.cleaned_data.get('key')
+        return self.initial['key']
+
+    def get_QR_data(self):
+        return pyotp.totp.TOTP(self.secret_key).provisioning_uri(
+            self.current_user.email, issuer_name="SciPost")
+
 
 AUTHORSHIP_CLAIM_CHOICES = (
     ('-', '-'),

scipost/static/scipost/assets/js/scripts.js

 require('jquery-ui/ui/widgets/sortable');
 require('jquery-ui/ui/disable-selection');
-var QRCode = require('qrcode');
 
+import QRCode from 'qrcode';
 import notifications from './notifications.js';
 
 function hide_all_alerts() {
@@ -20,9 +20,15 @@ var activate_qr = function() {
     $.each($('[data-toggle="qr"]'), function(index, value) {
         var el = $(value);
         console.log(el.data('qr-value'));
-        QRCode.toCanvas(el, el.data('qr-value'), function(err) {
-            console.log(err);
-        })
+        // var str;
+        QRCode.toDataURL(el.data('qr-value'), function(err, url) {
+            el.attr({src: url});
+        });
+        // console.log(str);
+        // el.attr({src: str});
+        // QRCode.toCanvas(el, el.data('qr-value'), function(err) {
+        //     console.log(err);
+        // })
     });
 };
 

scipost/templates/scipost/totpdevice_form.html

@@ -31,7 +31,7 @@
         <p>
             Enter the security code generated by your mobile authenticator app to make sure it’s configured correctly.
         </p>
-        <canvas id="qr" data-toggle="qr" data-qr-value="blabla"></canvas>
+        <img id="qr" data-toggle="qr" data-qr-value="{{ form.get_QR_data }}">
         <!-- <script>
           (function() {
             var qr = new QRious({

scipost/views.py

@@ -891,6 +891,11 @@ class TOTPDeviceCreateView(FormView):
     template_name = 'scipost/totpdevice_form.html'
     success_url = reverse_lazy('scipost:totp')
 
+    def get_form_kwargs(self):
+        kwargs = super().get_form_kwargs()
+        kwargs['current_user'] = self.request.user
+        return kwargs
+
 
 class TOTPDeviceDeleteView(DeleteView):
     pk_url_kwarg = 'device_id'