mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
add validation of registeration form
This commit is contained in:
Too
@@ -46,6 +46,7 @@ class RegisterController extends Controller
|
||||
protected function validator(array $data)
|
||||
{
|
||||
return Validator::make($data, [
|
||||
'marking' => 'required|max:255|unique:markings'
|
||||
'email' => 'required|email|max:255|unique:users',
|
||||
'password' => 'required|min:6|confirmed',
|
||||
]);
|
||||
|
||||
Generated
+3809
File diff suppressed because it is too large
Load Diff
+3
-3
@@ -26,15 +26,15 @@
|
||||
"npm": "^6.0.1",
|
||||
"popper.js": "^1.14.1",
|
||||
"sweetalert2": "^7.15.1",
|
||||
"vee-validate": "^2.1.0-beta.5",
|
||||
"vform": "^1.0.0",
|
||||
"vue": "^2.5.16",
|
||||
"vue-i18n": "^7.6.0",
|
||||
"vue-loader": "14.2.2",
|
||||
"vue-loader": "^14.2.2",
|
||||
"vue-meta": "^1.4.4",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.0.1",
|
||||
"vuex-router-sync": "^5.0.0",
|
||||
"webpack": "^3.11.0"
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
|
||||
|
||||
@@ -1,136 +1,155 @@
|
||||
<template>
|
||||
<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">
|
||||
<el-input v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" type="text" name="marking" placeholder="Marking Number">
|
||||
</el-input>
|
||||
<has-error :form="form" field="marking"/>
|
||||
<span v-if="missingMarking()">
|
||||
* Please contact vendor to get your marking
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span class="text-danger" v-if="MissingMarking()">
|
||||
Please contact vendor to get your marking
|
||||
</span>
|
||||
</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">
|
||||
<el-input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" type="email" name="email" placeholder="Email">
|
||||
</el-input>
|
||||
<has-error :form="form" field="email"/>
|
||||
</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|email|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">
|
||||
<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>
|
||||
</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>
|
||||
</el-input>
|
||||
<has-error :form="form" field="password"/>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</el-input>
|
||||
<has-error :form="form" field="password_confirmation"/>
|
||||
</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>
|
||||
<span class="text-danger" v-if="PasswordNotMatch()">
|
||||
The password does not match
|
||||
</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">
|
||||
{{ $t('register') }}
|
||||
</v-button>
|
||||
|
||||
<!-- GitHub Register Button -->
|
||||
<login-with-github/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7 offset-md-3 d-flex">
|
||||
<!-- Submit Button -->
|
||||
<v-button :loading="form.busy">
|
||||
{{ $t('register') }}
|
||||
</v-button>
|
||||
|
||||
<!-- GitHub Register Button -->
|
||||
<login-with-github/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Form from 'vform'
|
||||
import LoginWithGithub from '~/components/LoginWithGithub'
|
||||
import store from '~/store'
|
||||
import Vue from 'vue'
|
||||
import VeeValidate from 'vee-validate';
|
||||
Vue.use(VeeValidate);
|
||||
|
||||
export default {
|
||||
middleware: 'guest',
|
||||
middleware: 'guest',
|
||||
|
||||
components: {
|
||||
LoginWithGithub
|
||||
},
|
||||
components: {
|
||||
LoginWithGithub
|
||||
},
|
||||
|
||||
metaInfo () {
|
||||
return { title: this.$t('register') }
|
||||
},
|
||||
metaInfo () {
|
||||
return { title: this.$t('register') }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
form: new Form({
|
||||
marking:'',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: ''
|
||||
}),
|
||||
password_visible : false,
|
||||
password_confirmation_visible : false
|
||||
}),
|
||||
data: () => ({
|
||||
form: new Form({
|
||||
marking:'',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: ''
|
||||
}),
|
||||
email : '',
|
||||
formError: [],
|
||||
password_visible : false,
|
||||
password_confirmation_visible : false
|
||||
}),
|
||||
|
||||
|
||||
methods: {
|
||||
async register () {
|
||||
// Register the user.
|
||||
const { data } = await this.form.post('/api/register')
|
||||
methods: {
|
||||
async register () {
|
||||
this.$validator.validateAll();
|
||||
if (this.errors.any() || PasswordNotMatch()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Log in the user.
|
||||
const { data: { token } } = await this.form.post('/api/login')
|
||||
// Register the user.
|
||||
const { data } = await this.form.post('/api/register')
|
||||
|
||||
// Save the token.
|
||||
this.$store.dispatch('auth/saveToken', { token })
|
||||
// Log in the user.
|
||||
const { data: { token } } = await this.form.post('/api/login')
|
||||
|
||||
// Update the user.
|
||||
await this.$store.dispatch('auth/updateUser', { user: data })
|
||||
// Save the token.
|
||||
this.$store.dispatch('auth/saveToken', { token })
|
||||
|
||||
// Redirect home.
|
||||
if (store.getters['auth/user'].role === 'admin') {
|
||||
this.$router.push({ name: 'admin.home' })
|
||||
} else {
|
||||
this.$router.push({ name: 'home' })
|
||||
}
|
||||
},
|
||||
missingMarking:function(){
|
||||
return this.form.marking === undefined || this.form.marking === '';
|
||||
}
|
||||
}
|
||||
// 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' })
|
||||
}
|
||||
},
|
||||
MissingMarking:function(){
|
||||
return this.form.marking === undefined || this.form.marking === '';
|
||||
},
|
||||
PasswordNotMatch:function(){
|
||||
return !(this.form.password === this.form.password_confirmation);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user