getnamingo-registry/cp/resources/views/partials/js-profile.twig

<script src="/assets/js/tabulator.min.js" defer></script>
<script src="/assets/js/sweetalert2.min.js" defer></script>
<script src="/assets/js/tabler.min.js" defer></script>
<script>
    var table;

    document.addEventListener("DOMContentLoaded", function(){
{% if isWebaEnabled %}
    const connectButton = document.getElementById('connectWebAuthnButton');

    connectButton.addEventListener('click', async function() {
        try {

            // check browser support
            if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
                throw new Error('Browser not supported.');
            }

            // get create args
            let rep = await window.fetch('/webauthn/register/challenge', {method:'GET', cache:'no-cache'});
            const createArgs = await rep.json();

            // error handling
            if (createArgs.success === false) {
                throw new Error(createArgs.msg || 'unknown error occured');
            }

            // replace binary base64 data with ArrayBuffer. a other way to do this
            // is the reviver function of JSON.parse()
            recursiveBase64StrToArrayBuffer(createArgs);

            // create credentials
            const cred = await navigator.credentials.create(createArgs);

            // create object
            const authenticatorAttestationResponse = {
                transports: cred.response.getTransports  ? cred.response.getTransports() : null,
                clientDataJSON: cred.response.clientDataJSON  ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
                attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
            };

            // check auth on server side
            rep = await window.fetch('/webauthn/register/verify', {
                method  : 'POST',
                body    : JSON.stringify(authenticatorAttestationResponse),
                cache   : 'no-cache'
            });
            const authenticatorAttestationServerResponse = await rep.json();

            // prompt server response
            if (authenticatorAttestationServerResponse.success) {
                Swal.fire({
                    title: 'WebAuthn Passkey',
                    text: authenticatorAttestationServerResponse.msg || 'Created successfully',
                    icon: "success"
                }).then((result) => {
                    // Checks if the result is successful (user clicked "OK")
                    if (result.value) {
                        // Reload the page
                        location.reload();
                    }
                });
            } else {
                throw new Error(authenticatorAttestationServerResponse.msg);
            }

        } catch (err) {
            Swal.fire({
              title: 'WebAuthn Passkey',
              text: err.message || 'Unknown error occured',
              icon: "error"
            }).then((result) => {
                // Checks if the result is successful (user clicked "OK")
                if (result.value) {
                    // Reload the page
                    location.reload();
                }
            });
        }

    });
    
    /**
     * convert RFC 1342-like base64 strings to array buffer
     * @param {mixed} obj
     * @returns {undefined}
     */
    function recursiveBase64StrToArrayBuffer(obj) {
        let prefix = '=?BINARY?B?';
        let suffix = '?=';
        if (typeof obj === 'object') {
            for (let key in obj) {
                if (typeof obj[key] === 'string') {
                    let str = obj[key];
                    if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
                        str = str.substring(prefix.length, str.length - suffix.length);

                        let binary_string = window.atob(str);
                        let len = binary_string.length;
                        let bytes = new Uint8Array(len);
                        for (let i = 0; i < len; i++)        {
                            bytes[i] = binary_string.charCodeAt(i);
                        }
                        obj[key] = bytes.buffer;
                    }
                } else {
                    recursiveBase64StrToArrayBuffer(obj[key]);
                }
            }
        }
    }

    /**
     * Convert a ArrayBuffer to Base64
     * @param {ArrayBuffer} buffer
     * @returns {String}
     */
    function arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return window.btoa(binary);
    }
{% endif %}
    table = new Tabulator("#auditTable", {
        ajaxURL:"/api/records/users_audit", // Set the URL for your JSON data
        ajaxConfig:"GET",
        pagination:"local",
        paginationSize: 10,
        paginationSizeSelector:[10, 25, 50, 100],
        clipboard:true,
        clipboardPasteAction:"replace",
        ajaxResponse:function(url, params, response){
            return response.records;
        },
        layout:"fitColumns",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        initialSort:[
            {column:"event_time", dir:"desc"},
        ],
        placeholder: "{{ __('No log data for user.') }}",
        columns: [
            {formatter:"responsiveCollapse", width:40, minWidth:40, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {
                title: "{{ __('Event') }}", 
                field: "user_event", 
                minWidth: 120, 
                resizable: false, 
                headerSort: false, 
                responsive: 0,
                formatter: function(cell) {
                    const value = cell.getValue();
                    return `<span title="${value}">${value}</span>`;
                },
            },
            {
                title: "{{ __('User Agent') }}", 
                field: "user_agent", 
                resizable: false, 
                headerSort: false, 
                responsive: 2,
                formatter: function(cell) {
                    const value = cell.getValue();
                    return `<span title="${value}">${value}</span>`;
                },
            },
            {title: "{{ __('IP') }}", field: "user_ip", minWidth:30, width:120, resizable:false, headerSort:false, responsive:2},
            {
                title: "{{ __('Location') }}",
                field: "user_location",
                resizable: false,
                headerSort: false,
                minWidth: 30,
                width: 100,
                responsive: 2,
                formatter: function(cell) {
                    const countryCode = cell.getValue(); // Get the location code, e.g., "UA"
                    return `<span class="flag flag-country-${countryCode.toLowerCase()}" title="${countryCode}"></span>`;
                },
            },
            {title: "{{ __('Timestamp') }}", field: "event_time", minWidth:250, resizable:false, headerSort:false, responsive:2},
            {title: "{{ __('User Log') }}", field: "user_data", minWidth:150, resizable:false, headerSort:false, responsive:0},
        ]
    });
    });
</script>