My SMM panel
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 
 
 

117 wiersze
3.6 KiB

  1. <template>
  2. <div>
  3. <section class="change-name-pane">
  4. <h3>Settings</h3>
  5. <h4>Billing</h4>
  6. <h4>Name</h4>
  7. <input :value="user.name" name="name" id="changed_name" type="text">
  8. <button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
  9. <span></span>
  10. </section>
  11. <section class="change-email-pane">
  12. <h4>Email</h4>
  13. <input :value="user.email" name="email" type="text" id="changed_email">
  14. <button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
  15. <span></span>
  16. </section>
  17. <section class="change-password-pane">
  18. <h4>Change Password</h4>
  19. <h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
  20. <h5>New Password</h5><input id="new_password" name="password" type="password">
  21. <h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
  22. <button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
  23. <span></span>
  24. </section>
  25. </div>
  26. </template>
  27. <script>
  28. import Loading from '../icons/loading.vue'
  29. function changeName() {
  30. let name = document.getElementById('changed_name').value
  31. let info = document.querySelector('.change-name-pane span')
  32. let pane = document.querySelector('.change-name-pane')
  33. pane.classList.add('loading')
  34. pane.classList.remove('error')
  35. fetch("/panel/change-name", {
  36. method: 'POST',
  37. headers: {'Content-Type': 'application/json',
  38. 'Accept': 'application/json',
  39. 'X-XSRF-TOKEN': this.token},
  40. body: JSON.stringify({'name': name}),
  41. }).then(response => {
  42. if (response.ok) {
  43. pane.classList.add('completed')
  44. info.textContent = 'Verification link sent.'
  45. } else {
  46. pane.classList.add('error')
  47. info.textContent = 'Error: ' + response.status
  48. }
  49. pane.classList.remove('loading')
  50. })
  51. }
  52. function changeEmail() {
  53. let email = document.getElementById('changed_email').value
  54. let info = document.querySelector('.change-email-pane span')
  55. let pane = document.querySelector('.change-email-pane')
  56. pane.classList.add('loading')
  57. pane.classList.remove('error')
  58. fetch("/panel/change-name", {
  59. method: 'POST',
  60. headers: {'Content-Type': 'application/json',
  61. 'Accept': 'application/json',
  62. 'X-XSRF-TOKEN': this.token},
  63. body: JSON.stringify({'email': email}),
  64. }).then(response => {
  65. if (response.ok) {
  66. pane.classList.add('completed')
  67. info.textContent = 'Completed'
  68. } else {
  69. pane.classList.add('error')
  70. info.textContent = 'Error: ' + response.status
  71. }
  72. pane.classList.remove('loading')
  73. })
  74. }
  75. function changePassword() {
  76. let info = document.querySelector('.change-password-pane span')
  77. let pane = document.querySelector('.change-password-pane')
  78. pane.classList.add('loading')
  79. pane.classList.remove('error')
  80. fetch("/panel/change-password", {
  81. method: 'POST',
  82. headers: {'Content-Type': 'application/json',
  83. 'Accept': 'application/json',
  84. 'X-XSRF-TOKEN': this.token},
  85. body: JSON.stringify({'current_password': document.getElementById('current_password').value, 'password': document.getElementById('new_password').value, 'password_confirmation': document.getElementById('confirm_password').value}),
  86. }).then(response => {
  87. response.json().then(data => {console.log(data)})
  88. if (response.ok) {
  89. pane.classList.add('completed')
  90. info.textContent = 'Completed'
  91. } else {
  92. pane.classList.add('error')
  93. info.textContent = 'Error: ' + response.status
  94. }
  95. pane.classList.remove('loading')
  96. })
  97. }
  98. export default {
  99. components: {Loading},
  100. methods: {
  101. changePassword, changeName, changeEmail
  102. },
  103. props: ['user', 'token']
  104. }
  105. </script>