ResetPassword.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <main-header></main-header>
  3. <div class="container">
  4. <!--Implement Validation-->
  5. <h1>Step {{step}}</h1>
  6. <label class="label" v-if="step === 1">Email</label>
  7. <div class="control is-grouped" v-if="step === 1">
  8. <p class="control is-expanded has-icon has-icon-right">
  9. <input class="input" type="email" placeholder="Email" v-model="email">
  10. </p>
  11. <p class="control">
  12. <button class="button is-success" @click="submitEmail()">Request</button>
  13. </p>
  14. </div>
  15. <button @click="step = 2" v-if="step === 1" class="button is-success">Skip this step</button>
  16. <label class="label" v-if="step === 2">Reset code (the code that was sent to your account email address)</label>
  17. <div class="control is-grouped" v-if="step === 2">
  18. <p class="control is-expanded has-icon has-icon-right">
  19. <input class="input" type="text" placeholder="Reset code" v-model="code">
  20. </p>
  21. <p class="control">
  22. <button class="button is-success" @click="verifyCode()">Verify reset code</button>
  23. </p>
  24. </div>
  25. <label class="label" v-if="step === 3">Change password</label>
  26. <div class="control is-grouped" v-if="step === 3">
  27. <p class="control is-expanded has-icon has-icon-right">
  28. <input class="input" type="password" placeholder="New password" v-model="newPassword">
  29. </p>
  30. <p class="control">
  31. <button class="button is-success" @click="changePassword()">Change password</button>
  32. </p>
  33. </div>
  34. </div>
  35. <main-footer></main-footer>
  36. </template>
  37. <script>
  38. import { Toast } from 'vue-roaster';
  39. import MainHeader from '../MainHeader.vue';
  40. import MainFooter from '../MainFooter.vue';
  41. import LoginModal from '../Modals/Login.vue'
  42. import io from '../../io'
  43. export default {
  44. data() {
  45. return {
  46. email: '',
  47. code: '',
  48. newPassword: '',
  49. step: 1
  50. }
  51. },
  52. ready: function() {
  53. let _this = this;
  54. io.getSocket((socket) => {
  55. _this.socket = socket;
  56. });
  57. },
  58. methods: {
  59. submitEmail: function () {
  60. if (!this.email) return Toast.methods.addToast('Email cannot be empty', 8000);
  61. this.socket.emit('users.requestPasswordReset', this.email, res => {
  62. Toast.methods.addToast(res.message, 8000);
  63. if (res.status === 'success') {
  64. this.step = 2;
  65. }
  66. });
  67. },
  68. verifyCode: function () {
  69. if (!this.code) return Toast.methods.addToast('Code cannot be empty', 8000);
  70. this.socket.emit('users.verifyPasswordResetCode', this.code, res => {
  71. Toast.methods.addToast(res.message, 8000);
  72. if (res.status === 'success') {
  73. this.step = 3;
  74. }
  75. });
  76. },
  77. changePassword: function () {
  78. if (!this.newPassword) return Toast.methods.addToast('Password cannot be empty', 8000);
  79. this.socket.emit('users.changePasswordWithResetCode', this.code, this.newPassword, res => {
  80. Toast.methods.addToast(res.message, 8000);
  81. if (res.status === 'success') {
  82. this.$router.go('/login');
  83. }
  84. });
  85. }
  86. },
  87. components: { MainHeader, MainFooter, LoginModal }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. .container {
  92. padding: 25px;
  93. }
  94. </style>