mygit/integratedhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply patch [skip ci]

Browse Source
This commit is contained in:
open-swe-dev-andrinoid[bot] 2026-01-22 00:30:18 +00:00
parent 030f995082
commit 894b046f56
1 changed files with 231 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
islands/AddPaymentMethodModal.tsx Normal file
View 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>
);
}