<div class="card panel-fcs-border shadow-sm">
    <div class="card-header">
        <span class="fcs-card-title h1">[% $user->gettext('Ihr OAuth2 Access Token für Heinzelmann') %]</span>
    </div>
    <div class='card-body' style=" word-wrap: break-word;      ">
        <p id="tokenCopied"></p>
        <p id="loadToken"><img src="images/ajax-loader.gif" />&nbsp;[% $user->gettext('Der Access Token wird geladen...') %]</p>
        <p id="errorToken" style="display:none;">[% $user->gettext('Der Access Token konnte nicht geladen werden.') %]</p>
        <div id="copyToken" style="display:none;">
            <p>[% $user->gettext('Token wurde geladen. Klicken Sie auf das Button, um es in die Zwischenablage zu kopieren') %].</p>
            <p id=""> <button onclick="copyToClipboard();" class="btn btn-outline-primary">[% $user->gettext('In Zwischenablage kopieren') %]</button></p>
        </div>
    </div>
</div>

<script>
    var token = "";
     $(document).ready(function(){
        console.log("New");
        $.get('index.php?module=user&event=GetOAuth2TokenJSON', function(data){
           token = data;
           $("#loadToken").hide();
           if(token){
                $("#copyToken").show();
            }
            else{
                 $("#errorToken").show();
            }
        })
    });
    /**
     * Comment
     */
    function copyToClipboard() {
        navigator.clipboard.writeText(token).then(function () {
            $("#tokenCopied").html('<b>[% $user->gettext('Token wurde in die Zwischenablage kopiert.') %]</b>');
        }, function (err) {
            $("#tokenCopied").html('<b>[% $user->gettext('Token konnte nicht in die Zwischenablage kopiert werden.') %]</b>');
        });
        ;
    }
</script>