added fields support in profile

src/app/components/stream/user-profile/user-profile.component.html

@@ -33,10 +33,21 @@
     </div>
     <div class="profile-sub-header ">
         <div *ngIf="account && hasNote" class="profile-description">
+            <!-- <div *ngIf="account && account.note" class="profile-description"> -->
             <app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="account.note"
                 (accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
             </app-databinded-text>
         </div>
+        <div class="profile-fields" *ngIf="account && account.fields.length > 0">
+            <div class="profile-fields__field" *ngFor="let field of account.fields">
+                <div class="profile-fields__field--value" innerHTML="{{field.value}}" [ngClass]="{'profile-fields__field--validated': field.verified_at }">
+                </div>
+                <div class="profile-fields__field--name">
+                    {{ field.name }}
+                </div>
+            </div>
+        </div>
+
         <div class="profile-statuses">
             <app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
 

src/app/components/stream/user-profile/user-profile.component.scss

@@ -1,27 +1,25 @@
 @import "variables";
 @import "mixins";
 @import "commons";
-
+$validated-font-color: #4fde23;
+$validated-background: #164109;
 $header-height: 160px;
-
 .profile {
     // overflow: auto;
     height: calc(100%);
     overflow: auto;
-
     &-header {
         background-size: cover;
         position: relative; // height: 140px;
         overflow: hidden; // background-color: black;
         border-bottom: 1px solid black;
-
         & h2 {
             font-size: $default-font-size;
         }
         &__inner {
             overflow: auto;
             height: $header-height;
-            background-color: rgba(0, 0, 0, .45);            
+            background-color: rgba(0, 0, 0, .45);
         }
         &__avatar {
             position: absolute;
@@ -34,19 +32,19 @@ $header-height: 160px;
             position: absolute;
             top: 105px;
             left: 15px;
-            width: calc(100% - 30px);     
-            overflow: hidden;  
+            width: calc(100% - 30px);
+            overflow: hidden;
             color: white;
         }
         &__fullhandle a {
             position: absolute;
             top: 130px;
             left: 15px;
-            width: calc(100% - 30px);     
-            overflow: hidden;       
+            width: calc(100% - 30px);
+            overflow: hidden;
             color: white;
         }
-        &__follow{
+        &__follow {
             // transition: all .4s;
             position: absolute;
             top: 10px;
@@ -55,15 +53,10 @@ $header-height: 160px;
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             text-rendering: optimizeLegibility;
-
-            &--button{
+            &--button {
                 @include clearButton;
             }
-
-            &--unfollowed {
-
-            }
-
+            &--unfollowed {}
             &--followed {
                 color: #38abff;
                 color: #5fbcff;
@@ -75,38 +68,95 @@ $header-height: 160px;
             top: 50px;
             right: 15px;
             font-size: 12px;
-
-            &--data{               
-               text-align: right;
+            &--data {
+                text-align: right;
             }
         }
-    
     }
-
     &-sub-header {
         // overflow: auto;
         // height: calc(100% - #{$header-height});
-
         // height: calc(100%);
         // height: calc(20% - 190px);
         // height: 150px;
         // border: 1px solid greenyellow;
     }
-
     &-description {
         padding: 10px 10px 15px 10px;
         font-size: 13px;
         border-bottom: 1px solid black;
-
         &__content {
             width: calc(100%);
             word-break: break-word;
         }
     }
-
+    &-fields {
+        font-size: 13px;
+        border-bottom: 1px solid black;
+        &__field {
+            &:not(:last-child) {
+                border-bottom: 1px solid black;
+            }
+            &--name {
+                padding: 10px;
+                border-right: 1px solid black;
+                text-align: center;
+                width: calc(33%);
+                background-color: #0b0d13;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+            &--value {
+                padding: 10px;
+                width: calc(66%);
+                float: right;
+                white-space: nowrap;
+            }
+            &--validated {
+                background-color: $validated-background;
+                // border: 1px solid $validated-font-color;
+            }
+        }
+        @include clearfix;
+    }
     &-no-toots {
         text-align: center;
         margin: 15px;
         border: 2px solid whitesmoke;
     }
+}
+
+//Mastodon styling
+:host ::ng-deep .profile-fields__field--value {
+    // font-size: 14px;
+    color: $status-primary-color;
+    & a,
+    .mention,
+    .ellipsis {
+        color: $status-links-color;
+    }
+    & .invisible {
+        display: none;
+    }
+    & p {
+        margin: 0px; //font-size: .9em;
+        // font-size: 14px;
+    }
+}
+
+:host ::ng-deep .profile-fields__field--validated {
+    // font-size: 14px;
+    color: $validated-font-color;
+    & a,
+    .mention,
+    .ellipsis {
+        color: $validated-font-color;
+    }
+    & .invisible {
+        display: none;
+    }
+    & p {
+        margin: 0px; //font-size: .9em;
+        // font-size: 14px;
+    }
 }

src/app/components/stream/user-profile/user-profile.component.ts

@@ -62,7 +62,6 @@ export class UserProfileComponent implements OnInit {
     ngOnInit() {
         this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
             if (this.account) {
-                //this.relationship = null;
                 this.currentlyUsedAccount = accounts.filter(x => x.isSelected)[0];
 
                 this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
@@ -91,6 +90,9 @@ export class UserProfileComponent implements OnInit {
 
         return this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
             .then((account: Account) => {
+
+                console.warn(account);
+
                 this.isLoading = false;
                 this.statusLoading = true;
 

src/app/services/models/mastodon.interfaces.ts

@@ -1,136 +1,153 @@
 export interface AppData {
-  client_id: string;
-  client_secret: string;
-  id: string;
-  name: string;
-  redirect_uri: string;
-  website: string;
+    client_id: string;
+    client_secret: string;
+    id: string;
+    name: string;
+    redirect_uri: string;
+    website: string;
 }
 
 export interface TokenData {
-  access_token: string;
-  token_type: string;
-  scope: string;
-  created_at: string;
+    access_token: string;
+    token_type: string;
+    scope: string;
+    created_at: string;
 }
 
 export interface Account {
-  id: number;
-  username: string;
-  acct: string;
-  display_name: string;
-  locked: string;
-  created_at: string;
-  followers_count: number;
-  following_count: number;
-  statuses_count: number;
-  note: string;
-  url: string;
-  avatar: string;
-  avatar_static: string;
-  header: string;
-  header_static: string;
+    id: number;
+    username: string;
+    acct: string;
+    display_name: string;
+    locked: string;
+    created_at: string;
+    followers_count: number;
+    following_count: number;
+    statuses_count: number;
+    note: string;
+    url: string;
+    avatar: string;
+    avatar_static: string;
+    header: string;
+    header_static: string;
+    emojis: Emoji[];
+    moved: boolean;
+    fields: Field[];
+    bot: boolean;
+}
+
+export interface Emoji {
+    shortcode: string;
+    static_url: string;
+    url: string;
+    visible_in_picker: boolean;
+}
+
+export interface Field {
+    name: string;
+    value: string;
+    verified_at: string;
 }
 
 export interface Application {
-  name: string;
-  website: string;
+    name: string;
+    website: string;
 }
 
 export interface Attachment {
-  id: string;
-  type: 'image' | 'video' | 'gifv';
-  url: string;
-  remote_url: string;
-  preview_url: string;
-  text_url: string;
+    id: string;
+    type: 'image' | 'video' | 'gifv';
+    url: string;
+    remote_url: string;
+    preview_url: string;
+    text_url: string;
 }
 
 export interface Card {
-  url: string;
-  title: string;
-  description: string;
-  image: string;
+    url: string;
+    title: string;
+    description: string;
+    image: string;
 }
 
 export interface Context {
-  ancestors: Status[];
-  descendants: Status[];
+    ancestors: Status[];
+    descendants: Status[];
 }
 
 export interface Error {
-  error: string;
+    error: string;
 }
 
 export interface Instance {
-  uri: string;
-  title: string;
-  description: string;
-  email: string;
+    uri: string;
+    title: string;
+    description: string;
+    email: string;
 }
 
 export interface Mention {
-  url: string;
-  username: string;
-  acct: string;
-  id: string;
+    url: string;
+    username: string;
+    acct: string;
+    id: string;
 }
 
 export interface Notification {
-  id: string;
-  type: 'mention' | 'reblog' | 'favourite' | 'follow';
-  created_at: string;
-  account: Account;
-  status?: Status;
+    id: string;
+    type: 'mention' | 'reblog' | 'favourite' | 'follow';
+    created_at: string;
+    account: Account;
+    status?: Status;
 }
 
 export interface Relationship {
-  id: number;
-  following: boolean;
-  followed_by: boolean;
-  blocking: boolean;
-  muting: boolean;
-  requested: boolean;
+    id: number;
+    following: boolean;
+    followed_by: boolean;
+    blocking: boolean;
+    muting: boolean;
+    requested: boolean;
 }
 
 export interface Report {
-  id: string;
-  action_taken: boolean;
+    id: string;
+    action_taken: boolean;
 }
 
 export interface Results {
-  accounts: Account[];
-  statuses: Status[];
-  hashtags: string[];
+    accounts: Account[];
+    statuses: Status[];
+    hashtags: string[];
 }
 
 export interface Status {
-  id: string;
-  uri: string;
-  url: string;
-  account: Account;
-  in_reply_to_id: string;
-  in_reply_to_account_id: string;
-  reblog: Status;
-  content: string;
-  created_at: string;
-  reblogs_count: string;
-  favourites_count: string;
-  reblogged: boolean;
-  favourited: boolean;
-  sensitive: boolean;
-  spoiler_text: string;
-  visibility: string;
-  media_attachments: Attachment[];
-  mentions: Mention[];
-  tags: Tag[];
-  application: Application;
-  emojis: any[];
-  language: string;
-  pinned: boolean;
+    id: string;
+    uri: string;
+    url: string;
+    account: Account;
+    in_reply_to_id: string;
+    in_reply_to_account_id: string;
+    reblog: Status;
+    content: string;
+    created_at: string;
+    reblogs_count: string;
+    favourites_count: string;
+    reblogged: boolean;
+    favourited: boolean;
+    sensitive: boolean;
+    spoiler_text: string;
+    visibility: string;
+    media_attachments: Attachment[];
+    mentions: Mention[];
+    tags: Tag[];
+    application: Application;
+    emojis: any[];
+    language: string;
+    pinned: boolean;
 }
 export interface Tag {
-  name: string;
-  url: string;
+    name: string;
+    url: string;
 }