Business-credit-asistant/resources/js/components/partials/CreateCreditReportAccount.vue

<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>