Add verified information on user's lists

VernissageApp · Sep 16, 2024 · 6dcfa3b · 6dcfa3b
1 parent 03c3106
commit 6dcfa3b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+    }
 }
diff --git 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);
     }