google-qr-code/index.html at master · titanscouting/google-qr-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
    <head>
        <title>Titan Robotics Attendance QR Code Generator</title>
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            function generateBarCode(nric) {
                var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&amp;size=300x300';
                $('#barcode').attr('src', url);
            }
        </script>
        <script>
            function parseJwt (token) {
                var base64Url = token.split('.')[1];
                var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));

                return JSON.parse(jsonPayload);
            }
            function handleCredentialResponse(response) {
                const data = parseJwt(response.credential)
                const email = data.email;
                const name = data.name;
                generateBarCode(email);
                document.getElementById('barcode').style.display = 'block';
                document.getElementById('name').text = name + " (" + email + ")";
                document.getElementById('helptext').style.display = 'block';
            }
        </script>
    </head>
  <body>
    <h1>Titan Robotics Attendance QR Code Generator</h1>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="822095376908-5548mbdhdids5u07nn2hsg26u5b456kl.apps.googleusercontent.com"
         data-callback="handleCredentialResponse">
    </div>
    <h3>Sign in: </h3>
    <div class="g_id_signin" data-type="standard" data-size="large" data-width="400"></div>
    <p style="display: none;" id="helptext">Sign-in QR code for <a id="name"></a>:</p>
    <img id='barcode'
        style="display: none;"
        class="centered"
        src=""
        alt=""
        title="HELLO"
        width="300"
        height="300" />
    <p>Note: this was written in 20 minutes, so I can guarantee there are bugs. Please email dsingh14 at illinois dot edu if there are any major bugs.</p>
  </body>
</html>