<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <div id="user" class="container profile" style="display: none;"> <div class="row"> <div class="col text-center mt-3"> <img alt="picture" v-bind:src="user.picture" class="img-lg rounded-circle border shadow" /> <h2 class="mt-3">{{ user.name }}</h2> </div> </div> <div class="row mt-2"> <div class="col"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> <li class="nav-item"> <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a> </li> <li class="nav-item"> <a class="nav-link" id="links-tab" data-toggle="tab" href="#links" role="tab" aria-controls="links" aria-selected="false">Links</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <table class="table table-hover table-sm table-properties"> <tr v-show="user.sub"> <th>sub</th> <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem;">{{user.sub}}</td> </tr> <tr v-show="user.password"> <th>password</th> <td>{{user.password}}</td> </tr> <tr v-show="user.uid"> <th>uid</th> <td>{{user.uid}}</td> </tr> <tr v-show="user.nickname"> <th>nickname</th> <td>{{user.nickname}}</td> </tr> <tr v-show="user.preferred_username"> <th>preferred username</th> <td>{{user.preferred_username}}</td> </tr> <tr v-show="user.gender"> <th>gender</th> <td>{{user.gender}}</td> </tr> <tr v-show="user.birthdate"> <th>birthdate</th> <td>{{user.birthdate}}</td> </tr> <tr v-show="user.locale"> <th>locale</th> <td>{{user.locale}}</td> </tr> <tr v-show="user.zoneinfo"> <th>zoneinfo</th> <td>{{user.zoneinfo}}</td> </tr> <tr v-show="user.given_name"> <th>given name</th> <td>{{user.given_name}}</td> </tr> <tr v-show="user.middle_name"> <th>middle name</th> <td>{{user.middle_name}}</td> </tr> <tr v-show="user.family_name"> <th>family name</th> <td>{{user.family_name}}</td> </tr> </table> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <table class="table table-hover table-sm table-properties"> <tr v-show="user.email"> <th>email</th> <td>{{user.email}}</td> </tr> <tr v-show="user.email_verified"> <th>email verified</th> <td>{{user.email_verified}}</td> </tr> <tr v-show="user.phone_number"> <th>phone number</th> <td>{{user.phone_number}}</td> </tr> <tr v-show="user.phone_number_verified"> <th>phone number verified</th> <td>{{user.phone_number_verified}}</td> </tr> </table> </div> <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab"> <table class="table table-hover table-sm table-properties"> <tr v-show="user.address.country"> <th>country</th> <td>{{user.address.country}}</td> </tr> <tr v-show="user.address.postal_code"> <th>postal code</th> <td>{{user.address.postal_code}}</td> </tr> <tr v-show="user.address.locality"> <th>locality</th> <td>{{user.address.locality}}</td> </tr> <tr v-show="user.address.region"> <th>region</th> <td>{{user.address.region}}</td> </tr> <tr v-show="user.address.street_address"> <th>street address</th> <td>{{user.address.street_address}}</td> </tr> <tr v-show="user.address.formatted"> <th>formatted</th> <td>{{user.address.formatted}}</td> </tr> </table> </div> <div class="tab-pane fade" id="links" role="tabpanel" aria-labelledby="links-tab"> <table class="table table-hover table-sm table-properties"> <tr v-show="user['@id']"> <th>@id</th> <td><a v-bind:href="user['@id']">{{user["@id"]}}</a></td> </tr> <tr v-show="user.me"> <th>me</th> <td><a v-bind:href="user.me">{{user.me}}</a></td> </tr> <tr v-show="user.website"> <th>website</th> <td><a v-bind:href="user.website">{{user.website}}</a></td> </tr> <tr v-show="user.profile"> <th>profile</th> <td><a v-bind:href="user.profile">{{user.profile}}</a></td> </tr> <tr v-show="user.webmail"> <th>webmail</th> <td><a v-bind:href="user.webmail">{{user.webmail}}</a></td> </tr> </table> </div> </div> </div> </div> </div>

.profile .table-properties th { font-weight: normal; width: 15rem; } .profile .table-properties td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile .table-properties tr:first-child td, .profile .table-properties tr:first-child th { border-top: none !important; } .profile .img-lg { width: 9rem; height: 9rem; }

$.ajax({ url: "https://phantauth.net/user/", dataType: "json", success: function(user) { new Vue({ el: "#user", data: { user: user } }); $("#user").show(); } });