From 6dcfa3b120b416520fdf590b31701c54c5827cf0 Mon Sep 17 00:00:00 2001
From: Marcin Czachurski <mczachurski@icloud.com>
Date: Mon, 16 Sep 2024 13:10:58 +0200
Subject: [PATCH] Add verified information on user's lists

---
 .../follow-buttons-section.component.ts       |  2 +-
 .../users-card/users-card.component.html      | 14 +++++++++--
 .../users-card/users-card.component.scss      |  8 +++++++
 src/app/models/user.ts                        |  1 +
 .../services/common/user-display.service.ts   | 14 +++++++++++
 src/styles/app-theme.scss                     | 24 +++++++++++++++++++
 6 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts b/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts
index d09d66f..8bb9f01 100644
--- a/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts
+++ b/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts
@@ -58,7 +58,7 @@ export class FollowButtonsSectionComponent implements OnInit {
 
     onOriginalProfile(): void {
         if (this.user?.activityPubProfile) {
-            this.windowService.openPage(this.user.activityPubProfile);
+            this.windowService.openPage(this.user.url ?? this.user.activityPubProfile);
         }
     }
 
diff --git a/src/app/components/widgets/users-card/users-card.component.html b/src/app/components/widgets/users-card/users-card.component.html
index 9b68cab..c23306e 100644
--- a/src/app/components/widgets/users-card/users-card.component.html
+++ b/src/app/components/widgets/users-card/users-card.component.html
@@ -5,8 +5,18 @@
         </div>
 
         <div class="overflow-ellipsis width-100">
-            <div class="overflow-ellipsis"><a [routerLink]="[ '/@' + user.userName ]" class="margin-right-5 fw-600">{{ userDisplayService.displayName(user) }}</a></div>
-            <div class="fw-400 fs-90 text-muted overflow-ellipsis">&#64;{{ user.userName }}</div>
+            <div class="overflow-ellipsis">
+                <a [routerLink]="[ '/@' + user.userName ]" class="margin-right-5 fw-600">{{ userDisplayService.displayName(user) }}</a>
+            </div>
+            <div class="fw-400 fs-90 text-muted overflow-ellipsis">
+                <div>&#64;{{ user.userName }}</div>
+                @if (userDisplayService.verifiedUrl(user)) {
+                    <div class="verification-badge text-success">
+                        <mat-icon [inline]="true" class="fill-symbol verification-icon">check</mat-icon>
+                        <span [innerHTML]="userDisplayService.verifiedUrl(user)" class="green-link"></span>
+                    </div>
+                }
+            </div>
 
             <div *ngIf="showBio" class="bio" [innerHTML]="user.bioHtml"></div>
             <div class="fw-300 fs-90 flex-row flex-wrap">
diff --git a/src/app/components/widgets/users-card/users-card.component.scss b/src/app/components/widgets/users-card/users-card.component.scss
index 653ce89..a662346 100644
--- a/src/app/components/widgets/users-card/users-card.component.scss
+++ b/src/app/components/widgets/users-card/users-card.component.scss
@@ -13,6 +13,14 @@
         align-items: center;
     }
 
+    .verification-badge {
+
+        .verification-icon {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
     .user-statuses-tag {
         display: none;
     }
diff --git a/src/app/models/user.ts b/src/app/models/user.ts
index 60877b5..9b4f78e 100644
--- a/src/app/models/user.ts
+++ b/src/app/models/user.ts
@@ -3,6 +3,7 @@ import { Role } from "./role";
 
 export class User {
     public id?: string;
+    public url?: string;
     public isLocal?: boolean;
     public isBlocked?: boolean;
     public isApproved?: boolean;
diff --git a/src/app/services/common/user-display.service.ts b/src/app/services/common/user-display.service.ts
index 0da472d..87f608a 100644
--- a/src/app/services/common/user-display.service.ts
+++ b/src/app/services/common/user-display.service.ts
@@ -21,4 +21,18 @@ export class UserDisplayService {
 
         return '';
     }
+
+    verifiedUrl(user: User | undefined): string | undefined {
+        if(!user || !user.fields || user.fields.length === 0) {
+            return undefined;
+        }
+
+        for(const field of user.fields) {
+            if (field.isVerified) {
+                return field.valueHtml;
+            }
+        }
+
+        return undefined;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/app-theme.scss b/src/styles/app-theme.scss
index e3b5d8e..edbf01a 100644
--- a/src/styles/app-theme.scss
+++ b/src/styles/app-theme.scss
@@ -33,6 +33,30 @@
         }
     }
 
+    .green-link {
+        a {
+            &:link {
+                color: mat.m2-get-color-from-palette($green, 800);
+                text-decoration: none;
+            }
+
+            &:visited {
+                color: mat.m2-get-color-from-palette($green, 800);
+                text-decoration: none;
+            }
+
+            &:hover {
+                color: mat.m2-get-color-from-palette($green, 800);
+                text-decoration: none;
+            }
+
+            &:active {
+                color: mat.m2-get-color-from-palette($green, 800);
+                text-decoration: none;
+            }
+        }
+    }
+
     .text-error {
         color: mat.m2-get-color-from-palette($error);
     }