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,
        ajaxResponse:function(url, params, response){
            return response.records;
        },
        layout:"fitDataFill",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        initialSort:[
            {column:"event_time", dir:"desc"},
        ],
        placeholder: "{{ __('No log data for user.') }}",
        columns: [
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {title: "{{ __('Event') }}", field: "user_event", minWidth:30, width:120, resizable:false, headerSort:false, responsive:0},
            {title: "{{ __('User Agent') }}", field: "user_agent", minWidth:30, width:500, resizable:false, headerSort:false, responsive:2},
            {title: "{{ __('IP') }}", field: "user_ip", minWidth:30, width:150, resizable:false, headerSort:false, responsive:0},
            {title: "{{ __('Location') }}", field: "user_location", minWidth:30, width:100, resizable:false, headerSort:false, responsive:0},
            {title: "{{ __('Timestamp') }}", field: "event_time", minWidth:30, width:250, resizable:false, headerSort:false, responsive:0},
        ]
    });
    });
</script>