From ec396b00e8e2b96c4812e801ae432f5e1d719b06 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:15:45 +0200
Subject: [PATCH] Change log position & Small adjustments & Hide full log link

---
 resources/js/assets/app.scss                |  4 +++
 resources/js/components/AccessLogViewer.vue | 12 ++++++--
 resources/js/views/admin/users/Manage.vue   | 32 ++++++++++-----------
 resources/lang/en/admin.php                 |  2 +-
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index 74bcfad5..fec0fb8e 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -1397,4 +1397,8 @@ footer.main .field.is-grouped {
 }
 :root[data-theme="dark"] .light-or-darker {
   color: $grey-light;
+}
+
+.width-1-5x {
+  width: 1.5em;
 }
\ No newline at end of file
diff --git a/resources/js/components/AccessLogViewer.vue b/resources/js/components/AccessLogViewer.vue
index 245652f8..21812771 100644
--- a/resources/js/components/AccessLogViewer.vue
+++ b/resources/js/components/AccessLogViewer.vue
@@ -27,6 +27,8 @@
     const period = ref(periods.aMonth)
     const orderIsDesc = ref(true)
 
+    const emit = defineEmits(['has-more-entries'])
+
     const visibleAuthentications = computed(() => {
         return authentications.value.filter(authentication => {
             return JSON.stringify(authentication)
@@ -85,11 +87,17 @@
      */
     function getAuthentications() {
         isFetching.value = true
-        let limit = props.lastOnly ? 3 : false
+        let limit = props.lastOnly ? 4 : false
 
         userService.getauthentications(props.userId, period.value, limit, {returnError: true})
         .then(response => {
             authentications.value = response.data
+
+            if (authentications.value.length > 3) {
+                emit('has-more-entries')
+                authentications.value.pop()
+            }
+            
             orderIsDesc.value == true ? sortDesc() : sortAsc()
         })
         .catch(error => {
@@ -168,7 +176,7 @@
                     </div>
                 </div>
                 <div :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" class="is-align-self-center ">
-                    <font-awesome-layers class="fa-2x">
+                    <font-awesome-layers class="fa-2x width-1-5x">
                         <FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
                         <FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
                             :transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
diff --git a/resources/js/views/admin/users/Manage.vue b/resources/js/views/admin/users/Manage.vue
index 45eb34c5..fd831af1 100644
--- a/resources/js/views/admin/users/Manage.vue
+++ b/resources/js/views/admin/users/Manage.vue
@@ -15,6 +15,7 @@
     const isFetching = ref(false)
     const managedUser = ref(null)
     const listUserPreferences = ref(null)
+    const showFullLogLink = ref(false)
 
     const props = defineProps({
         userId: [Number, String]
@@ -208,6 +209,9 @@
             <div v-if="managedUser.info.oauth_provider" class="notification is-dark is-size-7-mobile has-text-centered">
                 {{ $t('admin.account_bound_to_x_via_oauth', { provider: managedUser.info.oauth_provider }) }}
             </div>
+            <div class="block is-size-6 is-size-7-mobile has-text-grey">
+                {{ $t('admin.registered_on_date', { date: managedUser.info.created_at }) }} - {{ $t('admin.last_seen_on_date', { date: managedUser.info.last_seen_at }) }}
+            </div>
             <div class="block">
                 <!-- otp as dot -->
                 <FormCheckbox v-model="managedUser.info.is_admin" @update:model-value="val => saveAdminRole(val === true)" fieldName="is_admin" label="admin.forms.is_admin.label" help="admin.forms.is_admin.help" />
@@ -244,7 +248,7 @@
                 <div class="list-item is-size-6 is-size-6-mobile has-text-grey is-flex is-justify-content-space-between">
                     <div>
                         <span class="has-text-weight-bold">{{ $t('settings.personal_access_tokens') }}</span>
-                        <span class="is-block is-family-primary is-size-7 is-size-7-mobile has-text-grey-dark">
+                        <span class="is-block is-family-primary has-text-grey-dark">
                             {{ $t('admin.user_has_x_active_pat', { count: managedUser.valid_personal_access_tokens }) }}
                         </span>
                     </div>
@@ -262,7 +266,7 @@
                 <div class="list-item is-size-6 is-size-6-mobile has-text-grey is-flex is-justify-content-space-between">
                     <div>
                         <span class="has-text-weight-bold">{{ $t('auth.webauthn.security_devices') }}</span>
-                        <span class="is-block is-size-7 is-size-7-mobile has-text-grey-dark">
+                        <span class="is-block has-text-grey-dark">
                             {{ $t('admin.user_has_x_security_devices', { count: managedUser.webauthn_credentials }) }}
                         </span>
                     </div>
@@ -278,6 +282,16 @@
                     </div>
                 </div>
             </div>
+            <div class="block">
+                <h3 class="title is-5 has-text-grey-light mb-2">{{ $t('admin.last_accesses') }}</h3>
+                <AccessLogViewer :userId="props.userId" :lastOnly="true" @has-more-entries="showFullLogLink = true"/>
+            </div>
+            <div v-if="showFullLogLink" class="block is-size-6 is-size-7-mobile has-text-grey">
+                {{ $t('admin.access_log_has_more_entries') }} <router-link id="lnkFullLogs" :to="{ name: 'admin.logs.access', params: { userId: props.userId }}" >
+                    {{ $t('admin.see_full_log') }}.
+                </router-link>
+            </div>
+            <!-- preferences -->
             <h2 class="title is-4 has-text-grey-light">{{ $t('settings.preferences') }}</h2>
             <div class="about-debug box is-family-monospace is-size-7">
                 <CopyButton id="btnCopyEnvVars" :token="listUserPreferences?.innerText" />
@@ -287,20 +301,6 @@
                     </li>
                 </ul>
             </div>
-            <!-- logs -->
-            <h2 class="title is-4 has-text-grey-light">{{ $t('admin.logs') }}</h2>
-            <div class="block is-size-6 is-size-7-mobile has-text-grey">
-                {{ $t('admin.registered_on_date', { date: managedUser.info.created_at }) }} - {{ $t('admin.last_seen_on_date', { date: managedUser.info.last_seen_at }) }}
-            </div>
-            <div class="block">
-                <h3 class="title is-6 has-text-grey-light mb-0">{{ $t('admin.last_accesses') }}</h3>
-                <AccessLogViewer :userId="props.userId" :lastOnly="true" />
-            </div>
-            <div class="block is-size-6 is-size-7-mobile has-text-grey">
-                {{ $t('admin.access_log_has_more_entries') }} <router-link id="lnkFullLogs" :to="{ name: 'admin.logs.access', params: { userId: props.userId }}" >
-                    {{ $t('admin.see_full_log') }}
-                </router-link>
-            </div>
             <!-- danger zone -->
             <h2 class="title is-4 has-text-danger">{{ $t('admin.danger_zone') }}</h2>
             <div class="is-left-bordered-danger">
diff --git a/resources/lang/en/admin.php b/resources/lang/en/admin.php
index 89301e89..c454cbdc 100644
--- a/resources/lang/en/admin.php
+++ b/resources/lang/en/admin.php
@@ -74,7 +74,7 @@
     'last_accesses' => 'Last accesses',
     'see_full_log' => 'See full log',
     'browser_on_platform' => ':browser on :platform',
-    'access_log_has_more_entries' => 'The access log is likely to contain more entries.',
+    'access_log_has_more_entries' => 'The access log contains more entries.',
     'access_log_legend_for_user' => 'Full access log for user :username',
     'show_last_month_log' => 'Show entries from the last month',
     'show_three_months_log' => 'Show entries from the last 3 months',