Advertisement
Guest User

Untitled

a guest
Mar 2nd, 2018
155
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.27 KB | None | 0 0
  1. <template>
  2. <v-container>
  3. <v-layout row>
  4. <v-flex xs12 sm6 offset-sm3>
  5. <v-card>
  6. <v-card-text>
  7. <v-container>
  8. <form>
  9. <v-layout row>
  10. <v-flex xs12 v-bind:class="existUsername?'error-exist':''">
  11. <v-text-field
  12. label="Username"
  13. v-model="username"
  14. :error-messages="usernameErrors"
  15. @input="$v.username.$touch()"
  16. @blur="$v.username.$touch();checkUsername();"
  17. required
  18. ></v-text-field>
  19. <span class="input-group__messages input-group__error" v-if="existUsername">This username is already registered</span>
  20. </v-flex>
  21. </v-layout>
  22. <v-layout row>
  23. <v-flex xs12 v-bind:class="existEmail?'error-exist':''">
  24. <v-text-field
  25. label="E-mail"
  26. v-model="email"
  27. :error-messages="emailErrors"
  28. @input="$v.email.$touch()"
  29. @blur="$v.email.$touch();checkEmail();"
  30. required
  31. ></v-text-field>
  32. <span class="input-group__messages input-group__error" v-if="existEmail">This E-mail is already registered</span>
  33. </v-flex>
  34. </v-layout>
  35. <v-layout row>
  36. <v-flex xs12>
  37. <v-text-field
  38. label="Password"
  39. v-model="password"
  40. :error-messages="passwordErrors"
  41. @input="$v.password.$touch()"
  42. @blur="$v.password.$touch()"
  43. required
  44. type="password"></v-text-field>
  45. </v-flex>
  46. </v-layout>
  47. <v-layout row>
  48. <v-flex xs12>
  49. <v-text-field
  50. label="Repeat password"
  51. v-model="repeatPassword"
  52. :error-messages="repeatPasswordErrors"
  53. @input="$v.repeatPassword.$touch()"
  54. @blur="$v.repeatPassword.$touch()"
  55. required
  56. type="password"></v-text-field>
  57. </v-flex>
  58. </v-layout>
  59. <v-layout row>
  60. <v-flex xs6>
  61. <v-btn @click="onSignup" :disabled="!$v.$dirty || $v.$error || existUsername || existEmail">
  62. <v-icon class="pr-2">whatshot</v-icon>
  63. Register
  64. </v-btn>
  65. </v-flex>
  66. <v-flex xs6 class="text-lg-right">
  67. <v-btn right @click="onClear">
  68. <v-icon class="pr-2">clear_all</v-icon>
  69. Clear
  70. </v-btn>
  71. </v-flex>
  72. </v-layout>
  73. <v-layout row>
  74. <v-flex xs12>
  75. <v-dialog v-model="register" persistent max-width="290">
  76. <v-card>
  77. <v-card-title class="headline">Confirm E-Mail</v-card-title>
  78. <v-card-text>Please confirm your e-mail address to activate your account!</v-card-text>
  79. <v-card-actions>
  80. <v-spacer></v-spacer>
  81. <v-btn color="primary" flat @click.native="register=false; redirectHome();">OK</v-btn>
  82. </v-card-actions>
  83. </v-card>
  84. </v-dialog>
  85. <div class="ivu-form-item-error-tip server-side" v-if="signUpErrors">
  86. <div v-for="formError in signUpErrors">
  87. <v-alert type="error" :value="true">
  88. {{ formError.message }}
  89. </v-alert>
  90. </div>
  91. </div>
  92. </v-flex>
  93. </v-layout>
  94. </form>
  95. </v-container>
  96. </v-card-text>
  97. </v-card>
  98. </v-flex>
  99. </v-layout>
  100. </v-container>
  101. </template>
  102.  
  103. <script>
  104. import {validationMixin} from 'vuelidate'
  105. import {required, email, sameAs} from 'vuelidate/lib/validators'
  106.  
  107. function strengthPassword(value) {
  108. const strongRegex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=(.*[\\W]){1,})(?!.*\\s)')
  109. return strongRegex.test(value)
  110. }
  111.  
  112. export default {
  113.  
  114. mixins: [validationMixin],
  115.  
  116. validations: {
  117. username: {required},
  118. email: {required, email},
  119. password: {required, strengthPassword},
  120. repeatPassword: {sameAsPassword: sameAs('<password')}
  121. },
  122.  
  123. data: () => ({
  124. username: '',
  125. email: '',
  126. password: '',
  127. repeatPassword: '',
  128. signUpErrors: '',
  129. existUsername: false,
  130. existEmail: false,
  131. register: false
  132. }),
  133.  
  134. computed: {
  135. usernameErrors() {
  136. const errors = []
  137. if (!this.$v.username.$dirty) return errors
  138. !this.$v.username.required && errors.push('Username is required.')
  139. return errors
  140. },
  141. emailErrors() {
  142. const errors = []
  143. if (!this.$v.email.$dirty) return errors
  144. !this.$v.email.email && errors.push('Must be valid e-mail')
  145. !this.$v.email.required && errors.push('E-mail is required')
  146. return errors
  147. },
  148. passwordErrors() {
  149. const errors = []
  150. if (!this.$v.password.$dirty) return errors
  151. !this.$v.password.required && errors.push('Password is required')
  152. !this.$v.password.strengthPassword && errors.push('Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character')
  153. return errors
  154. },
  155. repeatPasswordErrors() {
  156. const errors = []
  157. if (!this.$v.repeatPassword.$dirty) return errors
  158. !this.$v.repeatPassword.sameAsPassword && errors.push('Passwords must be identical')
  159. return errors
  160. }
  161. },
  162.  
  163. methods: {
  164. onSignup: async function () {
  165. try {
  166. const user = {username: this.username, email: this.email, password: this.password, password_confirmation: this.repeatPassword}
  167. const register = await this.$store.dispatch('register', user)
  168. if (register === true) {
  169. this.register = true
  170. } else if (register.jwt) {
  171. this.$router.replace({path: '/'})
  172. } else {
  173. this.signUpErrors = register
  174. }
  175. } catch (err) {
  176. console.log(err)
  177. }
  178. },
  179. onClear() {
  180. this.$v.$reset()
  181. this.username = ''
  182. this.email = ''
  183. this.password = ''
  184. this.repeatPassword = ''
  185. },
  186. async checkUsername() {
  187. this.existUsername = await this.$axios.$post('checkUsername', {username: this.username})
  188. },
  189. async checkEmail() {
  190. this.existEmail = await this.$axios.$post('checkEmail', {email: this.email})
  191. },
  192. redirectHome() {
  193. this.$router.replace({path: '/'})
  194. }
  195. }
  196. }
  197. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement