Register.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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'>Register</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.register.email' autofocus>
  14. </p>
  15. <label class='label'>Username</label>
  16. <p class='control'>
  17. <input class='input' type='text' placeholder='Username...' v-model='$parent.register.username'>
  18. </p>
  19. <label class='label'>Password</label>
  20. <p class='control'>
  21. <input class='input' type='password' placeholder='Password...' v-model='$parent.register.password' v-on:keypress='$parent.submitOnEnter(submitModal, $event)'>
  22. </p>
  23. <div id="recaptcha"></div>
  24. <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>
  25. </section>
  26. <footer class='modal-card-foot'>
  27. <a class='button is-primary' href='#' @click='submitModal()'>Submit</a>
  28. <a class='button is-github' :href='$parent.serverDomain + "/auth/github/authorize"'>
  29. <div class='icon'>
  30. <img class='invert' src='/assets/social/github.svg'/>
  31. </div>
  32. &nbsp;&nbsp;Register with GitHub
  33. </a>
  34. </footer>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. return {
  42. recaptcha: {
  43. key: ''
  44. }
  45. }
  46. },
  47. ready: function () {
  48. let _this = this;
  49. lofig.get('recaptcha', obj => {
  50. _this.recaptcha.key = obj.key;
  51. _this.recaptcha.id = grecaptcha.render('recaptcha', {
  52. 'sitekey' : _this.recaptcha.key
  53. });
  54. });
  55. },
  56. methods: {
  57. toggleModal: function () {
  58. if (this.$router._currentRoute.path === '/register') location.href = '/';
  59. else this.$dispatch('toggleModal', 'register');
  60. },
  61. submitModal: function () {
  62. this.$dispatch('register', this.recaptcha.id);
  63. this.toggleModal();
  64. }
  65. },
  66. events: {
  67. closeModal: function() {
  68. this.$dispatch('toggleModal', 'register');
  69. }
  70. }
  71. }
  72. </script>
  73. <style type='scss' scoped>
  74. .button.is-github {
  75. background-color: #333;
  76. color: #fff !important;
  77. }
  78. .is-github:focus { background-color: #1a1a1a; }
  79. .is-primary:focus { background-color: #028bca !important; }
  80. .invert { filter: brightness(5); }
  81. #recaptcha { padding: 10px 0; }
  82. a { color: #029ce3; }
  83. </style>