profile.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <?php
  2. /**
  3. * User profile view.
  4. *
  5. * Contains the view layout and ome code to present the data.
  6. *
  7. * @category View
  8. * @var Profile_Page $page The page model.
  9. * @var User $USER Currently logged-in user.
  10. * @var int get_context()->get_game_mode() Game mode.
  11. */
  12. ?>
  13. <!DOCTYPE html>
  14. <html lang='en'>
  15. <head>
  16. <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
  17. <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
  18. <title><?=$page->title?></title>
  19. <link rel='shortcut icon' href='<?=$page->favicon?>'/>
  20. <!-- CSS files -->
  21. <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui.css'/>
  22. <?php
  23. if (get_context()->get_game_mode() == GAME_MODE_ID::RTA){
  24. ?>
  25. <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui-rta.css'/>
  26. <?php
  27. }
  28. ?>
  29. <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>profile.css'/>
  30. <!-- Meta tags -->
  31. <link rel='canonical' href='<?=$page->canonical?>'/>
  32. <link rel='author' href='<?=$page->author?>'/>
  33. <link rel='publisher' href='<?=$page->author?>'/>
  34. <meta name='description' content='<?=$page->description?>'/>
  35. <meta property='og:title' content='<?=$page->title?>'/>
  36. <meta property='og:url' content='<?=$page->canonical?>'/>
  37. <meta property='og:description' content='<?=$page->description?>'/>
  38. <meta property='og:image' content='<?=$page->icon?>'/>
  39. <meta property='og:site_name' content='<?=$page->name?>'/>
  40. <meta property='og:type' content='website'/>
  41. <meta property='og:locale' content='en'/>
  42. <meta name='twitter:card' content='summary'/>
  43. <meta name='twitter:title' content='<?=$page->title?>'/>
  44. <meta name='twitter:description' content='<?=$page->description?>'/>
  45. <meta name='twitter:image' content='<?=$page->icon?>'/>
  46. <meta name='twitter:url' content='<?=$page->canonical?>'/>
  47. <meta name='robots' content='index follow'/>
  48. <script>
  49. /**
  50. * Redirects to the logout action.
  51. */
  52. function logout(){
  53. window.location = '/action/logout/';
  54. }
  55. /**
  56. * Shows an error window.
  57. *
  58. * @param msg Error message
  59. */
  60. function showError(msg){
  61. document.getElementById('error_window').style.display = 'block';
  62. document.getElementById('error_msg').innerHTML = msg;
  63. }
  64. /**
  65. * Closes the error window.
  66. */
  67. function closeError(){
  68. document.getElementById('error_window').style.display = 'none';
  69. document.getElementById('error_msg').innerHTML = ' ';
  70. }
  71. /**
  72. * Shows the mail change form.
  73. */
  74. function changeMail(){
  75. document.getElementById('static_mail').style.display = 'none';
  76. document.getElementById('change_mail').style.display = 'none';
  77. document.getElementById('edit_mail').style.display = 'block';
  78. document.getElementById('save_mail').style.display = 'block';
  79. }
  80. /**
  81. * Saves an email change.
  82. *
  83. * Validates the new email format and makes an AJAX request. If
  84. * succesfull, hides the email change form.
  85. */
  86. function saveMail(){
  87. var http = new XMLHttpRequest();
  88. var mail = document.getElementById('edit_mail').value;
  89. if (mail.length < 1){
  90. showError('Please enter a new email.');
  91. return;
  92. }
  93. if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail) == false){
  94. showError('Invalid email');
  95. return;
  96. }
  97. http.open('POST', '/action/edit_profile', true);
  98. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  99. http.onreadystatechange = function(){
  100. if (this.readyState == 4){
  101. if (this.status == 200 || this.status == 204){
  102. document.getElementById('static_mail').innerHTML = mail;
  103. document.getElementById('static_mail').style.display = 'block';
  104. document.getElementById('change_mail').style.display = 'block';
  105. document.getElementById('edit_mail').style.display = 'none';
  106. document.getElementById('save_mail').style.display = 'none';
  107. }
  108. else{
  109. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  110. }
  111. }
  112. }
  113. http.send('user=<?=$USER->id?>&mail=' + mail);
  114. }
  115. /**
  116. * Shows the password change form.
  117. */
  118. function changePass(){
  119. document.getElementById('static_pass').style.display = 'none';
  120. document.getElementById('change_pass').style.display = 'none';
  121. document.getElementById('edit_pass_current').value = '';
  122. document.getElementById('edit_pass_current').value = '';
  123. document.getElementById('edit_pass_new').value = '';
  124. document.getElementById('edit_pass_repeat').style.display = 'block';
  125. document.getElementById('edit_pass_new').style.display = 'block';
  126. document.getElementById('edit_pass_repeat').style.display = 'block';
  127. document.getElementById('save_pass').style.display = 'block';
  128. }
  129. /**
  130. * Saves a password change.
  131. *
  132. * Validates the new password and makes an AJAX request. If
  133. * succesfull, hides the password change form.
  134. */
  135. function savePass(){
  136. var http = new XMLHttpRequest();
  137. var pass = document.getElementById('edit_pass_new').value;
  138. var currentPass = document.getElementById('edit_pass_current').value;
  139. var repeatPass = document.getElementById('edit_pass_repeat').value;
  140. if (pass.length < 1){
  141. showError('Please enter a new password.');
  142. return;
  143. }
  144. if (mail.length < 6){
  145. showError('Minimum password length is 6 characters.');
  146. return;
  147. }
  148. if (currentPass.length < 1){
  149. showError('Please enter your current password.');
  150. return;
  151. }
  152. if (pass != repeatPass){
  153. showError('Entered passwords do not match.');
  154. return;
  155. }
  156. http.open('POST', '/action/edit_profile', true);
  157. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  158. http.onreadystatechange = function(){
  159. if (this.readyState == 4){
  160. if (this.status == 200 || this.status == 204){
  161. document.getElementById('static_pass').style.display = 'block';
  162. document.getElementById('change_pass').style.display = 'block';
  163. document.getElementById('edit_pass_current').style.display = 'none';
  164. document.getElementById('edit_pass_new').style.display = 'none';
  165. document.getElementById('edit_pass_repeat').style.display = 'none';
  166. document.getElementById('save_pass').style.display = 'none';
  167. }
  168. else{
  169. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  170. }
  171. }
  172. }
  173. http.send('user=<?=$USER->id?>&pass=' + pass + '&currentPass=' + currentPass);
  174. }
  175. /**
  176. * Generates a new random API key.
  177. *
  178. * Makes a request. On success, updates the API in the UI.
  179. */
  180. function regenerateApi(){
  181. var http = new XMLHttpRequest();
  182. http.open('POST', '/action/edit_profile', true);
  183. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  184. http.onreadystatechange = function(){
  185. if (this.readyState == 4){
  186. if (this.status == 200 || this.status == 204){
  187. document.getElementById('api_key').innerHTML = this.responseText;
  188. }
  189. else{
  190. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  191. }
  192. }
  193. }
  194. http.send('user=<?=$USER->id?>&api=1');
  195. }
  196. </script>
  197. </head>
  198. <body>
  199. <?php
  200. include __DIR__ . "/inc/header.php";
  201. ?>
  202. <aside>
  203. <h2>
  204. <?=$page->name?>
  205. </h2>
  206. <p>
  207. Edit your profile settings
  208. </p>
  209. </aside>
  210. <main>
  211. <section class='content'>
  212. <h2>
  213. <?=$page->name?>
  214. </h2>
  215. <article>
  216. <table id='profile'>
  217. <tr>
  218. <td class='title'>
  219. Username:
  220. </td>
  221. <td class='value'>
  222. <span>
  223. <?=$page->name?>
  224. </span>
  225. </td>
  226. <td class='action'>
  227. <input onclick='logout();' type='button' value='Logout'/>
  228. </td>
  229. </tr>
  230. <tr>
  231. <td class='title'>
  232. eMail:
  233. </td>
  234. <td class='value'>
  235. <span id='static_mail'>
  236. <?=$page->mail?>
  237. </span>
  238. <input id='edit_mail' type='text' value='<?=$page->mail?>'/>
  239. </td>
  240. <td class='action'>
  241. <input id='change_mail' onclick='changeMail();' type='button' value='Change'/>
  242. <input id='save_mail' onclick='saveMail();' type='button' value='Save'/>
  243. </td>
  244. </tr>
  245. <tr>
  246. <td class='title'>
  247. API key:
  248. </td>
  249. <td class='value'>
  250. <span id='api_key'>
  251. <?=$page->api_key?>
  252. </span>
  253. </td>
  254. <td class='action'>
  255. <input id='regenerate_api' onclick='regenerateApi();' type='button' value='Regenerate'/>
  256. </td>
  257. </tr>
  258. <tr>
  259. <td class='title'>
  260. Password:
  261. </td>
  262. <td class='value'>
  263. <span id='static_pass'>
  264. ********
  265. </span>
  266. <input id='edit_pass_current' type='password' placeholder='Currrent password'/>
  267. <input id='edit_pass_new' type='password' placeholder='New password'/>
  268. <input id='edit_pass_repeat' type='password' placeholder='Repeat password'/>
  269. </td>
  270. <td class='action'>
  271. <input id='change_pass' onclick='changePass();' type='button' value='Change'/>
  272. <input id='save_pass' onclick='savePass();' type='button' value='Save'/>
  273. </td>
  274. </tr>
  275. <tr>
  276. <td class='title'>
  277. Visibility:
  278. </td>
  279. <td id='visibility'>
  280. <input type='checkbox' name='visible' onChange='toggleVisibility(this.value);'/>
  281. <label for='filter_defeat'>Public profile</label>
  282. <div class='help_tooltip'>
  283. <p>
  284. When checked, other users can view you game data. This includes:
  285. <span>Units</span>
  286. <span>Teams</span>
  287. <span>Runes, artifacts and enchantments</span>
  288. <span>Your guild name</span>
  289. <span>Records</span>
  290. <span>Building levels</span>
  291. <span>Guild name</span>
  292. This data will never be shown to other users:
  293. <span>Personal data (email, password...)</span>
  294. <span>Run logs</span>
  295. <span>Statistics</span>
  296. <span>Guild member list</span>
  297. <span>Inventory</span>
  298. <span>Building levels</span>
  299. <span>Guild name</span>
  300. </p>
  301. </div>
  302. </td>
  303. </tr>
  304. </table>
  305. </article>
  306. </section>
  307. </main>
  308. <div id='error_window'>
  309. <section class='content'>
  310. <h2>
  311. <span>
  312. Error
  313. </span>
  314. </h2>
  315. <article>
  316. <p id='error_msg'>
  317. </p>
  318. <input type='button' value='Close' onclick='closeError();'/>
  319. </article>
  320. </section>
  321. </div>
  322. <?php
  323. include __DIR__ . "/inc/footer.php";
  324. ?>
  325. </body>
  326. </html>