From 18ec34d97c97e416a5626615611501a36400dc83 Mon Sep 17 00:00:00 2001 From: Valerian Saliou Date: Thu, 15 Aug 2024 17:56:05 +0200 Subject: [PATCH] fix: improve a bit user information sidebar behavior --- src/assemblies/inbox/InboxDetailsUser.vue | 2 - .../inbox/InboxDetailsUserInformation.vue | 162 +++++++++--------- .../inbox/InboxDetailsUserSecurity.vue | 81 ++++----- 3 files changed, 125 insertions(+), 120 deletions(-) diff --git a/src/assemblies/inbox/InboxDetailsUser.vue b/src/assemblies/inbox/InboxDetailsUser.vue index 50acac0c..d4b41c01 100644 --- a/src/assemblies/inbox/InboxDetailsUser.vue +++ b/src/assemblies/inbox/InboxDetailsUser.vue @@ -24,7 +24,6 @@ layout-sidebar-details( v-slot:items ) inbox-details-user-information( - v-if="profile.information" :jid="jid" :header-class="headerClass" :item-class="itemClass" @@ -32,7 +31,6 @@ layout-sidebar-details( ) inbox-details-user-security( - v-if="profile.security" :jid="jid" :room="room" :header-class="headerClass" diff --git a/src/components/inbox/InboxDetailsUserInformation.vue b/src/components/inbox/InboxDetailsUserInformation.vue index ed184bb9..d49e5d7b 100644 --- a/src/components/inbox/InboxDetailsUserInformation.vue +++ b/src/components/inbox/InboxDetailsUserInformation.vue @@ -110,101 +110,107 @@ export default { entries(): Array { const entries: Array = []; - if (this.profile.information) { - if (this.profile.information.contact) { - if (this.profile.information.contact.email) { - entries.push({ - id: "email", - title: this.profile.information.contact.email, - icon: "envelope.fill", - selectable: true - }); - } + if (this.profile.information?.contact.email) { + entries.push({ + id: "email", + title: this.profile.information.contact.email, + icon: "envelope.fill", + selectable: true + }); + } - if (this.profile.information.contact.phone) { - entries.push({ - id: "phone", - title: this.profile.information.contact.phone, - icon: "iphone", - selectable: true - }); - } - } + if (this.profile.information?.contact.phone) { + entries.push({ + id: "phone", + title: this.profile.information.contact.phone, + icon: "iphone", + selectable: true + }); + } - if (this.profile.information.lastActive?.timestamp) { - const activePrefix = - this.availability !== Availability.Unavailable - ? "Active" - : "Last seen"; + if (this.profile.information?.lastActive?.timestamp) { + const activePrefix = + this.availability !== Availability.Unavailable + ? "Active" + : "Last seen"; + + entries.push({ + id: "active", + title: `${activePrefix} ${this.$filters.date.timeAgo( + this.profile.information.lastActive.timestamp, + true + )}`, + icon: "hand.wave.fill" + }); + } + + if (this.profile.information?.location) { + const userTimezone = this.profile.information.location.timezone || null, + userCountry = this.profile.information.location.country || null; + + if (userTimezone !== null) { + const nowDate = new Date(); entries.push({ - id: "active", - title: `${activePrefix} ${this.$filters.date.timeAgo( - this.profile.information.lastActive.timestamp, - true - )}`, - icon: "hand.wave.fill" + id: "timezone", + title: this.$filters.date.localTime(nowDate, userTimezone.offset), + icon: "clock.fill" }); } - if (this.profile.information.location) { - const userTimezone = - this.profile.information.location.timezone || null, - userCountry = this.profile.information.location.country || null; - - if (userTimezone !== null) { - const nowDate = new Date(); + if (userCountry !== null) { + const locationParts = []; - entries.push({ - id: "timezone", - title: this.$filters.date.localTime(nowDate, userTimezone.offset), - icon: "clock.fill" - }); + // Append city? (if any) + if (this.profile.information.location.city) { + locationParts.push(this.profile.information.location.city); } - if (userCountry !== null) { - const locationParts = []; - - // Append city? (if any) - if (this.profile.information.location.city) { - locationParts.push(this.profile.information.location.city); - } - - // Append country? (convert code to country name for display, eg. \ - // 'FR'/'fr' becomes 'France') - const userCountryName = getCountryName(userCountry) || null; - - locationParts.push(userCountryName || userCountry); - - // Acquire user country code (if country name found, then we \ - // already got a country code, otherwise we need to look it up \ - // from raw country name) - let userCountryCode = userCountryName !== null ? userCountry : null; - - if (userCountryCode === null) { - // Attempt to acquire country code from raw country name (will \ - // possibly return nothing, eg. 'Germany' will become 'DE') - userCountryCode = getCountryCode(userCountry) || null; - } - - entries.push({ - id: "location", - title: locationParts.join(", "), - icon: "location.fill", - flag: userCountryCode || undefined - }); + // Append country? (convert code to country name for display, eg. \ + // 'FR'/'fr' becomes 'France') + const userCountryName = getCountryName(userCountry) || null; + + locationParts.push(userCountryName || userCountry); + + // Acquire user country code (if country name found, then we \ + // already got a country code, otherwise we need to look it up \ + // from raw country name) + let userCountryCode = userCountryName !== null ? userCountry : null; + + if (userCountryCode === null) { + // Attempt to acquire country code from raw country name (will \ + // possibly return nothing, eg. 'Germany' will become 'DE') + userCountryCode = getCountryCode(userCountry) || null; } - } - if (this.statusActivity.status) { entries.push({ - id: "activity", - title: this.statusActivity.status.text || "Current status", - emoji: this.statusActivity.status.icon + id: "location", + title: locationParts.join(", "), + icon: "location.fill", + flag: userCountryCode || undefined }); } } + if (this.statusActivity.status) { + entries.push({ + id: "activity", + title: this.statusActivity.status.text || "Current status", + emoji: this.statusActivity.status.icon + }); + } + + // Fallback on JID for user? (if no entries has been set) + // Notice: this is to avoid the 'empty information' UI issue. + if (entries.length === 0) { + entries.push({ + id: "jid", + title: this.jid.toString(), + icon: "message", + selectable: true + }); + } + return entries; }, diff --git a/src/components/inbox/InboxDetailsUserSecurity.vue b/src/components/inbox/InboxDetailsUserSecurity.vue index 97fbefc6..af93f8ac 100644 --- a/src/components/inbox/InboxDetailsUserSecurity.vue +++ b/src/components/inbox/InboxDetailsUserSecurity.vue @@ -158,47 +158,48 @@ export default { icon: "xmark.seal.fill" }); } + } - if ( - !this.profile.security.encryption || - !this.profile.security.encryption.connectionProtocol - ) { - // No connection available (might be insecure?) - entries.push({ - id: "encryption", - kind: "unknown", - title: "Unknown security", - icon: "exclamationmark.lock.fill", - important: true - }); - } else if (!this.profile.security.encryption.secureProtocol) { - // No encryption whatsoever (insecure!) - entries.push({ - id: "encryption", - kind: "insecure", - title: "Insecure channel", - icon: "lock.slash.fill", - critical: true - }); - } else if (!this.profile.security.encryption.messageEndToEndMethod) { - // Okay-level of encryption (C2S) - entries.push({ - id: "encryption", - kind: "safe", - title: "Partially encrypted", - icon: "lock.fill" - }); - } else { - // Best level of encryption (C2S + E2E) - entries.push({ - id: "encryption", - kind: "secure", - title: - `Encrypted ` + - `(${this.profile.security.encryption.messageEndToEndMethod})`, - icon: "lock.fill" - }); - } + if ( + !this.profile.security || + !this.profile.security.encryption || + !this.profile.security.encryption.connectionProtocol + ) { + // No connection available (might be insecure?) + entries.push({ + id: "encryption", + kind: "unknown", + title: "Unknown security", + icon: "exclamationmark.lock.fill", + important: true + }); + } else if (!this.profile.security.encryption.secureProtocol) { + // No encryption whatsoever (insecure!) + entries.push({ + id: "encryption", + kind: "insecure", + title: "Insecure channel", + icon: "lock.slash.fill", + critical: true + }); + } else if (!this.profile.security.encryption.messageEndToEndMethod) { + // Okay-level of encryption (C2S) + entries.push({ + id: "encryption", + kind: "safe", + title: "Partially encrypted", + icon: "lock.fill" + }); + } else { + // Best level of encryption (C2S + E2E) + entries.push({ + id: "encryption", + kind: "secure", + title: + `Encrypted ` + + `(${this.profile.security.encryption.messageEndToEndMethod})`, + icon: "lock.fill" + }); } return entries;