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">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
							<div class="col-md-7">
								<input style="text-transform: uppercase;" v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" @input="forceUppercase($event, form, 'marking')" type="marking" name="marking">
								<has-error :form="form" field="marking"/>
							</div>
						</div>

						<!-- Email -->
						<div class="form-group row">
							<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
							<div class="col-md-7">
								<input v-model="form.email"  :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email" placeholder="Email">
								<has-error :form="form" field="email"/>
							</div>
						</div>

						<!-- Password -->
						<div class="form-group row">
							<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" :class="{ 'is-invalid': form.errors.has('password') }" 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>
									<has-error :form="form" field="password"/>
								</el-input>
								<el-input v-else v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" 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>
									<has-error :form="form" field="password"/>
								</el-input>
								
							</div>
						</div>

						<!-- Password Confirmation -->
						<div class="form-group row">
							<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" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" 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>
									<has-error :form="form" field="password_confirmation"/>
								</el-input>
								<el-input v-else v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" 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>
									<has-error :form="form" field="password_confirmation"/>
								</el-input>
							</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="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: {
		forceUppercase(e, o, prop) {
				const start = e.target.selectionStart;
				e.target.value = e.target.value.toUpperCase();
				this.$set(o, prop, e.target.value);
				e.target.setSelectionRange(start, start);
		},
		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>