Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <v-container>
- <v-layout row>
- <v-flex xs12 sm6 offset-sm3>
- <v-card>
- <v-card-text>
- <v-container>
- <form>
- <v-layout row>
- <v-flex xs12 v-bind:class="existUsername?'error-exist':''">
- <v-text-field
- label="Username"
- v-model="username"
- :error-messages="usernameErrors"
- @input="$v.username.$touch()"
- @blur="$v.username.$touch();checkUsername();"
- required
- ></v-text-field>
- <span class="input-group__messages input-group__error" v-if="existUsername">This username is already registered</span>
- </v-flex>
- </v-layout>
- <v-layout row>
- <v-flex xs12 v-bind:class="existEmail?'error-exist':''">
- <v-text-field
- label="E-mail"
- v-model="email"
- :error-messages="emailErrors"
- @input="$v.email.$touch()"
- @blur="$v.email.$touch();checkEmail();"
- required
- ></v-text-field>
- <span class="input-group__messages input-group__error" v-if="existEmail">This E-mail is already registered</span>
- </v-flex>
- </v-layout>
- <v-layout row>
- <v-flex xs12>
- <v-text-field
- label="Password"
- v-model="password"
- :error-messages="passwordErrors"
- @input="$v.password.$touch()"
- @blur="$v.password.$touch()"
- required
- type="password"></v-text-field>
- </v-flex>
- </v-layout>
- <v-layout row>
- <v-flex xs12>
- <v-text-field
- label="Repeat password"
- v-model="repeatPassword"
- :error-messages="repeatPasswordErrors"
- @input="$v.repeatPassword.$touch()"
- @blur="$v.repeatPassword.$touch()"
- required
- type="password"></v-text-field>
- </v-flex>
- </v-layout>
- <v-layout row>
- <v-flex xs6>
- <v-btn @click="onSignup" :disabled="!$v.$dirty || $v.$error || existUsername || existEmail">
- <v-icon class="pr-2">whatshot</v-icon>
- Register
- </v-btn>
- </v-flex>
- <v-flex xs6 class="text-lg-right">
- <v-btn right @click="onClear">
- <v-icon class="pr-2">clear_all</v-icon>
- Clear
- </v-btn>
- </v-flex>
- </v-layout>
- <v-layout row>
- <v-flex xs12>
- <v-dialog v-model="register" persistent max-width="290">
- <v-card>
- <v-card-title class="headline">Confirm E-Mail</v-card-title>
- <v-card-text>Please confirm your e-mail address to activate your account!</v-card-text>
- <v-card-actions>
- <v-spacer></v-spacer>
- <v-btn color="primary" flat @click.native="register=false; redirectHome();">OK</v-btn>
- </v-card-actions>
- </v-card>
- </v-dialog>
- <div class="ivu-form-item-error-tip server-side" v-if="signUpErrors">
- <div v-for="formError in signUpErrors">
- <v-alert type="error" :value="true">
- {{ formError.message }}
- </v-alert>
- </div>
- </div>
- </v-flex>
- </v-layout>
- </form>
- </v-container>
- </v-card-text>
- </v-card>
- </v-flex>
- </v-layout>
- </v-container>
- </template>
- <script>
- import {validationMixin} from 'vuelidate'
- import {required, email, sameAs} from 'vuelidate/lib/validators'
- function strengthPassword(value) {
- const strongRegex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=(.*[\\W]){1,})(?!.*\\s)')
- return strongRegex.test(value)
- }
- export default {
- mixins: [validationMixin],
- validations: {
- username: {required},
- email: {required, email},
- password: {required, strengthPassword},
- repeatPassword: {sameAsPassword: sameAs('<password')}
- },
- data: () => ({
- username: '',
- email: '',
- password: '',
- repeatPassword: '',
- signUpErrors: '',
- existUsername: false,
- existEmail: false,
- register: false
- }),
- computed: {
- usernameErrors() {
- const errors = []
- if (!this.$v.username.$dirty) return errors
- !this.$v.username.required && errors.push('Username is required.')
- return errors
- },
- emailErrors() {
- const errors = []
- if (!this.$v.email.$dirty) return errors
- !this.$v.email.email && errors.push('Must be valid e-mail')
- !this.$v.email.required && errors.push('E-mail is required')
- return errors
- },
- passwordErrors() {
- const errors = []
- if (!this.$v.password.$dirty) return errors
- !this.$v.password.required && errors.push('Password is required')
- !this.$v.password.strengthPassword && errors.push('Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character')
- return errors
- },
- repeatPasswordErrors() {
- const errors = []
- if (!this.$v.repeatPassword.$dirty) return errors
- !this.$v.repeatPassword.sameAsPassword && errors.push('Passwords must be identical')
- return errors
- }
- },
- methods: {
- onSignup: async function () {
- try {
- const user = {username: this.username, email: this.email, password: this.password, password_confirmation: this.repeatPassword}
- const register = await this.$store.dispatch('register', user)
- if (register === true) {
- this.register = true
- } else if (register.jwt) {
- this.$router.replace({path: '/'})
- } else {
- this.signUpErrors = register
- }
- } catch (err) {
- console.log(err)
- }
- },
- onClear() {
- this.$v.$reset()
- this.username = ''
- this.email = ''
- this.password = ''
- this.repeatPassword = ''
- },
- async checkUsername() {
- this.existUsername = await this.$axios.$post('checkUsername', {username: this.username})
- },
- async checkEmail() {
- this.existEmail = await this.$axios.$post('checkEmail', {email: this.email})
- },
- redirectHome() {
- this.$router.replace({path: '/'})
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement