{"version":3,"file":"AccessLogViewer-DhKO22h5.js","sources":["../../../resources/js/components/AccessLogViewer.vue"],"sourcesContent":["<script setup>\n    import SearchBox from '@/components/SearchBox.vue'\n    import userService from '@/services/userService'\n    import Spinner from '@/components/Spinner.vue'\n    import { useNotifyStore } from '@/stores/notify'\n    import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'\n    import { UseColorMode } from '@vueuse/components'\n\n    const notify = useNotifyStore()\n    const $2fauth = inject('2fauth')\n\n    const props = defineProps({\n        userId: [Number, String],\n        lastOnly: Boolean,\n        showSearch: Boolean,\n        period: {\n            type: [Number, String],\n            default: 12\n        },\n    })\n\n    const periods = {\n        aMonth: 1,\n        threeMonths: 3,\n        halfYear: 6,\n        aYear: 12\n    }\n\n    const authentications = ref([])\n    const isFetching = ref(false)\n    const searched = ref('')\n    const period = ref(props.period)\n    const orderIsDesc = ref(true)\n\n    const emit = defineEmits(['has-more-entries'])\n\n    const visibleAuthentications = computed(() => {\n        return authentications.value.filter(authentication => {\n            return JSON.stringify(authentication)\n            .toString()\n            .toLowerCase()\n            .includes(searched.value);\n        })\n    })\n\n    onMounted(() => {\n        getAuthentications()\n    })\n\n    /**\n     * Sets the visible time span\n     * \n     * @param {int} duration \n     */\n    function setPeriod(duration) {\n        period.value = duration\n        getAuthentications()\n    }\n\n    /**\n     * Set sort order to ASC\n     */\n    function setAsc() {\n        orderIsDesc.value = false\n        sortAsc()\n    }\n        \n    /**\n     * Sorts entries ascending\n     */\n    function sortAsc() {\n        authentications.value.sort((a, b) => a.id > b.id ? 1 : -1)\n    }\n\n    /**\n     * Set sort order to DESC\n     */\n    function setDesc() {\n        orderIsDesc.value = true\n        sortDesc()\n    }\n\n    /**\n     * Sorts entries descending\n    */\n    function sortDesc() {\n        authentications.value.sort((a, b) => a.id < b.id ? 1 : -1)\n    }\n\n    /**\n     * Gets user authentication logs\n     */\n    function getAuthentications() {\n        isFetching.value = true\n        let limit = props.lastOnly ? 4 : false\n\n        userService.getauthentications(props.userId, period.value, limit, {returnError: true})\n        .then(response => {\n            authentications.value = response.data\n\n            if (authentications.value.length > 3 && props.lastOnly) {\n                emit('has-more-entries')\n                authentications.value.pop()\n            }\n            \n            orderIsDesc.value == true ? sortDesc() : sortAsc()\n        })\n        .catch(error => {\n            notify.error(error)\n        })\n        .finally(() => {\n            isFetching.value = false\n        })\n    }\n\n    const deviceIcon = (device) => {\n        switch (device) {\n            case \"phone\":\n                return 'mobile-screen'\n            case \"tablet\":\n                return 'tablet-screen-button'\n            default:\n                return 'display'\n        }\n    }\n\n    const isSuccessfulLogin = (authentication) => {\n        return authentication.login_successful && authentication.login_at\n    }\n\n    const isSuccessfulLogout = (authentication) => {\n        return !authentication.login_at && authentication.logout_at\n    }\n\n    const isFailedEntry = (authentication) => {\n        return !authentication.login_successful && !authentication.logout_at\n    }\n</script>\n\n<template>\n    <SearchBox v-if=\"props.showSearch\" v-model:keyword=\"searched\" :hasNoBackground=\"true\" />\n    <nav v-if=\"props.showSearch\" class=\"level is-mobile mb-2\">\n        <div class=\"level-item has-text-centered\">\n            <div class=\"buttons\"> \n                <button id=\"btnShowOneMonth\" :title=\"$t('admin.show_last_month_log')\" v-on:click=\"setPeriod(periods.aMonth)\" :class=\"{ 'has-text-grey' : period !== periods.aMonth }\" type=\"button\" class=\"button is-ghost p-1\">\n                    {{ $t('commons.one_month') }}\n                </button>\n                <button id=\"btnShowThreeMonths\" :title=\"$t('admin.show_three_months_log')\" v-on:click=\"setPeriod(periods.threeMonths)\" :class=\"{ 'has-text-grey' : period !== periods.threeMonths }\" type=\"button\" class=\"button is-ghost p-1\">\n                    {{ $t('commons.x_month', { 'x' : '3' }) }}\n                </button>\n                <button id=\"btnShowSixMonths\" :title=\"$t('admin.show_six_months_log')\" v-on:click=\"setPeriod(periods.halfYear)\" :class=\"{ 'has-text-grey' : period !== periods.halfYear }\" type=\"button\" class=\"button is-ghost p-1\">\n                    {{ $t('commons.x_month', { 'x' : '6' }) }}\n                </button>\n                <button id=\"btnShowOneYear\" :title=\"$t('admin.show_one_year_log')\" v-on:click=\"setPeriod(periods.aYear)\" :class=\"{ 'has-text-grey' : period !== periods.aYear }\" type=\"button\" class=\"button is-ghost p-1 mr-5\">\n                    {{ $t('commons.one_year') }}\n                </button>\n                <button id=\"btnSortLogDesc\" v-on:click=\"setDesc\" :title=\"$t('admin.sort_by_date_desc')\" :class=\"{ 'has-text-grey' : !orderIsDesc }\" type=\"button\" class=\"button p-1 is-ghost\">\n                    <FontAwesomeIcon :icon=\"['fas', 'arrow-up-long']\" flip=\"vertical\" />\n                    <FontAwesomeIcon :icon=\"['far', 'calendar']\" />\n                </button>\n                <button id=\"btnSortLogAsc\" v-on:click=\"setAsc\" :title=\"$t('admin.sort_by_date_asc')\" :class=\"{ 'has-text-grey' : orderIsDesc }\" type=\"button\" class=\"button p-1 is-ghost\">\n                    <FontAwesomeIcon :icon=\"['fas', 'arrow-up-long']\" />\n                    <FontAwesomeIcon :icon=\"['far', 'calendar']\" />\n                </button>\n            </div>\n        </div>\n    </nav>\n    <div v-if=\"visibleAuthentications.length > 0\">\n        <div v-for=\"authentication in visibleAuthentications\" :key=\"authentication.id\" class=\"list-item is-size-6 is-size-7-mobile has-text-grey is-flex is-justify-content-space-between\">\n            <UseColorMode v-slot=\"{ mode }\">\n                <div>\n                    <div>\n                        <span v-if=\"isFailedEntry(authentication)\" v-html=\"$t('admin.failed_login_on', { login_at: authentication.login_at })\" />\n                        <span v-else-if=\"isSuccessfulLogout(authentication)\" v-html=\"$t('admin.successful_logout_on', { login_at: authentication.logout_at })\" />\n                        <span v-else-if=\"$2fauth.config.proxyAuth\" v-html=\"$t('admin.viewed_on', { login_at: authentication.login_at })\" />\n                        <span v-else v-html=\"$t('admin.successful_login_on', { login_at: authentication.login_at })\" />\n                    </div>\n                    <div>\n                        {{ $t('commons.IP') }}: <span class=\"light-or-darker\">{{ authentication.ip_address }}</span> -\n                        {{ $t('commons.browser') }}: <span class=\"light-or-darker\">{{ authentication.browser }}</span> -\n                        {{ $t('commons.operating_system_short') }}: <span class=\"light-or-darker\">{{ authentication.platform }}</span>\n                    </div>\n                </div>\n                <div :class=\"mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'\" class=\"is-align-self-center \">\n                    <font-awesome-layers class=\"fa-2x width-1-5x\">\n                        <FontAwesomeIcon :icon=\"['fas', deviceIcon(authentication.device)]\" transform=\"grow-6\" fixed-width />\n                        <FontAwesomeIcon :icon=\"['fas', isFailedEntry(authentication) ? 'times' : 'check']\"\n                            :transform=\"'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')\"\n                            :class=\"isFailedEntry(authentication) ? 'has-text-danger' + (mode == 'dark' ? '-dark' : '') : 'has-text-success' + (mode == 'dark' ? '-dark' : '')\" fixed-width />\n                    </font-awesome-layers>\n                </div>\n            </UseColorMode>\n        </div>\n    </div>\n    <div v-else-if=\"authentications.length == 0\" class=\"mt-4\">\n        {{ $t('commons.no_entry_yet') }}\n    </div>\n    <div v-else class=\"mt-5 pl-3\">\n        {{ $t('commons.no_result') }}\n    </div>\n    <Spinner :isVisible=\"isFetching\" />\n</template>"],"names":["notify","useNotifyStore","$2fauth","inject","props","__props","periods","authentications","ref","isFetching","searched","period","orderIsDesc","emit","__emit","visibleAuthentications","computed","authentication","onMounted","getAuthentications","setPeriod","duration","setAsc","sortAsc","a","b","setDesc","sortDesc","limit","userService","response","error","deviceIcon","device","isSuccessfulLogout","isFailedEntry"],"mappings":"y7BAQI,MAAMA,EAASC,EAAc,EACvBC,EAAUC,EAAO,QAAQ,EAEzBC,EAAQC,EAURC,EAAU,CACZ,OAAQ,EACR,YAAa,EACb,SAAU,EACV,MAAO,EACf,EAEUC,EAAkBC,EAAI,CAAE,CAAA,EACxBC,EAAaD,EAAI,EAAK,EACtBE,EAAWF,EAAI,EAAE,EACjBG,EAASH,EAAIJ,EAAM,MAAM,EACzBQ,EAAcJ,EAAI,EAAI,EAEtBK,EAAOC,EAEPC,EAAyBC,EAAS,IAC7BT,EAAgB,MAAM,OAAOU,GACzB,KAAK,UAAUA,CAAc,EACnC,SAAQ,EACR,YAAW,EACX,SAASP,EAAS,KAAK,CAC3B,CACJ,EAEDQ,EAAU,IAAM,CACZC,EAAkB,CACrB,CAAA,EAOD,SAASC,EAAUC,EAAU,CACzBV,EAAO,MAAQU,EACfF,EAAkB,CAC1B,CAKI,SAASG,GAAS,CACdV,EAAY,MAAQ,GACpBW,EAAO,CACf,CAKI,SAASA,GAAU,CACfhB,EAAgB,MAAM,KAAK,CAACiB,EAAGC,IAAMD,EAAE,GAAKC,EAAE,GAAK,EAAI,EAAE,CACjE,CAKI,SAASC,GAAU,CACfd,EAAY,MAAQ,GACpBe,EAAQ,CAChB,CAKI,SAASA,GAAW,CAChBpB,EAAgB,MAAM,KAAK,CAACiB,EAAGC,IAAMD,EAAE,GAAKC,EAAE,GAAK,EAAI,EAAE,CACjE,CAKI,SAASN,GAAqB,CAC1BV,EAAW,MAAQ,GACnB,IAAImB,EAAQxB,EAAM,SAAW,EAAI,GAEjCyB,EAAY,mBAAmBzB,EAAM,OAAQO,EAAO,MAAOiB,EAAO,CAAC,YAAa,EAAI,CAAC,EACpF,KAAKE,GAAY,CACdvB,EAAgB,MAAQuB,EAAS,KAE7BvB,EAAgB,MAAM,OAAS,GAAKH,EAAM,WAC1CS,EAAK,kBAAkB,EACvBN,EAAgB,MAAM,IAAG,GAG7BK,EAAY,OAAS,GAAOe,EAAU,EAAGJ,EAAO,CACnD,CAAA,EACA,MAAMQ,GAAS,CACZ/B,EAAO,MAAM+B,CAAK,CACrB,CAAA,EACA,QAAQ,IAAM,CACXtB,EAAW,MAAQ,EACtB,CAAA,CACT,CAEI,MAAMuB,EAAcC,GAAW,CAC3B,OAAQA,EAAM,CACV,IAAK,QACD,MAAO,gBACX,IAAK,SACD,MAAO,uBACX,QACI,MAAO,SACvB,CACA,EAMUC,EAAsBjB,GACjB,CAACA,EAAe,UAAYA,EAAe,UAGhDkB,EAAiBlB,GACZ,CAACA,EAAe,kBAAoB,CAACA,EAAe"}