profile.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
  5. <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
  6. <title><?=$page->title?></title>
  7. <link rel='shortcut icon' href='<?=$page->favicon?>'/>
  8. <!-- CSS files -->
  9. <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
  10. <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>profile.css'/>
  11. <!-- Meta tags -->
  12. <link rel='canonical' href='<?=$page->canonical?>'/>
  13. <link rel='author' href='<?=$page->author?>'/>
  14. <link rel='publisher' href='<?=$page->author?>'/>
  15. <meta name='description' content='<?=$page->description?>'/>
  16. <meta property='og:title' content='<?=$page->title?>'/>
  17. <meta property='og:url' content='<?=$page->canonical?>'/>
  18. <meta property='og:description' content='<?=$page->description?>'/>
  19. <meta property='og:image' content='<?=$page->icon?>'/>
  20. <meta property='og:site_name' content='<?=$page->name?>'/>
  21. <meta property='og:type' content='website'/>
  22. <meta property='og:locale' content='en'/>
  23. <meta name='twitter:card' content='summary'/>
  24. <meta name='twitter:title' content='<?=$page->title?>'/>
  25. <meta name='twitter:description' content='<?=$page->description?>'/>
  26. <meta name='twitter:image' content='<?=$page->icon?>'/>
  27. <meta name='twitter:url' content='<?=$page->canonical?>'/>
  28. <meta name='robots' content='index follow'/>
  29. <script>
  30. /**
  31. * Redirects to the logout action.
  32. */
  33. function logout(){
  34. window.location = '/action/logout/';
  35. }
  36. /**
  37. * Shows an error window.
  38. *
  39. * @param msg Error message
  40. */
  41. function showError(msg){
  42. document.getElementById('error_window').style.display = 'block';
  43. document.getElementById('error_msg').innerHTML = msg;
  44. }
  45. /**
  46. * Closes the error window.
  47. */
  48. function closeError(){
  49. document.getElementById('error_window').style.display = 'none';
  50. document.getElementById('error_msg').innerHTML = ' ';
  51. }
  52. /**
  53. * Shows the mail change form.
  54. */
  55. function changeMail(){
  56. document.getElementById('static_mail').style.display = 'none';
  57. document.getElementById('change_mail').style.display = 'none';
  58. document.getElementById('edit_mail').style.display = 'block';
  59. document.getElementById('save_mail').style.display = 'block';
  60. }
  61. /**
  62. * Saves an email change.
  63. *
  64. * Validates the new email format and makes an AJAX request. If
  65. * succesfull, hides the email change form.
  66. */
  67. function saveMail(){
  68. var http = new XMLHttpRequest();
  69. var mail = document.getElementById('edit_mail').value;
  70. if (mail.length < 1){
  71. showError('Please enter a new email.');
  72. return;
  73. }
  74. if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail) == false){
  75. showError('Invalid email');
  76. return;
  77. }
  78. http.open('POST', '/action/edit_profile', true);
  79. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  80. http.onreadystatechange = function(){
  81. if (this.readyState == 4){
  82. if (this.status == 200 || this.status == 204){
  83. document.getElementById('static_mail').innerHTML = mail;
  84. document.getElementById('static_mail').style.display = 'block';
  85. document.getElementById('change_mail').style.display = 'block';
  86. document.getElementById('edit_mail').style.display = 'none';
  87. document.getElementById('save_mail').style.display = 'none';
  88. }
  89. else{
  90. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  91. }
  92. }
  93. }
  94. http.send('uid=<?=$UID?>&mail=' + mail);
  95. }
  96. /**
  97. * Shows the password change form.
  98. */
  99. function changePass(){
  100. document.getElementById('static_pass').style.display = 'none';
  101. document.getElementById('change_pass').style.display = 'none';
  102. document.getElementById('edit_pass_current').value = '';
  103. document.getElementById('edit_pass_current').value = '';
  104. document.getElementById('edit_pass_new').value = '';
  105. document.getElementById('edit_pass_repeat').style.display = 'block';
  106. document.getElementById('edit_pass_new').style.display = 'block';
  107. document.getElementById('edit_pass_repeat').style.display = 'block';
  108. document.getElementById('save_pass').style.display = 'block';
  109. }
  110. /**
  111. * Saves a password change.
  112. *
  113. * Validates the new password and makes an AJAX request. If
  114. * succesfull, hides the password change form.
  115. */
  116. function savePass(){
  117. var http = new XMLHttpRequest();
  118. var pass = document.getElementById('edit_pass_new').value;
  119. var currentPass = document.getElementById('edit_pass_current').value;
  120. var repeatPass = document.getElementById('edit_pass_repeat').value;
  121. if (pass.length < 1){
  122. showError('Please enter a new password.');
  123. return;
  124. }
  125. if (mail.length < 6){
  126. showError('Minimum password length is 6 characters.');
  127. return;
  128. }
  129. if (currentPass.length < 1){
  130. showError('Please enter your current password.');
  131. return;
  132. }
  133. if (pass != repeatPass){
  134. showError('Entered passwords do not match.');
  135. return;
  136. }
  137. http.open('POST', '/action/edit_profile', true);
  138. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  139. http.onreadystatechange = function(){
  140. if (this.readyState == 4){
  141. if (this.status == 200 || this.status == 204){
  142. document.getElementById('static_pass').style.display = 'block';
  143. document.getElementById('change_pass').style.display = 'block';
  144. document.getElementById('edit_pass_current').style.display = 'none';
  145. document.getElementById('edit_pass_new').style.display = 'none';
  146. document.getElementById('edit_pass_repeat').style.display = 'none';
  147. document.getElementById('save_pass').style.display = 'none';
  148. }
  149. else{
  150. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  151. }
  152. }
  153. }
  154. http.send('uid=<?=$UID?>&pass=' + pass + '&currentPass=' + currentPass);
  155. }
  156. /**
  157. * Generates a new random API key.
  158. *
  159. * Makes a request. On success, updates the API in the UI.
  160. */
  161. function regenerateApi(){
  162. var http = new XMLHttpRequest();
  163. http.open('POST', '/action/edit_profile', true);
  164. http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  165. http.onreadystatechange = function(){
  166. if (this.readyState == 4){
  167. if (this.status == 200 || this.status == 204){
  168. document.getElementById('api_key').innerHTML = this.responseText;
  169. }
  170. else{
  171. showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
  172. }
  173. }
  174. }
  175. http.send('uid=<?=$UID?>&api=1');
  176. }
  177. </script>
  178. </head>
  179. <body>
  180. <?php
  181. include __DIR__ . "/inc/header.php";
  182. ?>
  183. <section id='monster' class='content'>
  184. <h2>
  185. <span>
  186. <?=$page->name?>
  187. </span>
  188. </h2>
  189. <article>
  190. <table id='profile'>
  191. <tr>
  192. <td class='title'>
  193. Username:
  194. </td>
  195. <td class='value'>
  196. <span>
  197. <?=$page->name?>
  198. </span>
  199. </td>
  200. <td class='action'>
  201. <input onclick='logout();' type='button' value='Logout'/>
  202. </td>
  203. </tr>
  204. <tr>
  205. <td class='title'>
  206. eMail:
  207. </td>
  208. <td class='value'>
  209. <span id='static_mail'>
  210. <?=$page->mail?>
  211. </span>
  212. <input id='edit_mail' type='text' value='<?=$page->mail?>'/>
  213. </td>
  214. <td class='action'>
  215. <input id='change_mail' onclick='changeMail();' type='button' value='Change'/>
  216. <input id='save_mail' onclick='saveMail();' type='button' value='Save'/>
  217. </td>
  218. </tr>
  219. <tr>
  220. <td class='title'>
  221. API key:
  222. </td>
  223. <td class='value'>
  224. <span id='api_key'>
  225. <?=$page->api_key?>
  226. </span>
  227. </td>
  228. <td class='action'>
  229. <input id='regenerate_api' onclick='regenerateApi();' type='button' value='Regenerate'/>
  230. </td>
  231. </tr>
  232. <tr>
  233. <td class='title'>
  234. Password:
  235. </td>
  236. <td class='value'>
  237. <span id='static_pass'>
  238. ********
  239. </span>
  240. <input id='edit_pass_current' type='password' placeholder='Currrent password'/>
  241. <input id='edit_pass_new' type='password' placeholder='New password'/>
  242. <input id='edit_pass_repeat' type='password' placeholder='Repeat password'/>
  243. </td>
  244. <td class='action'>
  245. <input id='change_pass' onclick='changePass();' type='button' value='Change'/>
  246. <input id='save_pass' onclick='savePass();' type='button' value='Save'/>
  247. </td>
  248. </tr>
  249. </table>
  250. </article>
  251. </section> <!-- runes -->
  252. <div id='error_window'>
  253. <section class='content'>
  254. <h2>
  255. <span>
  256. Error
  257. </span>
  258. </h2>
  259. <article>
  260. <p id='error_msg'>
  261. </p>
  262. <input type='button' value='Close' onclick='closeError();'/>
  263. </article>
  264. </section>
  265. </div>
  266. <?php
  267. include __DIR__ . "/inc/footer.php";
  268. ?>
  269. </body>
  270. </html>