<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ICNML</title>
        <meta name="description" content="International Close Non-Matches Library">
        
        {% autoescape false %}
            {{ app_files }}
        {% endautoescape %}
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            secret = "{{ secret }}";
        </script>
        <style type="text/css">
            #stores_links {
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                justify-items: center;
            }
        </style>
    </head>
    <body>
        <div class="icnml_central">
            <h1 style="margin-bottom: 0px">ICNML</h1>
            <h4 style="margin-top: 0px">International Close Non-Matches Library</h4>
            
            <div class="ui-widget-header ui-corner-top icnml_box_top">Time-based One Time Password help</div>
            <div class="ui-widget-content ui-corner-bottom icnml_box_content_central">
                <div>
                    A Time-based One-time Password (TOTP) algorithm is a method to compute a one time password based upon a shared secret between the server and the user.
                    This password is only valid for a period of 30 seconds, and is asked as second-factor upon login.
                    
                    <br />
                    <br />
                    
                    The configuration of the shared secret is done via the scan of a QR code generated by the server.
                    This code is scanned by a TOTP application on a smartphone.
                    
                    <br />
                    <br />
                    
                    FreeOTP or GoogleAuthenticator are two applications available on the Apple App Store for Iphones or the GooglePlay for Android.
                    A lot of other applications can be used.
                    FreeOTP is downloadable here:

                    <br />
                    <br />
                    
                    <div id="stores_links">
                        <a href="https://itunes.apple.com/fr/app/freeotp-authenticator/id872559395?mt=8" target="_blank">
                            <img src="{{ url_for( 'files.send_static_files', subpath = 'googleplay.png' ) }}" height="50px">
                        </a>
                        
                        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" target="_blank">
                            <img src="{{ url_for( 'files.send_static_files', subpath = 'appstore.png' ) }}" height="50px">
                        </a>
                    </div>
                    
                    <br />
                    
                    Once the application is installed, you are able to scan a configuration QR code related to your account.
                    Here you have an example of configuration QR code:
                    
                    <br />
                    
                    <div style="text-align: center;">
                        <img src="{{ url_for( 'login.user_totp_qrcode_example' ) }}">
                    </div>
                    
                    The TOTP value is a set of 6 digits, changing every 30 seconds.
                    The current TOTP value is:
                    <div style="text-align: center; margin-bottom: 10px;">
                        <h1 id="icnml_current_totp"></h1>
                        <div>Valid for <span id="icnml_totp_timeremaining"></span> second(s)</div>
                    </div>

                    Please try to add this TOTP value as an example to your phone (or TOTP application on your computer) and check if the current value is correct. You can delete this TOTP account afterwards (not used in any case to login in your ICNML account).
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    var update_data = function()
    {
        var tr = otplib.authenticator.timeRemaining();
        var h = otplib.authenticator.generate( "secretsecretsecretsecret" );
        h = h.substr( 0, 3 ) + " " + h.substr( 3, 6 );
        
        $( "#icnml_current_totp" ).text( h );
        $( "#icnml_totp_timeremaining" ).text( tr );
    }
    
    update_data();
    setInterval( update_data, 1000 );
    </script>
</html>
