AuthorizedClients.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <style scoped>
  2. .action-link {
  3. cursor: pointer;
  4. }
  5. </style>
  6. <template>
  7. <div>
  8. <div v-if="tokens.length > 0">
  9. <div class="card card-default mb-4">
  10. <div class="card-header font-weight-bold bg-white">Authorized Applications</div>
  11. <div class="card-body">
  12. <!-- Authorized Tokens -->
  13. <table class="table table-borderless mb-0">
  14. <thead>
  15. <tr>
  16. <th>Name</th>
  17. <th>Scopes</th>
  18. <th></th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr v-for="token in tokens">
  23. <!-- Client Name -->
  24. <td style="vertical-align: middle;">
  25. {{ token.client.name }}
  26. </td>
  27. <!-- Scopes -->
  28. <td style="vertical-align: middle;">
  29. <span v-if="token.scopes.length > 0">
  30. {{ token.scopes.join(', ') }}
  31. </span>
  32. </td>
  33. <!-- Revoke Button -->
  34. <td style="vertical-align: middle;">
  35. <a class="action-link text-danger" @click="revoke(token)">
  36. Revoke
  37. </a>
  38. </td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. export default {
  49. /*
  50. * The component's data.
  51. */
  52. data() {
  53. return {
  54. tokens: []
  55. };
  56. },
  57. /**
  58. * Prepare the component (Vue 1.x).
  59. */
  60. ready() {
  61. this.prepareComponent();
  62. },
  63. /**
  64. * Prepare the component (Vue 2.x).
  65. */
  66. mounted() {
  67. this.prepareComponent();
  68. },
  69. methods: {
  70. /**
  71. * Prepare the component (Vue 2.x).
  72. */
  73. prepareComponent() {
  74. this.getTokens();
  75. },
  76. /**
  77. * Get all of the authorized tokens for the user.
  78. */
  79. getTokens() {
  80. axios.get('/oauth/tokens')
  81. .then(response => {
  82. this.tokens = response.data;
  83. });
  84. },
  85. /**
  86. * Revoke the given token.
  87. */
  88. revoke(token) {
  89. axios.delete('/oauth/tokens/' + token.id)
  90. .then(response => {
  91. this.getTokens();
  92. });
  93. }
  94. }
  95. }
  96. </script>