You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

282 lines
9.8 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. {% extends "bootstrap/base.html" %}
  2. {% block title %}Manage your Technical Incompetence account{% endblock %}
  3. {% block styles %}
  4. {{super()}}
  5. <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
  6. {% endblock %}
  7. {% block navbar %}
  8. <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
  9. <div class="navbar-brand">Technical Incompetence Account</div>
  10. <form class="form-inline ml-auto">
  11. {# <div class="custom-control custom-switch">
  12. <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  13. <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
  14. </div>
  15. <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
  16. <a class="btn btn-primary" href="/logout" role="button">Logout</a>
  17. </form>
  18. </nav>
  19. {% endblock %}
  20. {% block content %}
  21. <div class="container" style="margin-top: 15px">
  22. <div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
  23. This is a success alert—check it out!
  24. </div>
  25. <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
  26. This is a danger alert—check it out!
  27. </div>
  28. <form>
  29. <div class="row">
  30. <div class="col-lg-6" id="firstNameRow">
  31. <label for="formGroupExampleInput1">First name</label>
  32. <input id="firstName" type="text" class="form-control" placeholder="First name" value="{{ user['firstName'] }}">
  33. </div>
  34. <div class="col-lg-6">
  35. <label for="formGroupExampleInput2">Last name</label>
  36. <input id="lastName" type="text" class="form-control" placeholder="Last name" value="{{ user['lastName'] }}">
  37. </div>
  38. </div>
  39. <br>
  40. <button type="button" class="btn btn-primary" onclick="updateName();">Change Name</button>
  41. </form>
  42. <br><br>
  43. <form>
  44. <div class="row">
  45. <div class="col-lg-6" id="userNameRow">
  46. <label for="formGroupExampleInput3">Username</label>
  47. <input id="userName" type="text" class="form-control" placeholder="Username" value="{{ user['userName'] }}">
  48. <br>
  49. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userNameWarningModal">Change Username</button>
  50. <br>
  51. </div>
  52. <div class="col-lg-6">
  53. <label for="formGroupExampleInput4">Email</label>
  54. <input id="email" type="email" class="form-control" placeholder="Email" value="{{ user['email'] }}">
  55. <br>
  56. <button type="button" class="btn btn-primary" onclick="updateEmail();">Change Email</button>
  57. <br>
  58. </div>
  59. </div>
  60. </form>
  61. <br><br>
  62. <form>
  63. <button id="passwordButton" type="button" class="btn btn-danger" data-toggle="modal" data-target="#passwordChangeModal">Change Password</button>
  64. </form>
  65. <br><br>
  66. <form class="text-center">
  67. <button id="premiumButton" type="button" class="btn btn-success" data-toggle="modal" data-target="#upgradeModal">Upgrade to Technical Incompetence+</button>
  68. </form>
  69. <br><br>
  70. </div>
  71. <div id="userNameWarningModal" class="modal fade" tabindex="-1" role="dialog">
  72. <div class="modal-dialog" role="document">
  73. <div class="modal-content">
  74. <div class="modal-header">
  75. <h5 class="modal-title">Warning</h5>
  76. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  77. <span aria-hidden="true">&times;</span>
  78. </button>
  79. </div>
  80. <div class="modal-body">
  81. <div id="username-alert" class="alert alert-danger" role="alert" style="display: none;">
  82. This is a danger alert—check it out!
  83. </div>
  84. <p>If you change your username, you will be logged out here and likely need to re-login in everywhere with your new username.</p>
  85. </div>
  86. <div class="modal-footer">
  87. <button type="button" class="btn btn-danger" onclick="updateUserName();">Save new username</button>
  88. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div id="passwordChangeModal" class="modal fade" tabindex="-1" role="dialog">
  94. <div class="modal-dialog" role="document">
  95. <div class="modal-content">
  96. <div class="modal-header">
  97. <h5 class="modal-title">Update Password</h5>
  98. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  99. <span aria-hidden="true">&times;</span>
  100. </button>
  101. </div>
  102. <div class="modal-body">
  103. <div id="password-alert" class="alert alert-danger" role="alert" style="display: none;">
  104. This is a danger alert—check it out!
  105. </div>
  106. <p>If you change your password, you will be logged out here and likely need to re-login in everywhere with your new password.</p>
  107. <form style="padding: .75rem 1.25rem;">
  108. <div class="row">
  109. <label for="formGroupExampleInput5">Current Password</label>
  110. <input id="currentPassword" type="password" class="form-control" placeholder="Current Password">
  111. </div>
  112. <br>
  113. <div class="row">
  114. <label for="formGroupExampleInput6">New Password</label>
  115. <input id="newPassword" type="password" class="form-control" placeholder="New Password">
  116. </div>
  117. <br>
  118. <div class="row">
  119. <label for="formGroupExampleInput6">Confirm New Password</label>
  120. <input id="confirmNewPassword" type="password" class="form-control" placeholder="Confirm New Password">
  121. </div>
  122. </form>
  123. </div>
  124. <div class="modal-footer">
  125. <button type="button" class="btn btn-danger" onclick="updatePassword();">Change Password</button>
  126. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <div id="upgradeModal" class="modal fade" tabindex="-1" role="dialog">
  132. <div class="modal-dialog" role="document">
  133. <div class="modal-content">
  134. <div class="modal-header">
  135. <h5 class="modal-title">Upgrade to Technical Incompetence+</h5>
  136. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  137. <span aria-hidden="true">&times;</span>
  138. </button>
  139. </div>
  140. <div class="modal-body">
  141. <p>Coming soon!</p>
  142. </div>
  143. <div class="modal-footer">
  144. <button type="button" class="btn btn-danger" disabled>Upgrade</button>
  145. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. {% endblock %}
  151. {% block scripts %}
  152. {{ super() }}
  153. <script>
  154. function updateEmail() {
  155. email = $('#email').val();
  156. if (email.trim().length === 0) {
  157. showError('Email is required');
  158. return false;
  159. }
  160. dn = '{{ user['dn'] }}';
  161. $.ajax({
  162. url: '/update/email',
  163. method: 'POST',
  164. data: { "email": email,
  165. "dn": dn },
  166. success: function(data) {
  167. if (data === 'Success')
  168. showSuccess('Email updated!');
  169. else
  170. showError(data);
  171. }
  172. });
  173. }
  174. function updateName() {
  175. first = $('#firstName').val();
  176. last = $('#lastName').val();
  177. if (first.trim().length === 0 || last.trim().length === 0) {
  178. showError('Both first and last name are required');
  179. return false;
  180. }
  181. dn = '{{ user['dn'] }}';
  182. $.ajax({
  183. url: '/update/name',
  184. method: 'POST',
  185. data: { "firstName": first,
  186. "lastName": last,
  187. "dn": dn },
  188. success: function(data) {
  189. if (data === 'Success')
  190. showSuccess('Name updated!');
  191. else
  192. showError(data);
  193. }
  194. });
  195. }
  196. function updateUserName() {
  197. user = $('#userName').val();
  198. if (user.trim().length === 0) {
  199. showUsernameError('Username is required');
  200. return false;
  201. }
  202. dn = '{{ user['dn'] }}';
  203. $.ajax({
  204. url: '/update/username',
  205. method: 'POST',
  206. data: { "userName": user,
  207. "dn": dn },
  208. success: function(data) {
  209. if (data === 'Success')
  210. window.location = window.location.origin + "/logout";
  211. else
  212. showUsernameError(data);
  213. }
  214. });
  215. }
  216. function updatePassword() {
  217. currentPassword = $('#currentPassword').val();
  218. newPassword = $('#newPassword').val();
  219. confirmPassword = $('#confirmNewPassword').val();
  220. dn = '{{ user['dn'] }}';
  221. $.ajax({
  222. url: '/update/password',
  223. method: 'POST',
  224. data: { "currentPassword": currentPassword,
  225. "newPassword": newPassword,
  226. "confirmPassword": confirmPassword,
  227. "dn": dn },
  228. success: function(data) {
  229. if (data === 'Success')
  230. window.location = window.location.origin + "/logout";
  231. else
  232. showPasswordError(data)
  233. }
  234. });
  235. }
  236. function showError(error) {
  237. hideSuccess();
  238. $('#error-alert').text(error);
  239. $('#error-alert').show();
  240. }
  241. function showPasswordError(error) {
  242. $('#password-alert').text(error);
  243. $('#password-alert').show();
  244. }
  245. function showUsernameError(error) {
  246. $('#username-alert').text(error);
  247. $('#username-alert').show();
  248. }
  249. function hideError() {
  250. $('#error-alert').hide();
  251. }
  252. function showSuccess(message) {
  253. hideError();
  254. $('#success-alert').text(message);
  255. $('#success-alert').show();
  256. }
  257. function hideSuccess() {
  258. $('#success-alert').hide();
  259. }
  260. </script>
  261. {% endblock %}