140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<script setup>
|
|
import { onBeforeUnmount, reactive, ref } from "vue";
|
|
import axios from "axios";
|
|
import { API_URL } from "@/config.js";
|
|
import { getError, parseError, removeError } from "@/components/request/HandleGlobalError.vue";
|
|
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
|
|
|
|
const customerFormData = reactive({
|
|
cvr: null,
|
|
contactEmail: null,
|
|
contactPhone: null
|
|
});
|
|
|
|
const deliverSuccess = ref(false);
|
|
let deliverTimeoutId;
|
|
|
|
const submitCustomer = async () => {
|
|
removeError("authRegisterCvr");
|
|
try {
|
|
await axios.post(API_URL + "/auth/register/cvr", {
|
|
cvr: customerFormData.cvr,
|
|
invoiceEmail: customerFormData.contactEmail,
|
|
contactEmail: customerFormData.contactEmail,
|
|
contactPhone: customerFormData.contactPhone,
|
|
companyPhone: customerFormData.contactPhone
|
|
});
|
|
|
|
customerFormData.contactPhone = null;
|
|
customerFormData.contactEmail = null;
|
|
customerFormData.cvr = null;
|
|
|
|
deliverSuccess.value = true;
|
|
deliverTimeoutId = setTimeout(() => {
|
|
deliverSuccess.value = false;
|
|
}, 3500);
|
|
} catch (error) {
|
|
parseError(error, "authRegisterCvr");
|
|
}
|
|
};
|
|
|
|
onBeforeUnmount(() => {
|
|
if (deliverTimeoutId) {
|
|
clearTimeout(deliverTimeoutId);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<form class="truckwash-form" @submit.prevent="() => {}" method="post">
|
|
<div class="form-field">
|
|
<label for="customer_cvr">{{ $t("customer_creation.customer.cvr_label") }}</label>
|
|
<input
|
|
id="customer_cvr"
|
|
v-model="customerFormData.cvr"
|
|
type="text"
|
|
inputmode="numeric"
|
|
autocomplete="organization"
|
|
placeholder="12345678"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="email">{{ $t("customer_creation.customer.email_label") }}</label>
|
|
<input id="email" v-model="customerFormData.contactEmail" type="email" name="email" autocomplete="email">
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="customer_phone">{{ $t("customer_creation.customer.phone_label") }}</label>
|
|
<input
|
|
id="customer_phone"
|
|
v-model="customerFormData.contactPhone"
|
|
type="text"
|
|
name="phone"
|
|
inputmode="tel"
|
|
autocomplete="tel"
|
|
placeholder="12345678"
|
|
>
|
|
</div>
|
|
|
|
<p v-if="getError('authRegisterCvr')" id="customer_creation_alert_error" class="help is-danger">
|
|
{{ getError("authRegisterCvr") }}
|
|
</p>
|
|
|
|
<p v-if="deliverSuccess" id="customer_creation_alert_success" class="help is-success">
|
|
{{ $t("customer_creation.customer.success_message") }}
|
|
</p>
|
|
|
|
<LoadButtonWhileAwait
|
|
id="customer-register-button"
|
|
class="truckwash-submit"
|
|
:disabled="!customerFormData.cvr || !customerFormData.contactPhone || !customerFormData.contactEmail"
|
|
:loadFunction="submitCustomer"
|
|
>
|
|
{{ $t("customer_creation.customer.submit") }}
|
|
</LoadButtonWhileAwait>
|
|
<slot name="additionalButtons"></slot>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.truckwash-form {
|
|
border: 1.5px solid #333;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
background-color: #fff;
|
|
position: relative;
|
|
margin-top: 35px;
|
|
height: max-content;
|
|
}
|
|
|
|
.form-field {
|
|
display: grid;
|
|
}
|
|
|
|
.form-field label {
|
|
color: #13324c;
|
|
}
|
|
|
|
input {
|
|
height: 44px;
|
|
padding: 0 12px;
|
|
border: 1.5px solid #333;
|
|
border-radius: 8px;
|
|
margin-top: 4px;
|
|
color: #13324c;
|
|
}
|
|
|
|
.truckwash-submit {
|
|
height: 48px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: #13324c;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|