Register.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div class="modal is-active">
  3. <div
  4. class="modal-background"
  5. @click="
  6. closeModal({
  7. sector: 'header',
  8. modal: 'register'
  9. })
  10. "
  11. />
  12. <div class="modal-card">
  13. <header class="modal-card-head">
  14. <p class="modal-card-title">
  15. Register
  16. </p>
  17. <button
  18. class="delete"
  19. @click="
  20. closeModal({
  21. sector: 'header',
  22. modal: 'register'
  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. autofocus
  37. />
  38. </p>
  39. <label class="label">Username</label>
  40. <p class="control">
  41. <input
  42. v-model="username"
  43. class="input"
  44. type="text"
  45. placeholder="Username..."
  46. />
  47. </p>
  48. <label class="label">Password</label>
  49. <p class="control">
  50. <input
  51. v-model="password"
  52. class="input"
  53. type="password"
  54. placeholder="Password..."
  55. @keypress="$parent.submitOnEnter(submitModal, $event)"
  56. />
  57. </p>
  58. <p>
  59. By logging in/registering you agree to our
  60. <router-link to="/terms"> Terms of Service </router-link
  61. >&nbsp;and
  62. <router-link to="/privacy"> Privacy Policy </router-link>.
  63. </p>
  64. </section>
  65. <footer class="modal-card-foot">
  66. <a class="button is-primary" href="#" @click="submitModal()"
  67. >Submit</a
  68. >
  69. <a
  70. class="button is-github"
  71. :href="$parent.serverDomain + '/auth/github/authorize'"
  72. @click="githubRedirect()"
  73. >
  74. <div class="icon">
  75. <img class="invert" src="/assets/social/github.svg" />
  76. </div>
  77. &nbsp;&nbsp;Register with GitHub
  78. </a>
  79. </footer>
  80. </div>
  81. </div>
  82. </template>
  83. <script>
  84. import { mapActions } from "vuex";
  85. import { Toast } from "vue-roaster";
  86. export default {
  87. data() {
  88. return {
  89. username: "",
  90. email: "",
  91. password: "",
  92. recaptcha: {
  93. key: "",
  94. token: ""
  95. }
  96. };
  97. },
  98. mounted() {
  99. const _this = this;
  100. lofig.get("recaptcha", obj => {
  101. _this.recaptcha.key = obj.key;
  102. const recaptchaScript = document.createElement("script");
  103. recaptchaScript.onload = () => {
  104. grecaptcha.ready(() => {
  105. grecaptcha
  106. .execute(this.recaptcha.key, { action: "login" })
  107. .then(token => {
  108. _this.recaptcha.token = token;
  109. });
  110. });
  111. };
  112. recaptchaScript.setAttribute(
  113. "src",
  114. `https://www.google.com/recaptcha/api.js?render=${this.recaptcha.key}`
  115. );
  116. document.head.appendChild(recaptchaScript);
  117. });
  118. },
  119. methods: {
  120. submitModal() {
  121. console.log(this.recaptcha.token);
  122. this.register({
  123. username: this.username,
  124. email: this.email,
  125. password: this.password,
  126. recaptchaToken: this.recaptcha.token
  127. })
  128. .then(res => {
  129. if (res.status === "success") window.location.reload();
  130. })
  131. .catch(err => Toast.methods.addToast(err.message, 5000));
  132. },
  133. githubRedirect() {
  134. localStorage.setItem("github_redirect", this.$route.path);
  135. },
  136. ...mapActions("modals", ["closeModal"]),
  137. ...mapActions("user/auth", ["register"])
  138. }
  139. };
  140. </script>
  141. <style lang="scss" scoped>
  142. .button.is-github {
  143. background-color: #333;
  144. color: #fff !important;
  145. }
  146. .is-github:focus {
  147. background-color: #1a1a1a;
  148. }
  149. .is-primary:focus {
  150. background-color: #028bca !important;
  151. }
  152. .invert {
  153. filter: brightness(5);
  154. }
  155. #recaptcha {
  156. padding: 10px 0;
  157. }
  158. a {
  159. color: #029ce3;
  160. }
  161. </style>