From 4f17e2aff0078986788e00e4c15ebc4cb7979eca Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Mon, 15 Apr 2024 18:34:29 +0200
Subject: [PATCH] Fix format of log entries without login date

---
 app/Api/v1/Resources/UserAuthentication.php |  7 +++++-
 resources/js/components/AccessLogViewer.vue | 27 +++++++++++++++++----
 resources/lang/en/admin.php                 |  1 +
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/Api/v1/Resources/UserAuthentication.php b/app/Api/v1/Resources/UserAuthentication.php
index 926730d0..65585551 100644
--- a/app/Api/v1/Resources/UserAuthentication.php
+++ b/app/Api/v1/Resources/UserAuthentication.php
@@ -53,7 +53,12 @@ public function toArray($request)
             'browser'          => $this->agent->browser(),
             'platform'         => $this->agent->platform(),
             'device'           => $this->agent->deviceType(),
-            'login_at'         => Carbon::parse($this->login_at)->toDayDateTimeString(),
+            'login_at'         => $this->login_at
+                                      ? Carbon::parse($this->login_at)->toDayDateTimeString()
+                                      : null,
+            'logout_at'        => $this->logout_at
+                                      ? Carbon::parse($this->logout_at)->toDayDateTimeString()
+                                      : null,
             'login_successful' => $this->login_successful,
             'duration'         => $this->logout_at
                                       ? Carbon::parse($this->logout_at)->diffForHumans(Carbon::parse($this->login_at), ['syntax' => CarbonInterface::DIFF_ABSOLUTE])
diff --git a/resources/js/components/AccessLogViewer.vue b/resources/js/components/AccessLogViewer.vue
index 3ef151df..71cffea3 100644
--- a/resources/js/components/AccessLogViewer.vue
+++ b/resources/js/components/AccessLogViewer.vue
@@ -58,6 +58,18 @@
                 return 'display'
         }
     }
+
+    const isSuccessfulLogin = (authentication) => {
+        return authentication.login_successful && authentication.login_at
+    }
+
+    const isSuccessfulLogout = (authentication) => {
+        return !authentication.login_at && authentication.logout_at
+    }
+
+    const isFailedEntry = (authentication) => {
+        return !authentication.login_successful && !authentication.logout_at
+    }
 </script>
 
 <template>
@@ -65,18 +77,23 @@
     <div v-if="visibleAuthentications.length > 0">
         <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">
             <div>
-                <div  >
-                    <span v-if="authentication.login_successful" v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
-                    <span v-else v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
+                <div>
+                    <span v-if="isFailedEntry(authentication)" v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
+                    <span v-else-if="isSuccessfulLogout(authentication)" v-html="$t('admin.successful_logout_on', { login_at: authentication.logout_at })" />
+                    <span v-else v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
                 </div>
                 <div>
-                    {{ $t('commons.IP') }}: <span class="has-text-grey-light">{{ authentication.ip_address }}</span> - {{ $t('commons.browser') }}:  <span class="has-text-grey-light">{{ authentication.browser }}</span> - {{ $t('commons.operating_system_short') }}: <span class="has-text-grey-light">{{ authentication.platform }}</span>
+                    {{ $t('commons.IP') }}: <span class="has-text-grey-light">{{ authentication.ip_address }}</span> -
+                    {{ $t('commons.browser') }}: <span class="has-text-grey-light">{{ authentication.browser }}</span> -
+                    {{ $t('commons.operating_system_short') }}: <span class="has-text-grey-light">{{ authentication.platform }}</span>
                 </div>
             </div>
             <div class="is-align-self-center has-text-grey-darker">
                 <font-awesome-layers class="fa-2x">
                     <FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
-                    <FontAwesomeIcon :icon="['fas', authentication.login_successful ? 'check' : 'times']" :transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')" fixed-width :class="authentication.login_successful ? 'has-text-success-dark' : 'has-text-danger-dark'" />
+                    <FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
+                        :transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
+                        :class="isFailedEntry(authentication) ? 'has-text-danger-dark' : 'has-text-success-dark'" fixed-width />
                 </font-awesome-layers>
             </div>
         </div>
diff --git a/resources/lang/en/admin.php b/resources/lang/en/admin.php
index 9cba7373..d31c70b1 100644
--- a/resources/lang/en/admin.php
+++ b/resources/lang/en/admin.php
@@ -69,6 +69,7 @@
     'view_on_github' => 'View on Github',
     'x_is_available' => ':version is available',
     'successful_login_on' => 'Successful login on <span class="has-text-grey-light">:login_at</span>',
+    'successful_logout_on' => 'Successful logout on <span class="has-text-grey-light">:login_at</span>',
     'failed_login_on' => 'Failed login on <span class="has-text-grey-light">:login_at</span>',
     'last_accesses' => 'Last accesses',
     'see_full_log' => 'See full log',