Login.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <div class='modal is-active'>
  3. <div class='modal-background'></div>
  4. <div class='modal-card'>
  5. <header class='modal-card-head'>
  6. <p class='modal-card-title'>Login</p>
  7. <button class='delete' @click='toggleModal()'></button>
  8. </header>
  9. <section class='modal-card-body'>
  10. <!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
  11. <label class='label'>Email</label>
  12. <p class='control'>
  13. <input class='input' type='text' placeholder='Email...' v-model='$parent.login.email'>
  14. </p>
  15. <label class='label'>Password</label>
  16. <p class='control'>
  17. <input class='input' type='password' placeholder='Password...' v-model='$parent.login.password' v-on:keypress='$parent.submitOnEnter(submitModal, $event)'>
  18. </p>
  19. <p>By logging in/registering you agree to our <a href="/terms" v-link="{ path: '/terms' }">Terms of Service</a> and <a href="/privacy" v-link="{ path: '/privacy' }">Privacy Policy</a>.</p>
  20. </section>
  21. <footer class='modal-card-foot'>
  22. <a class='button is-primary' href='#' @click='submitModal("login")'>Submit</a>
  23. <a class='button is-github' :href='$parent.serverDomain + "/auth/github/authorize"'>
  24. <div class='icon'>
  25. <img class='invert' src='/assets/social/github.svg'/>
  26. </div>
  27. &nbsp;&nbsp;Login with GitHub
  28. </a>
  29. <a href='/reset_password' @click='resetPassword()'>Forgot password?</a>
  30. </footer>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. methods: {
  37. toggleModal: function () {
  38. if (this.$router._currentRoute.path === '/login') location.href = '/';
  39. else this.$dispatch('toggleModal', 'login');
  40. },
  41. submitModal: function () {
  42. this.$dispatch('login');
  43. this.toggleModal();
  44. },
  45. resetPassword: function () {
  46. this.toggleModal();
  47. this.$router.go('/reset_password');
  48. }
  49. },
  50. events: {
  51. closeModal: function() {
  52. this.$dispatch('toggleModal', 'login');
  53. }
  54. }
  55. }
  56. </script>
  57. <style type='scss' scoped>
  58. .button.is-github {
  59. background-color: #333;
  60. color: #fff !important;
  61. }
  62. .is-github:focus { background-color: #1a1a1a; }
  63. .is-primary:focus { background-color: #029ce3 !important; }
  64. .invert { filter: brightness(5); }
  65. a { color: #029ce3; }
  66. </style>