QR rotation dev - timer, rotate text password, expiry time margin setting (#414)

* Adding expiry time margin to setting and updating settings text.

* Add rotateqrcode to class structure

* Add submit password text to lang

* Form to allow users to enter rotating passwords

* Display text password on password.php

* Add timer for rotate password/qrcode on password.php

js/password/attendance_QRCodeRotate.js

@@ -15,9 +15,11 @@ class attendance_QRCodeRotate {
         this.qrCodeHTMLElement = "";
     }
 
-    start(sessionId, qrCodeHTMLElement) {
+    start(sessionId, qrCodeHTMLElement, textPasswordHTMLElement, timerHTMLElement) {
         this.sessionId = sessionId;
         this.qrCodeHTMLElement = qrCodeHTMLElement;
+        this.textPasswordHTMLElement = textPasswordHTMLElement;
+        this.timerHTMLElement = timerHTMLElement;
         this.fetchAndRotate();
     }
 
@@ -36,6 +38,12 @@ class attendance_QRCodeRotate {
         var qrcodeurl = document.URL.substr(0,document.URL.lastIndexOf('/')) + '/attendance.php?qrpass=' + password + '&sessid=' + this.sessionId;
         this.qrCodeInstance.clear();
         this.qrCodeInstance.makeCode(qrcodeurl);
+        // display new password
+        this.textPasswordHTMLElement.innerHTML = '<h2>'+password+'</h2>';
+    }
+
+    updateTimer(timeLeft) {
+        this.timerHTMLElement.innerHTML = '<h3>Time left: '+timeLeft+'</h3>';
     }
 
     startRotating() {
@@ -53,6 +61,8 @@ class attendance_QRCodeRotate {
                 location.reload(true);
             } else {
                 parent.changeQRCode(found.password);
+                parent.updateTimer(found.expirytime - Math.round(new Date().getTime() / 1000));
+
             }
 
         }, 1000);

lang/en/attendance.php

@@ -485,6 +485,8 @@ $string['studentscanmarksessiontime_desc'] = 'If checked students can only recor
 $string['studentscanmarksessiontimeend'] = 'Session end (minutes)';
 $string['studentscanmarksessiontimeend_desc'] = 'If the session does not have an end time, how many minutes should the session be available for students to record their attendance.';
 $string['submitattendance'] = 'Submit attendance';
+$string['submitpassword'] = 'Submit password';
+$string['submit'] = 'Submit';
 $string['subnet'] = 'Subnet';
 $string['subnetactivitylevel'] = 'Allow subnet config at activity level';
 $string['subnetactivitylevel_desc'] = 'If enabled, teachers can override the default subnet at the activity level when creating an attendance. Otherwise the site default will be used when creating a session.';

locallib.php

@@ -1139,7 +1139,6 @@ function attendance_generate_passwords($session) {
  * @param stdClass $session
  */
 function attendance_renderqrcoderotate($session) {
-    echo html_writer::tag('h3', get_string('qrcode', 'attendance'));
     // load requered js
     echo html_writer::tag('script', '',
         [
@@ -1153,12 +1152,17 @@ function attendance_renderqrcoderotate($session) {
             'type' => 'text/javascript'
         ]
     );
+    echo html_writer::tag('div', '', ['id' => 'rotate-time']); // div to display timer
+    echo html_writer::tag('h3', get_string('passwordgrp', 'attendance'));
+    echo html_writer::tag('div', '', ['id' => 'text-password']); // div to display password
+    echo html_writer::tag('h3', get_string('qrcode', 'attendance'));
     echo html_writer::tag('div', '', ['id' => 'qrcode']); // div to display qr code
     // js to start the password manager
     echo '
     <script type="text/javascript">
         let qrCodeRotate = new attendance_QRCodeRotate();
-        qrCodeRotate.start(' . $session->id . ', document.getElementById("qrcode"));
+        qrCodeRotate.start(' . $session->id . ', document.getElementById("qrcode"), document.getElementById("text-password"),
+        document.getElementById("rotate-time"));
     </script>';
 }
 

renderer.php

@@ -1121,12 +1121,23 @@ class mod_attendance_renderer extends plugin_renderer_base {
             } else {
                 list($canmark, $reason) = attendance_can_student_mark($sess, false);
                 if ($canmark) {
+                    if ($sess->rotateqrcode == 1) {
+                        $url = new moodle_url('/mod/attendance/attendance.php');
+                        $output = html_writer::empty_tag('input', array('type' => 'hidden', 'name' => 'sessid',
+                                'value' => $sess->id));
+                        $output .= html_writer::empty_tag('input', array('type' => 'text', 'name' => 'qrpass',
+                                'placeholder' => "Enter password"));
+                        $output .= html_writer::empty_tag('input', array('type' => 'submit',
+                                'value' => get_string('submit'),
+                                'class' => 'btn btn-secondary'));
+                        $cell = new html_table_cell(html_writer::tag('form', $output, array('action' => $url->out(), 'method' => 'get')));
+                    } else {
                         // Student can mark their own attendance.
                         // URL to the page that lets the student modify their attendance.
-
                         $url = new moodle_url('/mod/attendance/attendance.php',
                                 array('sessid' => $sess->id, 'sesskey' => sesskey()));
                         $cell = new html_table_cell(html_writer::link($url, get_string('submitattendance', 'attendance')));
+                    }
                     $cell->colspan = 3;
                     $row->cells[] = $cell;
                 } else { // Student cannot mark their own attendace.