<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>User page</title>
        <!-- https://cdnjs.com/libraries/qrcodejs -->
        <!-- https://github.com/davidshimjs/qrcodejs -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
        <link rel="stylesheet" href="/css/base.css">
        <script src="https://kit.fontawesome.com/55e3235dcf.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <%- include('../includes/header') -%>                            
        <h1 class="title">QR Code</h1>
        <div>Raw OTP Data: <span id="raw"></span></div>
        <div id="qrcode"></div>
        <button onclick="getOTP()">Regenerate QR Code</button>
        <script>
         const qrcode = document.getElementById("qrcode")
         const raw_e = document.getElementById("raw")
         // https://code-boxx.com/generate-qr-code-javascript/
         async function getOTP() {
             // Fetching data
             const res = await fetch('/api/auth/getOTP');
             const data = await res.json();

             // Changing Raw data
             raw_e.innerHTML = data.otp;

             // Changing QR Code
             qrcode.innerHTML = "";
             var qrc = new QRCode(qrcode, JSON.stringify(data));
         }
         async function otpLoop() {
             getOTP();
             setTimeout(otpLoop, 30 * 1000);
         }
         otpLoop();
        </script>
        <%- include('../includes/footer') -%>                            
    </body>
</html>
