From 8c2773740406c26d72d9b5f845085f1907f43327 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 6 May 2025 10:59:42 -0700
Subject: [PATCH] update FramelessButton, PhoneInput, TextInput

- FramelessButton: use cursor-pointer
- PhoneInput: add setCountryByIP with geo lookup
- TextInput: add $bindable ref property
---
 src/lib/FramelessButton.svelte |  2 +-
 src/lib/PhoneInput.svelte      | 14 ++++++++++++++
 src/lib/TextInput.svelte       | 17 +++++++++++------
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/lib/FramelessButton.svelte b/src/lib/FramelessButton.svelte
index 2a42c1f..dd62e83 100644
--- a/src/lib/FramelessButton.svelte
+++ b/src/lib/FramelessButton.svelte
@@ -23,7 +23,7 @@
 
 <button
 	class={[
-		'text-accent hover:text-primary inline-flex items-center gap-1.5 transition-colors',
+		'text-accent hover:text-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
 		disabled && 'pointer-events-none cursor-not-allowed opacity-50'
 	]}
 	{onclick}
diff --git a/src/lib/PhoneInput.svelte b/src/lib/PhoneInput.svelte
index f760394..3c3e172 100644
--- a/src/lib/PhoneInput.svelte
+++ b/src/lib/PhoneInput.svelte
@@ -63,6 +63,20 @@
 		}
 	};
 
+	// setCountryByIP queries ip-api.com for user location based on IP
+	export const setCountryByIP = async (ip: string) => {
+		const res = await fetch(`http://ip-api.com/json/${ip}`);
+		const locationData = await res.json();
+		let country = 'CA'; // default to Canada
+		if (locationData.status !== 'fail') {
+			const { countryCode } = locationData;
+			country = countryCode;
+			console.log('updating country code according to IP', country);
+		}
+
+		setCountryByISO(country);
+	};
+
 	// set the default country based on the provided ISO code
 	if (defaultISO) {
 		setCountryByISO(defaultISO);
diff --git a/src/lib/TextInput.svelte b/src/lib/TextInput.svelte
index 617d5cf..93c230b 100644
--- a/src/lib/TextInput.svelte
+++ b/src/lib/TextInput.svelte
@@ -10,7 +10,8 @@
 		placeholder,
 		type,
 		validate: validateOpts,
-		invalidMessage
+		invalidMessage = 'Field is required',
+		ref = $bindable<HTMLInputElement | null>(null)
 	}: {
 		name: string;
 		label?: string;
@@ -19,6 +20,7 @@
 		type?: HTMLInputElement['type'];
 		validate?: ValidatorOptions;
 		invalidMessage?: string;
+		ref?: HTMLInputElement | null;
 	} = $props();
 
 	let valid: boolean = $state(true);
@@ -34,15 +36,18 @@
 		{name}
 		{type}
 		bind:value
+		bind:ref
 		validate={validateOpts}
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
 	/>
 
-	<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-		<Label for={name} error>
-			{invalidMessage !== undefined && invalidMessage != '' ? invalidMessage : 'Field is required'}
-		</Label>
-	</div>
+	{#if validateOpts}
+		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+			<Label for={name} error>
+				{invalidMessage}
+			</Label>
+		</div>
+	{/if}
 </div>