<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="noindex">
    <meta name="version" content="1.16.18">

    <title>Traffic Parrot License Activation</title>

    <link rel="icon" href="/static/favicon.png">
    <link rel="stylesheet" href="/static/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/static/jQuery-File-Upload-10.31.0/css/jquery.fileupload.css">

    <script src="/static/jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script src="/static/jquery-ui-1.13.2/jquery-ui-1.13.2.min.js"></script>
    <script src="/static/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="/static/url-search-params-polyfill-7.0.1/index.js"></script>
    <script src="/static/jQuery-File-Upload-10.31.0/js/jquery.fileupload.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/static/html5shiv-3.7.3/html5shiv.min.js"></script>
    <script src="/static/respond-1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        #message {
            margin-top: 10px;
            white-space: pre-line;
        }
        #message.error {
            color: red;
            font-weight: bold;
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h3>Traffic Parrot License Server Activation</h3>
            <div id="activation-reason-section" class="form-group" style="display:none;">
                <input type="text" class="form-control" id="reason" aria-describedby="reasonHelp" placeholder="Please describe the reason for reactivation of the license server">
            </div>
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Select trafficparrot.usage.license file</span>
                <input id="fileupload" type="file" name="file">
            </span>
            <br>
            <br>
            <div id="progress" class="progress">
                <div class="progress-bar progress-bar-success"></div>
            </div>
            <p id="message"/>
            <br>
            <pre id="key"/>
        </div>
    </div>
</div>
<script>
    $(function () {
        'use strict';
        $('#fileupload').fileupload({
            url: '/api/activation',
            dataType: 'json',
            autoUpload: true
        }).on('fileuploadsubmit', function (e, data) {
            data.formData = {
                id: new URLSearchParams(window.location.search).get("id") || '',
                reason: $('#reason').val()
            };
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        }).on('fileuploaddone', function (e, data) {
            $('#message').text(data.result.message);
            $('#key').text(data.result.activationKey);
            if (data.result.activated) {
                $('#message').removeClass('error');
            } else {
                $('#message').addClass('error');
            }
            if (data.result.reasonRequired) {
                $('#activation-reason-section').show();
            } else {
                $('#activation-reason-section').hide();
            }
            $('#reason').val('');
        }).on('fileuploadfail', function(e, data) {
            $('#message').text(data.errorThrown);
        });
    });
</script>
</body>
</html>