My SMM panel
 
 
 
 
 
 

103 行
3.3 KiB

  1. <template>
  2. <form v-if="active === 'register'" v-on:submit="register" id="register-form">
  3. <h3>Registration</h3>
  4. <div>
  5. <label for='sender_name'>Name</label>
  6. <input id='register-name' required type='name' name='sender_name' placeholder=''
  7. spellcheck='false'>
  8. </div>
  9. <div>
  10. <label for='sender_email'>Email</label>
  11. <input v-on:input="checkPasswords" id='register-email' required type='email' name='sender_email' placeholder=''
  12. spellcheck='false'>
  13. </div>
  14. <div>
  15. <label for='sender_password'>Password</label>
  16. <input v-on:input="checkPasswords" id='register-password' required type='password' name='sender_password'
  17. placeholder='' spellcheck='false'>
  18. </div>
  19. <div>
  20. <label for='confirm_password'>Confirm Password</label>
  21. <input v-on:input="checkPasswords" id='confirm-password' required type='password'
  22. name='sender_password' placeholder='' spellcheck='false'>
  23. </div>
  24. <button class="submit-btn" type="submit">Submit</button>
  25. </form>
  26. <form v-if="active === 'forgot'" v-on:submit="register" id="forgot-form">
  27. <h3>Forgot Password</h3>
  28. <div>
  29. <label for='sender_email'>Email</label>
  30. <input id='forgot-email' required type='email' name='sender_email' placeholder=''
  31. spellcheck='false'>
  32. </div>
  33. <button class="submit-btn" type="submit">Submit</button>
  34. </form>
  35. <img v-if="active === 'loading'" type="image/svg+xml" class="loading-icon" src="../../images/loading.svg" alt=""/>
  36. <div v-if="active === 'register-completed'">
  37. <img class="medium-icon" src="../../images/checked2.svg" alt="">
  38. <h3>Success!</h3>
  39. <p>A verification link has been sent to your inbox.</p>
  40. </div>
  41. <div v-if="active === 'forgot-completed'">
  42. <img class="medium-icon" src="../../images/checked2.svg" alt="">
  43. <h3>Success!</h3>
  44. <p>A password reset link has been sent.</p>
  45. </div>
  46. <div v-if="active === 'error'">
  47. <img class="medium-icon" src="../../images/warning.svg" alt="">
  48. <h3>An Error Occured.</h3>
  49. <p>{{`${error}: ${errorMessage}`}}</p>
  50. </div>
  51. <div v-on:click="closeArea" class="cancel-button"></div>
  52. </template>
  53. <script>
  54. function register(event) {
  55. this.active = 'loading'
  56. fetch("/register", {
  57. method: 'POST',
  58. headers: {'Content-Type': 'application/json',
  59. 'X-XSRF-TOKEN': this.token},
  60. body: JSON.stringify({"name": document.getElementById("register-name").value,
  61. "email": document.getElementById("register-email").value,
  62. "password": document.getElementById("register-password").value,
  63. "password_confirmation": document.getElementById("confirm-password").value})})
  64. .then(response => {
  65. //Give completed or error
  66. if (response.ok) {
  67. this.active = 'completed'
  68. } else {
  69. this.error = response.status
  70. this.errorMessage = response.statusText
  71. this.active = 'error'
  72. }
  73. console.log(response)
  74. });
  75. event.preventDefault();
  76. }
  77. function checkPasswords() {
  78. let passInput = document.getElementById('register-password')
  79. let passInput2 = document.getElementById('confirm-password')
  80. if (passInput.value != passInput2.value) {
  81. passInput2.setCustomValidity('Passwords must be matching')
  82. } else {
  83. passInput2.setCustomValidity('');
  84. }
  85. }
  86. module.exports = {
  87. data() {
  88. return {active: 'register', token: ''}
  89. },
  90. methods: {
  91. register,
  92. checkPasswords,
  93. closeArea() {
  94. document.querySelector(".register-area").classList.remove("active")
  95. },
  96. }
  97. }
  98. </script>