mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-30 01:44:24 +00:00
update: add filecomponent to registrationForm component
This commit is contained in:
weichien00
@@ -80,81 +80,145 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="bold fs-11 all-caps muted">Account Information</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.email">
|
||||
<label>Email</label>
|
||||
<!-- <input class="form-control" v-model="parameters.email" :disabled=true> -->
|
||||
<input class="form-control" v-model="checkedEmail" :disabled=true>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col p-r-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password">
|
||||
<label>Password</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password_confirmation">
|
||||
<label>Password Confirmation</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password_confirmation">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-10">
|
||||
<i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
|
||||
<div class="col">
|
||||
<p class="bold fs-11 all-caps muted">Account Information</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
Back
|
||||
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.email">
|
||||
<label>Email</label>
|
||||
<input class="form-control" v-model="checkedEmail" :disabled=true>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-b-15">
|
||||
<div class="col p-r-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password">
|
||||
<label>Password</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password_confirmation">
|
||||
<label>Password Confirmation</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password_confirmation">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.identification_no">
|
||||
<label class="text-primary">{{ parameters.type === 0 ? 'IC/Passport' : 'SSM Registration' }} Number</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="form-control fs-12" v-model="parameters.identification_no">
|
||||
</div>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<file-input-component :validator="$v.parameters.files" v-model="parameters.files">
|
||||
<template slot="label">
|
||||
<div class="font-heading fs-11 text-primary all-caps">{{ parameters.type === 0 ? 'IC Photo' : 'SSM Registration Photo' }}</div>
|
||||
</template>
|
||||
<template slot="tips">
|
||||
<div class="row" v-show="false">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-11 text-warning m-b-10">{{ parameters.type === 0 ? 'IC': 'SSM registration'}} number shown in the photo should tally with {{ parameters.type === 0 ? 'IC': 'SSM registration'}} number provided above.</div>
|
||||
<div class="font-heading fs-11 muted">Tips on how your photo should look</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="b-a b-danger b-thick">
|
||||
<div class="absolute" style="right: -10px; top: -10px;">
|
||||
<div class="icon-thumbnail btn-rounded icon-25 bg-danger fs-12"><i class="fa fa-times text-white fs-12"></i></div>
|
||||
</div>
|
||||
<img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
|
||||
<img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-11">Covered</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="b-a b-danger b-thick">
|
||||
<div class="absolute" style="right: -10px; top: -10px;">
|
||||
<div class="icon-thumbnail btn-rounded icon-25 bg-danger fs-12"><i class="fa fa-times text-white fs-12"></i></div>
|
||||
</div>
|
||||
<img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
|
||||
<img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-11">Blurry</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="b-a b-success b-thick">
|
||||
<div class="absolute" style="right: -10px; top: -10px;">
|
||||
<div class="icon-thumbnail btn-rounded icon-25 bg-success fs-12"><i class="fa fa-check text-white fs-12"></i></div>
|
||||
</div>
|
||||
<img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
|
||||
<img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-11">This is right!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</file-input-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-10">
|
||||
<i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
|
||||
</div>
|
||||
<div class="col p-l-5">Back</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="submitForm">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="submitForm">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="step === 2000">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="bold fs-11 all-caps muted">Account Information</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.email">
|
||||
<label>Email</label>
|
||||
<input class="form-control" v-model="parameters.email">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col p-r-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password">
|
||||
<label>Password</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.password_confirmation">
|
||||
<label>Password Confirmation 1</label>
|
||||
<input class="form-control" type="password" v-model="parameters.password_confirmation">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,6 +251,8 @@
|
||||
phone: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
identification_no:'',
|
||||
files: []
|
||||
},
|
||||
status:{
|
||||
direction:null,
|
||||
|
||||
Reference in New Issue
Block a user