Register.vue

<template>
    <div>
        <HeaderComponent></HeaderComponent>
        <!-- BEGIN HEADER -->
        <header class="section-header header-sm t-dark">
            <div class="container top-element">
                <div class="row top-text">
                    <i class="nc-icon-outline users_single-01 header-icon"></i>
                    <h1 class="header-title t-important m-b-0">{{ $root.trans.translate("register") }}</h1>
                    <p class="subtitle">{{ $root.trans.translate("createYourAccountInFewSeconds") }}</p>
                </div>
            </div>
        </header>
        <!-- END HEADER -->

        <!-- BEGIN REGISTER -->
        <div class="section container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-xs-10 col-lg-offset-3 col-md-offset-2 col-xs-offset-1">
                    <div class="m-b-100">
                        <form class="form-register">
                            <div class="form-group required">
                                <label>{{ $root.trans.translate("email") }}</label>
                                <div class="prepend-icon">
                                    <p :class="{ 'control': true }">
                                        <input v-validate="'required|email|emailAlreadyExists'"
                                               :class="{
                                                    'form-control input-lg': true,
                                                    'input': true,
                                                    'is-danger': errors.has('email')
                                                    }"
                                               name="email" type="email"
                                               v-bind:placeholder="$root.trans.translate('enterYourEmail')"
                                               v-model="email"
                                        />
                                        <i class="nc-icon-outline ui-1_email-83"></i>
                                        <span v-show="errors.has('email')" class="help-block with-errors">
                                                {{ errors.first('email') }}
                                            </span>
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 required">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <label>{{ $root.trans.translate("password") }}</label>
                                            <div class="prepend-icon">
                                                <p :class="{ 'control': true }">
                                                    <input v-validate="'required|min:6'"
                                                           :class="{
                                                            'form-control input-lg': true,
                                                            'input': true,
                                                            'is-danger': errors.has('password')
                                                           }"
                                                           name="password" type="password" v-model="password"
                                                           v-bind:placeholder="$root.trans.translate('enterYourPassword')"
                                                    />
                                                    <i class="nc-icon-outline ui-1_lock-circle"></i>
                                                    <span v-show="errors.has('password')"
                                                          class="help-block with-errors">
                                                        {{ errors.first('password') }}
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 required">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <label>{{ $root.trans.translate("repeatPassword") }}</label>
                                            <div class="prepend-icon">
                                                <p :class="{ 'control': true }">
                                                    <input v-validate="'confirmed:password'"
                                                           :class="{
                                                                'form-control input-lg': true,
                                                                'input': true,
                                                                'is-danger': errors.has('repeatPassword')
                                                           }"
                                                           name="repeatPassword" type="password"
                                                           v-model="repeatPassword"
                                                           v-bind:placeholder="$root.trans.translate('enterYourRepeatPassword')"
                                                    />
                                                    <i class="nc-icon-outline ui-1_lock-circle"></i>
                                                    <span v-show="errors.has('repeatPassword')"
                                                          class="help-block with-errors">
                                                        {{ errors.first('repeatPassword') }}
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6 required">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("firstName") }}*</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required|alpha'"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('firstName')
                                                   }"
                                                       name="firstName" type="text" v-model="firstName"
                                                       placeholder="John"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('firstName')" class="help-block with-errors">
                                                    {{ errors.first('firstName') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("lastName") }}*</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required|alpha'"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('lastName')
                                                   }"
                                                       name="lastName" type="text" v-model="lastName"
                                                       placeholder="Doe"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('firstName')" class="help-block with-errors">
                                                    {{ errors.first('lastName') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 required">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("address") }}*</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required'"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('lastName')
                                                   }"
                                                       name="address" type="text" v-model="address"
                                                       placeholder="Happy street 1"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('address')" class="help-block with-errors">
                                                    {{ errors.first('address') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("postNumber") }}*</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required'"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('postNumber')
                                                   }"
                                                       name="postNumber" type="text" v-model="postNumber"
                                                       placeholder="10100"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('postNumber')" class="help-block with-errors">
                                                    {{ errors.first('postNumber') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("city") }}*</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required'"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('city')
                                                   }"
                                                       name="city" type="text" v-model="city"
                                                       placeholder="New york"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('city')" class="help-block with-errors">
                                                    {{ errors.first('city') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("country") }}*</label>
                                        <select class="form-control" data-container-class="input-lg" data-search="true"
                                                v-model="country">
                                            <option v-for="c in countries" v-bind:value="c.country">
                                                {{c.country}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("isCompany") }}</label>
                                        <input type="checkbox" v-model="isCompanyValue" v-on:change="isCompany($event)">
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-show="showDiv">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("company") }}</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="''"
                                                       :class="{
                                                        'form-control input-lg': true,
                                                        'input': true,
                                                        'is-danger': errors.has('company')
                                                   }"
                                                       name="company" type="text" v-model="company"
                                                       placeholder="John Doe L.T.E."
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('company')" class="help-block with-errors">
                                                    {{ errors.first('company') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{ $root.trans.translate("taxNumber") }}</label>
                                        <div class="prepend-icon">
                                            <p :class="{ 'control': true }">
                                                <input v-validate="'required'"
                                                       :class="{
                                                       'form-control input-lg': true, 'input': true,
                                                       'is-danger': errors.has('taxNumber')
                                                       }"
                                                       name="taxNumber" type="text" v-model="taxNumber"
                                                       placeholder="SI45678148"
                                                />
                                                <i class="nc-icon-outline users_single-03"></i>
                                                <span v-show="errors.has('taxNumber')" class="help-block with-errors">
                                                    {{ errors.first('taxNumber') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="checkbox">
                                <input type="checkbox" id="terms" v-model="iAggre">
                                <label for="terms">{{ $root.trans.translate("iAgreeWithTerms") }}</label>
                            </div>
                            <div class="m-t-20">
                                <button type="submit" id="submit-form" @click="register($event)"
                                        class="btn btn-lg btn-important btn-primary btn-block"
                                        :disabled="errors.any() || !isValidEmail || !isComplete">
                                    {{ $root.trans.translate("createMyAccount") }}
                                </button>
                                <flash></flash>
                            </div>
                        </form>
                        <p class="m-t-20">{{ $root.trans.translate("alreadyHaveAnAccount") }}?
                            <router-link to="/login">
                                <strong>{{ $root.trans.translate("registerLogin") }}</strong>
                            </router-link>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END REGISTER -->
        <FooterComponent></FooterComponent>
    </div>
</template>

<script>
    import HeaderComponent from './HeaderComponent.vue'
    import FooterComponent from './FooterComponent.vue'

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import VeeValidate from 'vee-validate';
    import Flash from './Flash.vue'
    import VueLocalStorage from 'vue-localstorage'

    Vue.use(VeeValidate, VueAxios, axios);
    Vue.use(VueLocalStorage, {
        name: 'ls',
        bind: true //created computed members from your variable declarations
    });

    export default {
        name: 'Register',
        components: {
            'HeaderComponent': HeaderComponent,
            'FooterComponent': FooterComponent,
            'Flash': Flash
        },
        data() {
            return {
                // prepare variables for registration form
                firstName: '',
                lastName: '',
                email: '',
                password: '',
                repeatPassword: '',
                address: '',
                postNumber: '',
                city: '',
                country: '',
                isCompanyValue: false,
                company: '',
                taxNumber: '',
                showDiv: false,
                iAggre: false,
                // prepare countries for drop down
                countries: {}
            }
        },
        methods: {
            // check if you are logged in
            isLoggedIn() {
                let token = this.$jwt.getToken();
                if (token) {
                    let jwtPayloadDecoder = require('jwt-payload-decoder');
                    let payload = jwtPayloadDecoder.getPayload(token);
                    if (payload.loggedIn) {
                        return true;
                    } else return false;
                } else return false;

            },
            register() {

            },
            getCountries() {
                this.$http.get(this.$apiUrl + `rest/api/public/Country/Country`)
                    .then((response) => {
                        this.countries = response.data.data
                    });
            },
            isCompany() {
                this.showDiv = false;
                if (this.isCompanyValue) {
                    this.showDiv = true;
                }
            }
        },
        mounted: function () {
            this.getCountries();
        },
        create: function () {
            // Check if user logged in. If so redirect to home
            if (this.isLoggedIn()) {
                this.$router.push('/');
            }
        },
        computed: {
            // Form validation for contact form
            isComplete: function () {
                return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
                    && this.city && this.country && this.iAggre;
            },
            isValidEmail: function () {
                var re = /\S+@\S+\.\S+/;
                return re.test(this.email);
            }
        },
        created() {
            this.$validator.extend('emailAlreadyExists', {
                getMessage: field => field + 'Email already exists.',
                validate: value => {
                    let params = new URLSearchParams();
                    params.append('email', value);
                    this.$http.post(this.$apiUrl + `rest/api/public/User/checkIfUserExists`, params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    })
                }
            })
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>