Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working log in/route guard

Browse Source
This commit is contained in:
Edwin Eames
2025-09-04 08:03:24 -04:00
parent 992a1a217d
commit dc1ee95827
37 changed files with 1283 additions and 1191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/card/editcard.vue
View File

@@ -36,8 +36,8 @@
<h3 class="text-xl font-bold mb-4">Editing Card</h3>
<div v-if="card.id" class="space-y-2">
<p><strong class="font-semibold">Card Type:</strong> {{ card.type_of_card }}</p>
<p><strong class="font-semibold">Card Number:</strong> **** **** **** {{ card.last_four_digits }}</p>
<p><strong class="font-semibold">Card ID:</strong> {{ card.id }}</p>
<p><strong class="font-semibold">Card Number:</strong> {{ card.card_number }}</p>
</div>
<div v-else class="text-gray-400">Loading card details...</div>
</div>
@@ -52,14 +52,14 @@
<!-- Name on Card -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Name on Card</span></label>
<input v-model="CardForm.name_on_card" type="text" placeholder="John M Doe" class="input input-bordered input-sm w-full" />
<input v-model="CardForm.name_on_card" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.name_on_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<!-- Card Number -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Card Number</span></label>
<input v-model="CardForm.card_number" type="text" placeholder="4242..." class="input input-bordered input-sm w-full" />
<input v-model="CardForm.card_number" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.card_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
@@ -82,7 +82,7 @@
<!-- Security Number (CVV) -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">CVV</span></label>
<input v-model="CardForm.security_number" type="text" placeholder="123" class="input input-bordered input-sm w-full" />
<input v-model="CardForm.security_number" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.security_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
@@ -102,7 +102,7 @@
<!-- Billing Zip Code -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Billing Zip Code</span></label>
<input v-model="CardForm.zip_code" type="text" placeholder="01234" class="input input-bordered input-sm w-full" />
<input v-model="CardForm.zip_code" type="text" placeholder="" class="input input-bordered input-sm w-full" />
</div>
<!-- Main Card Checkbox -->
@@ -188,53 +188,59 @@ export default defineComponent({
axios.get(path, { headers: authHeader() })
.then((response: any) => { this.customer = response.data; });
},
getCard(card_id: any) {
const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
axios.get(path, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
this.card = response.data; // Store original details for display
// Populate the flat form object for editing
this.CardForm.name_on_card = response.data.name_on_card;
this.CardForm.expiration_month = response.data.expiration_month;
this.CardForm.expiration_year = response.data.expiration_year;
this.CardForm.type_of_card = response.data.type_of_card;
this.CardForm.security_number = response.data.security_number;
this.CardForm.main_card = response.data.main_card;
this.CardForm.card_number = response.data.card_number;
this.CardForm.zip_code = response.data.zip_code;
if (response.data.user_id) {
this.getCustomer(response.data.user_id);
}
});
},
editCard(payload: any) {
const path = `${import.meta.env.VITE_BASE_URL}/payment/card/edit/${this.$route.params.id}`;
// The backend expects 'card_name', but our form now uses 'name_on_card'.
// We must create a new payload that matches the backend's expectation.
const backendPayload = {
...payload,
card_name: payload.name_on_card,
};
delete backendPayload.name_on_card; // Clean up the object
axios.put(path, backendPayload, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
if (response.data.ok) {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
} else {
console.error("Failed to edit card:", response.data.error);
}
});
},
onSubmit() {
this.v$.$validate();
if (!this.v$.$error) {
this.editCard(this.CardForm);
} else {
console.log("Form validation failed.");
getCard(card_id: any) {
const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
axios.get(path, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
this.card = response.data; // Store original details for display
// Populate the flat form object for editing
this.CardForm.name_on_card = response.data.name_on_card;
// --- FIX IS HERE ---
// Convert the month number (e.g., 8) to a zero-padded string ("08") to match the <option> value.
this.CardForm.expiration_month = String(response.data.expiration_month).padStart(2, '0');
// Convert the year number (e.g., 2025) to a string ("2025") for consistency.
this.CardForm.expiration_year = String(response.data.expiration_year);
// --- END FIX ---
this.CardForm.type_of_card = response.data.type_of_card;
this.CardForm.security_number = response.data.security_number;
this.CardForm.main_card = response.data.main_card;
this.CardForm.card_number = response.data.card_number;
this.CardForm.zip_code = response.data.zip_code;
if (response.data.user_id) {
this.getCustomer(response.data.user_id);
}
},
});
},
editCard(payload: any) {
const path = `${import.meta.env.VITE_BASE_URL}/payment/card/edit/${this.$route.params.id}`;
// REMOVE the payload manipulation. Send the form data directly.
// The 'payload' object (which is this.CardForm) is already in the correct format.
axios.put(path, payload, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
if (response.data.ok) {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
} else {
// You should notify the user here as well
console.error("Failed to edit card:", response.data.error);
}
})
.catch(console.log("error"));
},
onSubmit() {
this.v$.$validate();
if (!this.v$.$error) {
this.editCard(this.CardForm); // This is correct, it sends the form object.
} else {
console.log("Form validation failed.");
}
},
},
});
</script>