exchange/resources/assets/js/pages/auth/register.vue

<template>
	<div class="container">
		<div class="row">
			<div class="col-lg-8 m-auto">
				<card :title="$t('register')">
					<form @submit.prevent="register" @keydown="form.onKeydown($event)">
						<!-- Marking -->
						<div class="form-group row" :class="{'has-error': errors.has('marking') }">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
							<div class="col-md-7">
								<el-input v-model="form.marking" v-validate="'required|max:255'" type="text" name="marking" placeholder="Marking Number">
								</el-input>
								<span class="text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
							</div>
						</div>

						<!-- Email -->
						<div class="form-group row" :class="{'has-error': errors.has('email') }">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
							<div class="col-md-7">
								<el-input v-model="form.email" v-validate="'required|max:255'" type="email" name="email" placeholder="Email">
								</el-input>
								<span class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</span>
							</div>
						</div>

						<!-- Password -->
						<div class="form-group row" :class="{'has-error': errors.has('password') }">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
							<div class="col-md-7">
								<el-input v-if="password_visible" v-model="form.password" v-validate="'required|min:6|max:255'" type="text" name="password" placeholder="Password">
									<template slot="append">
										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"></i></el-button>
									</template>
								</el-input>
								<el-input v-else v-model="form.password" v-validate="'required|min:6|max:255'" type="password" name="password" placeholder="Password">
									<template slot="append">
										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"></i></el-button>
									</template>
								</el-input>
								<span class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</span>
							</div>
						</div>

						<!-- Password Confirmation -->
						<div class="form-group row" :class="{'has-error': errors.has('confirm_password') }">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
							<div class="col-md-7">
								<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="text" name="password_confirmation" placeholder="Confirm Password">
									<template slot="append">
										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"></i></el-button>
									</template>
								</el-input>
								<el-input v-else v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="password" name="password_confirmation" placeholder="Confirm Password">
									<template slot="append">
										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"></i></el-button>
									</template>
								</el-input>
								<span class="text-danger" v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}<br/></span>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-7 offset-md-3 d-flex">
								<!-- Submit Button -->
								<v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
									{{ $t('register') }}
								</v-button>

								<!-- GitHub Register Button -->
								<login-with-github/>
							</div>
						</div>
					</form>
				</card>
			</div>
		</div>
	</div>
</template>

<script>
import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub'
import store from '~/store'
import Vue from 'vue'

export default {
	middleware: 'guest',

	components: {
		LoginWithGithub
	},

	metaInfo () {
		return { title: this.$t('register') }
	},

	data: () => ({
		form: new Form({
			marking:'',
			email: '',
			password: '',
			password_confirmation: ''
		}),
		email : '',
		password_visible : false,
		password_confirmation_visible : false
	}),


	methods: {
		async register () {
			var token
			var data 
			// Register the user.
			await this.form.post('/api/register')
			.then( (response) => {
				 data = response.data
			    this.$message({
				message: "Success. Logging in..",
				type: 'success'
				})
			})
			.catch( (error) => {
				console.log(error)
			    this.$message({
				message: error.response.data.message,
				type: 'error'
				})
			}
			)

			
			await this.form.post('/api/login')
			.then( (response) => {
				console.log(response.data)
				token = response.data.token
			})
			.catch( (error) => {
				console.log(error)
			    this.$message({
				message: error.response.data.message,
				type: 'error'
				})
			}
			)

			console.log(token)
			// Save the token.
			this.$store.dispatch('auth/saveToken', { token } )

			// Update the user.
			await this.$store.dispatch('auth/updateUser', { user: data })

			// Redirect home.
			if (store.getters['auth/user'].role === 'admin') {
				this.$router.push({ name: 'admin.home' })
			} else {
				this.$router.push({ name: 'home' })
			}

		}
	}
}
</script>