index.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>User Control Panel</title>
  5. <link rel="stylesheet" media="screen" type="text/css" href="/libs/colorpicker/css/colorpicker.css" />
  6. <link rel="stylesheet" type="text/css" href="/css/user/control-panel.css" />
  7. <script src="/libs/colorpicker/js/colorpicker.js"></script>
  8. <script src="/libs/md5.js"></script>
  9. <script src="/js/user/index.js" defer></script>
  10. </head>
  11. <body>
  12. <div layout:fragment="content" class="ui container" id="app">
  13. <br />
  14. <div>
  15. <!-- Username / Title -->
  16. <h1 class="ui header">
  17. <i v-if="user.administrator" class="shield alternate icon tooltip red" data-content="Administrator"></i>
  18. <i v-if="user.moderator" class="shield alternate icon tooltip green" data-content="Moderator"></i>
  19. <div class="content">
  20. {{ user.username }}
  21. <span style="font-size: 0.7em; color: #777;" v-if="user.name"> ( {{ user.name }} ) </span>
  22. </div>
  23. </h1>
  24. <!-- END Username / Title -->
  25. <!-- Summary -->
  26. <div class="ui message">
  27. <div class="ui stackable four column grid">
  28. <div class="row">
  29. <div class="column">
  30. <div class="ui yellow mini horizontal statistic">
  31. <div class="value">
  32. {{ registerDuration }}
  33. </div>
  34. <div class="label">
  35. Days Registered
  36. </div>
  37. </div>
  38. </div>
  39. <div class="column">
  40. <div class="ui yellow mini horizontal statistic">
  41. <div class="value">
  42. {{ pageStats.pageCount }}
  43. </div>
  44. <div class="label">
  45. Store Pages
  46. </div>
  47. </div>
  48. </div>
  49. <div class="column">
  50. <div class="ui yellow mini horizontal statistic">
  51. <div class="value">
  52. {{ pageStats.reviewCount }}
  53. </div>
  54. <div class="label">
  55. Reviews Received
  56. </div>
  57. </div>
  58. </div>
  59. <div class="column">
  60. <div class="ui yellow mini horizontal statistic">
  61. <div class="value">
  62. {{ pageStats.averateRating.toFixed(2) }}
  63. </div>
  64. <div class="label">
  65. Average Rating
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <!-- END Summary -->
  73. <!-- Badges -->
  74. <h2 class="ui dividing header"><a id="badges">Badges</a></h2>
  75. <p>
  76. <span v-if="user.badges != null && user.badges.length > 0" class="ui black label tooltip" data-variation="inverted" v-for="badge in user.badges" :data-content="badge.description"><i :class="badge.icon"></i>{{ badge.name }}</span>
  77. <span v-if="user.badges == null || user.badges.length == 0">None</span>
  78. </p>
  79. <!-- END badges -->
  80. <!-- Account -->
  81. <h2 class="ui dividing header"><a id="account">Account</a></h2>
  82. <div class="ui icon message" v-if="validation">
  83. <i class="exclamation circle icon"></i>
  84. <span v-if="validation.validationType === 'Email'">Your request to change your email address requires validation.</span>
  85. <span v-if="validation.validationType === 'Password'">Your request to change your password requires validation.</span>
  86. <span v-if="validation.validationType === 'Account'">Your account requires validation.</span>
  87. </div>
  88. <table class="ui compact very basic table">
  89. <tbody>
  90. <tr v-if="validation">
  91. <td class="collapsing">Validation Code</td>
  92. <td>
  93. <div class="ui input">
  94. <input id="validationCode" type="text" />
  95. </div>
  96. </td>
  97. <td>
  98. <div class="ui icon buttons">
  99. <button @click="validateCode()" class="ui black button tooltip" data-content="Validate Code">
  100. <i class="check icon"></i>
  101. </button>
  102. <button @click="resendValidation()" class="ui black button tooltip" data-content="Re-Send Email">
  103. <i class="sync icon"></i>
  104. </button>
  105. <button @click="cancelValidationRequest()" v-if="validation != null && validation.validationType != 'Account'" class="ui black button tooltip" data-content="Cancel Validation Request">
  106. Cancel
  107. </button>
  108. </div>
  109. </td>
  110. </tr>
  111. <tr>
  112. <td class="collapsing">Name</td>
  113. <td class="collapsing">
  114. <div id="nameInputDiv" class="ui input">
  115. <input id="nameInput" type="text" :value="user.name" @keyup="nameKeyUp()" autocomplete="new-password" />
  116. </div>
  117. </td>
  118. <td>
  119. <button v-on:click="updateName()" id="updateNameButton" class="tiny black ui button" disabled>
  120. <i class="pencil alternate icon"></i>Change
  121. </button>
  122. </td>
  123. <td></td>
  124. </tr>
  125. <tr>
  126. <td class="collapsing">Username</td>
  127. <td class="collapsing">
  128. <div id="usernameInputDiv" class="ui input">
  129. <input class="tooltip" id="usernameInput" type="text" :value="user.username" :data-content="'People can mention you as @' + user.username" @keyup="usernameKeyUp()" />
  130. </div>
  131. </td>
  132. <td>
  133. <button v-on:click="updateUsername()" id="updateUsernameButton" class="tiny black ui button" disabled>
  134. <i class="pencil alternate icon"></i>Change
  135. </button>
  136. </td>
  137. <td></td>
  138. </tr>
  139. <tr>
  140. <td class="collapsing">Email</td>
  141. <td v-if="user_email.length == 0">
  142. <button @click="requestUserEmail(user.id)" class="ui tiny black button"><i class="envelope outline icon"></i>Show</button>
  143. </td>
  144. <td v-if="user_email.length > 0" class="collapsing">
  145. <div class="ui input">
  146. <input id="emailInput" type="email" :value="user_email" @keyup="emailKeyUp()" />
  147. </div>
  148. </td>
  149. <td>
  150. <button v-on:click="changeDetails('email')" id="changeEmailButton" data-content="We'll send you an email to confirm this change." class="tiny orange ui button tooltip" disabled>
  151. <i class="envelope outline icon"></i>Send Request
  152. </button>
  153. </td>
  154. <td></td>
  155. </tr>
  156. <tr>
  157. <td class="collapsing">Password</td>
  158. <td>
  159. <div class="ui input">
  160. <input id="passwordInput1" type="password" value="" placeholder="password" autocomplete="new-password" @keyup="passwordKeyUp1()" />
  161. </div>
  162. </td>
  163. <td class="collapsing">
  164. <div class="ui input">
  165. <input id="passwordInput2" type="password" disabled value="" placeholder="confirm password" @keyup="passwordKeyUp2()" autocomplete="new-password" />
  166. </div>
  167. </td>
  168. <td>
  169. <button v-on:click="changeDetails('password')" id="changePasswordButton" data-content="We'll send you an email to confirm this change." class="tiny orange ui button tooltip" disabled>
  170. <i class="key icon"></i>Send Request
  171. </button>
  172. </td>
  173. </tr>
  174. </tbody>
  175. </table>
  176. <!-- END Account -->
  177. <!-- Avatar -->
  178. <h2 class="ui dividing header"><a id="avatar">Avatar</a></h2>
  179. <img v-if="user.avatarId" id="avatar-preview" class="ui middle aligned circular tiny image" :src="'/image/' + user.avatarId" style="margin-right: 20px;" />
  180. <div class="ui small buttons">
  181. <button v-on:click="systemAssignedAvatar()" id="systemManagedAvatarButton" class="ui button black">System Managed</button>
  182. <div class="or"></div>
  183. <button v-on:click="gravatarAvatar()" id="gravatarAvatarButton" class="ui button black">Gravatar</button>
  184. <div class="or"></div>
  185. <button v-on:click="customAvatar()" id="customImageAvatarButton" class="ui button black">Custom Image</button>
  186. </div>
  187. <!-- END Avatar -->
  188. <!-- Avatar Modals -->
  189. <div th:replace="fragments/modals/system-assigned-avatar :: systemAssignedAvatar"></div>
  190. <div th:replace="fragments/modals/gravatar-avatar :: gravatarAvatar"></div>
  191. <div th:replace="fragments/modals/custom-avatar :: customAvatar"></div>
  192. <!-- END Avatar Modals -->
  193. </div>
  194. <br /><br />
  195. </div>
  196. </body>
  197. </html>