Login.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <div class="modal is-active">
  3. <div
  4. class="modal-background"
  5. @click="
  6. closeModal({
  7. sector: 'header',
  8. modal: 'login'
  9. })
  10. "
  11. />
  12. <div class="modal-card">
  13. <header class="modal-card-head">
  14. <p class="modal-card-title">
  15. Login
  16. </p>
  17. <button
  18. class="delete"
  19. @click="
  20. closeModal({
  21. sector: 'header',
  22. modal: 'login'
  23. })
  24. "
  25. />
  26. </header>
  27. <section class="modal-card-body">
  28. <!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
  29. <label class="label">Email</label>
  30. <p class="control">
  31. <input
  32. v-model="email"
  33. class="input"
  34. type="text"
  35. placeholder="Email..."
  36. />
  37. </p>
  38. <label class="label">Password</label>
  39. <p class="control">
  40. <input
  41. v-model="password"
  42. class="input"
  43. type="password"
  44. placeholder="Password..."
  45. @keypress="$parent.submitOnEnter(submitModal, $event)"
  46. />
  47. </p>
  48. <p>
  49. By logging in/registering you agree to our
  50. <router-link to="/terms"> Terms of Service </router-link
  51. >&nbsp;and
  52. <router-link to="/privacy"> Privacy Policy </router-link>.
  53. </p>
  54. </section>
  55. <footer class="modal-card-foot">
  56. <a
  57. class="button is-primary"
  58. href="#"
  59. @click="submitModal('login')"
  60. >Submit</a
  61. >
  62. <a
  63. class="button is-github"
  64. :href="$parent.serverDomain + '/auth/github/authorize'"
  65. @click="githubRedirect()"
  66. >
  67. <div class="icon">
  68. <img class="invert" src="/assets/social/github.svg" />
  69. </div>
  70. &nbsp;&nbsp;Login with GitHub
  71. </a>
  72. <a href="/reset_password" v-on:click="resetPassword()"
  73. >Forgot password?</a
  74. >
  75. </footer>
  76. </div>
  77. </div>
  78. </template>
  79. <script>
  80. import { mapActions } from "vuex";
  81. import { Toast } from "vue-roaster";
  82. export default {
  83. data() {
  84. return {
  85. email: "",
  86. password: ""
  87. };
  88. },
  89. methods: {
  90. submitModal() {
  91. this.login({
  92. email: this.email,
  93. password: this.password
  94. })
  95. .then(res => {
  96. if (res.status === "success") window.location.reload();
  97. })
  98. .catch(err => Toast.methods.addToast(err.message, 5000));
  99. },
  100. resetPassword() {
  101. this.closeModal({ sector: "header", modal: "login" });
  102. this.$router.go("/reset_password");
  103. },
  104. githubRedirect() {
  105. localStorage.setItem("github_redirect", this.$route.path);
  106. },
  107. ...mapActions("modals", ["closeModal"]),
  108. ...mapActions("user/auth", ["login"])
  109. }
  110. };
  111. </script>
  112. <style lang="scss" scoped>
  113. .button.is-github {
  114. background-color: #333;
  115. color: #fff !important;
  116. }
  117. .is-github:focus {
  118. background-color: #1a1a1a;
  119. }
  120. .is-primary:focus {
  121. background-color: #029ce3 !important;
  122. }
  123. .invert {
  124. filter: brightness(5);
  125. }
  126. a {
  127. color: #029ce3;
  128. }
  129. </style>