ResetPassword.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div>
  3. <metadata title="Reset password" />
  4. <main-header />
  5. <div class="container">
  6. <!--Implement Validation-->
  7. <h1>Step {{ step }}</h1>
  8. <label v-if="step === 1" class="label">Email Address</label>
  9. <div v-if="step === 1" class="control is-grouped">
  10. <p class="control is-expanded has-icon has-icon-right">
  11. <input
  12. v-model="email"
  13. class="input"
  14. type="email"
  15. placeholder="The email address associated with your account"
  16. />
  17. </p>
  18. <p class="control">
  19. <button class="button is-success" @click="submitEmail()">
  20. Request
  21. </button>
  22. <button
  23. v-if="step === 1"
  24. class="button is-default skip-step"
  25. @click="step = 2"
  26. >
  27. Skip this step
  28. </button>
  29. </p>
  30. </div>
  31. <label v-if="step === 2" class="label">Reset Code</label>
  32. <div v-if="step === 2" class="control is-grouped">
  33. <p class="control is-expanded has-icon has-icon-right">
  34. <input
  35. v-model="code"
  36. class="input"
  37. type="text"
  38. placeholder="The reset code that was sent to your account's email address"
  39. />
  40. </p>
  41. <p class="control">
  42. <button class="button is-success" v-on:click="verifyCode()">
  43. Verify reset code
  44. </button>
  45. </p>
  46. </div>
  47. <label v-if="step === 3" class="label">Change password</label>
  48. <div v-if="step === 3" class="control is-grouped">
  49. <p class="control is-expanded has-icon has-icon-right">
  50. <input
  51. v-model="newPassword"
  52. class="input"
  53. type="password"
  54. placeholder="New password"
  55. />
  56. </p>
  57. <p class="control">
  58. <button class="button is-success" @click="changePassword()">
  59. Change password
  60. </button>
  61. </p>
  62. </div>
  63. </div>
  64. <main-footer />
  65. </div>
  66. </template>
  67. <script>
  68. import Toast from "toasters";
  69. import MainHeader from "../MainHeader.vue";
  70. import MainFooter from "../MainFooter.vue";
  71. import io from "../../io";
  72. export default {
  73. components: { MainHeader, MainFooter },
  74. data() {
  75. return {
  76. email: "",
  77. code: "",
  78. newPassword: "",
  79. step: 1
  80. };
  81. },
  82. mounted() {
  83. io.getSocket(socket => {
  84. this.socket = socket;
  85. });
  86. },
  87. methods: {
  88. submitEmail() {
  89. if (!this.email)
  90. return new Toast({
  91. content: "Email cannot be empty",
  92. timeout: 8000
  93. });
  94. return this.socket.emit(
  95. "users.requestPasswordReset",
  96. this.email,
  97. res => {
  98. new Toast({ content: res.message, timeout: 8000 });
  99. if (res.status === "success") {
  100. this.step = 2;
  101. }
  102. }
  103. );
  104. },
  105. verifyCode() {
  106. if (!this.code)
  107. return new Toast({
  108. content: "Code cannot be empty",
  109. timeout: 8000
  110. });
  111. return this.socket.emit(
  112. "users.verifyPasswordResetCode",
  113. this.code,
  114. res => {
  115. new Toast({ content: res.message, timeout: 8000 });
  116. if (res.status === "success") {
  117. this.step = 3;
  118. }
  119. }
  120. );
  121. },
  122. changePassword() {
  123. if (!this.newPassword)
  124. return new Toast({
  125. content: "Password cannot be empty",
  126. timeout: 8000
  127. });
  128. return this.socket.emit(
  129. "users.changePasswordWithResetCode",
  130. this.code,
  131. this.newPassword,
  132. res => {
  133. new Toast({ content: res.message, timeout: 8000 });
  134. if (res.status === "success") {
  135. this.$router.go("/login");
  136. }
  137. }
  138. );
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="scss" scoped>
  144. @import "styles/global.scss";
  145. .night-mode {
  146. .label {
  147. color: #ddd;
  148. }
  149. .skip-step {
  150. border: 0;
  151. }
  152. }
  153. .container {
  154. padding: 25px;
  155. }
  156. .skip-step {
  157. background-color: #7e7e7e;
  158. color: $white;
  159. }
  160. </style>