Profile Webhook: Support profile headlines (On PTO)

docs/Webhooks.md

@@ -71,6 +71,7 @@ The expected response from your endpoint should follow this format:
     "Data": {
         "OK": true,
         "Error": "any error messaging (omittable if no errors)",
+        "Headline": "Optional profile headline text",
         "ProfileFields": [
             {
                 "Name": "Age",
@@ -85,3 +86,5 @@ The expected response from your endpoint should follow this format:
     }
 }
 ```
+
+If the Headline field is provided from your site, it will be shown above the profile fields in a banner.

pkg/api.go

@@ -764,6 +764,7 @@ func (s *Server) UserProfile() http.HandlerFunc {
 	type result struct {
 		OK            bool
 		Error         string         `json:",omitempty"`
+		Headline      string         `json:",omitempty"`
 		ProfileFields []profileField `json:",omitempty"`
 	}
 

src/components/ProfileModal.vue

@@ -27,6 +27,7 @@ export default {
             busy: false,
 
             // Profile data
+            headline: "",
             profileFields: [],
 
             // Ban account data
@@ -140,6 +141,8 @@ export default {
                     return;
                 }
 
+                this.headline = data.Headline ? data.Headline : "";
+
                 if (data.ProfileFields != undefined) {
                     this.profileFields = data.ProfileFields;
                 }
@@ -466,8 +469,16 @@ export default {
                         </div>
                     </div>
 
+                    <!-- Headline (optional) -->
+                    <div v-if="headline" class="mt-3 is-size-7 notification is-info is-light py-1 px-2 mb-3" style="display: table; table-layout: fixed; width: 100%">
+                        <div style="display: table-cell; white-space: nowrap; text-overflow: ellipsis; overflow: hidden" :title="headline">
+                            <span>{{headline}}</span>
+                        </div>
+                    </div>
+                    <div v-else class="mt-4"></div>
+
                     <!-- Login At -->
-                    <div class="mt-3 is-size-7">
+                    <div class="is-size-7">
                         <div class="columns is-multiline is-mobile">
                             <div class="column is-half">
                                 <em>Online since: {{ onlineSince }}</em>
@@ -487,7 +498,7 @@ export default {
                     </div>
 
                     <!-- Profile Fields spinner/error -->
-                    <div class="notification is-info is-light p-2 my-2" v-if="busy">
+                    <div class="notification is-success is-light p-2 my-2" v-if="busy">
                         <i class="fa fa-spinner fa-spin mr-2"></i>
                         Loading profile details...
                     </div>