initial commit
This commit is contained in:
213
resources/js/components/partials/CreateCreditReportAccount.vue
Normal file
213
resources/js/components/partials/CreateCreditReportAccount.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>Creditzombies</h3>
|
||||
</div>
|
||||
<Step step="3"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<form @submit.prevent autocomplete="off" class="form-element was-validated form-element--login" method="post"
|
||||
novalidate="novalidate">
|
||||
<div class="main active">
|
||||
<TopArea/>
|
||||
<div class="text">
|
||||
<h2>Please input your smart credit email and password</h2>
|
||||
<p>Let's start with some basic info.</p>
|
||||
</div>
|
||||
<div class="text" v-if="isButtonDisabled">
|
||||
<p style="color:red;text-align:center">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-if="errorMsg.message">
|
||||
<p style="color:red;text-align:center">{{errorMsg.message[0]}}</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('fname')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.fname"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.first_name}"
|
||||
placeholder="First Name"
|
||||
type="text"
|
||||
v-model="formData.first_name"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.first_name"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('lname')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.lname"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.last_name}"
|
||||
placeholder="Last Name"
|
||||
type="text"
|
||||
v-model="formData.last_name"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.last_name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('email')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.email"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.email}"
|
||||
placeholder="Email"
|
||||
type="text"
|
||||
v-model="formData.email"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.password}"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" style="text-align: center">
|
||||
<button :disabled="isButtonDisabled" @click="importCreditReport" type="button" value="Next" class="next_button">Import Credit Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import useFormValidation from "@/Validation/useFormValidation";
|
||||
import useSubmitButtonState from "@/Validation/useSubmitButtonState";
|
||||
import register from "@/Api/register";
|
||||
import {inject, onMounted, reactive, ref} from "vue";
|
||||
import state from "../../helper/state";
|
||||
import {getPackageId, getUserEmail, getUserId, setStep} from "../../helper";
|
||||
import router from "../../router";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const swal = inject('$swal');
|
||||
let formData = ref({
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"email": "",
|
||||
"password": ""
|
||||
})
|
||||
|
||||
let inputReadOnly = ref({
|
||||
"fname":true,
|
||||
"lname":true,
|
||||
"email":true
|
||||
})
|
||||
const stateList = state;
|
||||
|
||||
const errorMsg = reactive({
|
||||
"message":""
|
||||
})
|
||||
let success = {}
|
||||
|
||||
let {errors} = useFormValidation();
|
||||
// let {isButtonDisabled} = useSubmitButtonState(formData, errors);
|
||||
let isButtonDisabled = ref(true)
|
||||
const validateInput = () =>{
|
||||
let f = formData.value;
|
||||
let count = 0;
|
||||
isButtonDisabled.value = true
|
||||
if(f.first_name){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.last_name){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.email){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.password){
|
||||
count++
|
||||
}
|
||||
|
||||
if(count == 4){
|
||||
isButtonDisabled.value = false
|
||||
}
|
||||
|
||||
}
|
||||
const editable = (value) =>{
|
||||
inputReadOnly.value[value] = !inputReadOnly.value[value]
|
||||
}
|
||||
const importCreditReport = async () => {
|
||||
if(isButtonDisabled){
|
||||
const params = {
|
||||
"email":formData.value.email,
|
||||
"password":formData.value.password,
|
||||
"package_id":getPackageId(),
|
||||
"user_id":getUserId()
|
||||
}
|
||||
const response = await register.importCreditReportByEmail(params)
|
||||
if(response.status_code == 100){
|
||||
router.push({name:"success"})
|
||||
}else{
|
||||
swal(
|
||||
response.message,
|
||||
"",
|
||||
"warning"
|
||||
)
|
||||
}
|
||||
console.log('response',response)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log('errors',errors,isButtonDisabled)
|
||||
|
||||
onMounted(async ()=>{
|
||||
let email = getUserEmail()
|
||||
const userInfo = await register.getUserInfo()
|
||||
if(userInfo.status_code == 100){
|
||||
formData.value = userInfo.data
|
||||
}
|
||||
})
|
||||
console.log('count',isButtonDisabled)
|
||||
console.log('userInfo',formData)
|
||||
return {validateInput,editable,inputReadOnly, formData,errors,importCreditReport, isButtonDisabled,stateList,errorMsg };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.next_button{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container .card {
|
||||
height: 550px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user