Apply patch [skip ci]
This commit is contained in:
open-swe-dev-andrinoid[bot]
parent
030f995082
commit
894b046f56
231
islands/AddPaymentMethodModal.tsx
Normal file
231
islands/AddPaymentMethodModal.tsx
Normal file
@ -0,0 +1,231 @@
|
||||
import { useCallback, useRef, useState } from "preact/hooks";
|
||||
import {
|
||||
encryptDataWithStoredPassword,
|
||||
getEncryptionPassword,
|
||||
} from "../helpers.ts";
|
||||
|
||||
interface AddPaymentMethodModalProps {
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export default function AddPaymentMethodModal(
|
||||
{ userId }: AddPaymentMethodModalProps,
|
||||
) {
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const encryptedRoutingNumberRef = useRef<HTMLInputElement>(null);
|
||||
const encryptedAccountNumberRef = useRef<HTMLInputElement>(null);
|
||||
const bankNameRef = useRef<HTMLInputElement>(null);
|
||||
const accountTypeRef = useRef<HTMLSelectElement>(null);
|
||||
const routingNumberRef = useRef<HTMLInputElement>(null);
|
||||
const accountNumberRef = useRef<HTMLInputElement>(null);
|
||||
const isDefaultRef = useRef<HTMLInputElement>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Only encrypt on submit, not on every keystroke - prevents V8 overload
|
||||
const handleEncryptData = useCallback(async () => {
|
||||
// Get current values from the form inputs
|
||||
const routingNumber = routingNumberRef.current?.value || "";
|
||||
const accountNumber = accountNumberRef.current?.value || "";
|
||||
|
||||
// Check if encryption is available and encrypt sensitive fields
|
||||
if (userId && (routingNumber || accountNumber)) {
|
||||
const encryptionPassword = getEncryptionPassword(userId);
|
||||
|
||||
if (encryptionPassword) {
|
||||
try {
|
||||
// Encrypt routing number
|
||||
if (routingNumber && encryptedRoutingNumberRef.current) {
|
||||
const encryptedRoutingNumber = await encryptDataWithStoredPassword(
|
||||
userId,
|
||||
routingNumber,
|
||||
);
|
||||
if (encryptedRoutingNumber) {
|
||||
encryptedRoutingNumberRef.current.value = encryptedRoutingNumber;
|
||||
}
|
||||
}
|
||||
|
||||
// Encrypt account number
|
||||
if (accountNumber && encryptedAccountNumberRef.current) {
|
||||
const encryptedAccountNumber = await encryptDataWithStoredPassword(
|
||||
userId,
|
||||
accountNumber,
|
||||
);
|
||||
if (encryptedAccountNumber) {
|
||||
encryptedAccountNumberRef.current.value = encryptedAccountNumber;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to encrypt payment method data:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [userId]);
|
||||
|
||||
const handleAddClick = async () => {
|
||||
// Validate form
|
||||
const bankName = bankNameRef.current?.value?.trim() || "";
|
||||
const accountType = accountTypeRef.current?.value || "";
|
||||
const routingNumber = routingNumberRef.current?.value?.trim() || "";
|
||||
const accountNumber = accountNumberRef.current?.value?.trim() || "";
|
||||
|
||||
if (!bankName || !accountType || !routingNumber || !accountNumber) {
|
||||
alert("Please fill in all required fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (routingNumber.length !== 9) {
|
||||
alert("Routing number must be 9 digits.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (accountNumber.length < 4) {
|
||||
alert("Account number must be at least 4 digits.");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
// Encrypt data before submission
|
||||
await handleEncryptData();
|
||||
|
||||
// Clear plaintext fields if encryption was successful
|
||||
if (userId && (routingNumber || accountNumber)) {
|
||||
const encryptionPassword = getEncryptionPassword(userId);
|
||||
|
||||
if (encryptionPassword) {
|
||||
if (routingNumberRef.current) routingNumberRef.current.value = "";
|
||||
if (accountNumberRef.current) accountNumberRef.current.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
// Submit the form
|
||||
setTimeout(() => {
|
||||
if (formRef.current) {
|
||||
formRef.current.submit();
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="bg-white rounded-lg p-8 shadow-lg max-w-md w-full">
|
||||
<h3 class="text-xl font-bold mb-4">Add Payment Method</h3>
|
||||
<form
|
||||
ref={formRef}
|
||||
method="POST"
|
||||
action="/api/create/payment_method"
|
||||
class="flex flex-col gap-4"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="sender"
|
||||
value="/tenant/payment-methods"
|
||||
/>
|
||||
<input
|
||||
ref={encryptedRoutingNumberRef}
|
||||
type="hidden"
|
||||
name="routing_number_encrypted"
|
||||
value=""
|
||||
/>
|
||||
<input
|
||||
ref={encryptedAccountNumberRef}
|
||||
type="hidden"
|
||||
name="account_number_encrypted"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="bank_name" class="text-sm font-medium text-gray-700">
|
||||
Bank Name
|
||||
</label>
|
||||
<input
|
||||
ref={bankNameRef}
|
||||
class="border rounded px-3 py-2"
|
||||
placeholder="e.g., Chase Bank"
|
||||
name="bank_name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="account_type" class="text-sm font-medium text-gray-700">
|
||||
Account Type
|
||||
</label>
|
||||
<select
|
||||
ref={accountTypeRef}
|
||||
class="w-full border p-2 rounded"
|
||||
name="account_type"
|
||||
required
|
||||
>
|
||||
<option value="">Select account type</option>
|
||||
<option value="checking">Checking</option>
|
||||
<option value="savings">Savings</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="routing_number" class="text-sm font-medium text-gray-700">
|
||||
Routing Number
|
||||
</label>
|
||||
<input
|
||||
ref={routingNumberRef}
|
||||
class="border rounded px-3 py-2"
|
||||
placeholder="9-digit routing number"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{9}"
|
||||
maxLength={9}
|
||||
name="routing_number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="account_number" class="text-sm font-medium text-gray-700">
|
||||
Account Number
|
||||
</label>
|
||||
<input
|
||||
ref={accountNumberRef}
|
||||
class="border rounded px-3 py-2"
|
||||
placeholder="Account number"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]+"
|
||||
minLength={4}
|
||||
name="account_number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
ref={isDefaultRef}
|
||||
id="is_default"
|
||||
name="is_default"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label for="is_default" class="text-sm text-gray-700">
|
||||
Set as default payment method
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex gap-2 justify-end mt-4">
|
||||
<a
|
||||
href="/tenant/payment-methods"
|
||||
class="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-center inline-block"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddClick}
|
||||
class="px-4 py-2 rounded bg-green-600 text-white hover:bg-green-700"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Adding..." : "Add"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user