analytics + login ux updates

src/runner/internal/domain/liveauctioneers/upcoming.go

@@ -71,15 +71,13 @@ type GetUpcomingSaleIDsInput struct {
 }
 
 func LAGetUpcomingSaleIDs(ctx context.Context, in GetUpcomingSaleIDsInput) (ids LACatalogIDs, total int, err error) {
-	if in.Limit == 0 {
-		in.Limit = 128
-	}
+	in.Limit = 128
 
 	req, _ := http.NewRequestWithContext(
 		ctx,
 		http.MethodGet,
 		fmt.Sprintf(
-			"https://search-party-prod.liveauctioneers.com/search/catalogsearch?page=%d&sort=saleStart&pageSize=%d",
+			"https://search-party-prod.liveauctioneers.com/search/catalogsearch?client_version=5.0&client=web&offset=300&sort=saleStart&page=%d&pageSize=%d&",
 			in.Page,
 			in.Limit,
 		),

src/web-client/package-lock.json

@@ -8,6 +8,10 @@
 			"name": "web-client",
 			"version": "0.0.1",
 			"dependencies": {
+				"@analytics/google-analytics": "^1.0.7",
+				"@segment/snippet": "^4.16.2",
+				"analytics": "^0.8.9",
+				"analytics-plugin-do-not-track": "^0.1.5",
 				"luxon": "^3.3.0"
 			},
 			"devDependencies": {
@@ -46,6 +50,76 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@analytics/cookie-utils": {
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/@analytics/cookie-utils/-/cookie-utils-0.2.12.tgz",
+			"integrity": "sha512-2h/yuIu3kmu+ZJlKmlT6GoRvUEY2k1BbQBezEv5kGhnn9KpmzPz715Y3GmM2i+m7Y0QmBdVUoA260dQZkofs2A==",
+			"dependencies": {
+				"@analytics/global-storage-utils": "^0.1.7"
+			}
+		},
+		"node_modules/@analytics/core": {
+			"version": "0.12.7",
+			"resolved": "https://registry.npmjs.org/@analytics/core/-/core-0.12.7.tgz",
+			"integrity": "sha512-etmIPCoxWLoUZ/o1o2zvIk4cdVHa8I1xUQtTuLA+YXQ4SsFbm75ZoMXJBqWrNSENpqCJgoL6hizl5uTbkNN+1Q==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/davidwells"
+				}
+			],
+			"dependencies": {
+				"@analytics/global-storage-utils": "^0.1.7",
+				"@analytics/type-utils": "^0.6.2",
+				"analytics-utils": "^1.0.12"
+			}
+		},
+		"node_modules/@analytics/global-storage-utils": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@analytics/global-storage-utils/-/global-storage-utils-0.1.7.tgz",
+			"integrity": "sha512-V+spzGLZYm4biZT4uefaylm80SrLXf8WOTv9hCgA46cLcyxx3LD4GCpssp1lj+RcWLl/uXJQBRO4Mnn/o1x6Gw==",
+			"dependencies": {
+				"@analytics/type-utils": "^0.6.2"
+			}
+		},
+		"node_modules/@analytics/google-analytics": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/@analytics/google-analytics/-/google-analytics-1.0.7.tgz",
+			"integrity": "sha512-KZ69NaMIi5kOcouzqI8cu7tZgQl7ziGiRahfU6zniUf32G8bv7wQDh73JFz1NwO6gBPloUc+5BzEoWzScM5Rgw=="
+		},
+		"node_modules/@analytics/localstorage-utils": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/@analytics/localstorage-utils/-/localstorage-utils-0.1.10.tgz",
+			"integrity": "sha512-uJS+Jp1yLG5VFCgA5T82ZODYBS0xuDQx0NtAZrgbqt9j51BX3TcgmOez5LVkrUNu/lpbxjCLq35I4TKj78VmOQ==",
+			"dependencies": {
+				"@analytics/global-storage-utils": "^0.1.7"
+			}
+		},
+		"node_modules/@analytics/session-storage-utils": {
+			"version": "0.0.7",
+			"resolved": "https://registry.npmjs.org/@analytics/session-storage-utils/-/session-storage-utils-0.0.7.tgz",
+			"integrity": "sha512-PSv40UxG96HVcjY15e3zOqU2n8IqXnH8XvTkg1X43uXNTKVSebiI2kUjA3Q7ESFbw5DPwcLbJhV7GforpuBLDw==",
+			"dependencies": {
+				"@analytics/global-storage-utils": "^0.1.7"
+			}
+		},
+		"node_modules/@analytics/storage-utils": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@analytics/storage-utils/-/storage-utils-0.4.2.tgz",
+			"integrity": "sha512-AXObwyVQw9h2uJh1t2hUgabtVxzYpW+7uKVbdHQK80vr3Td5rrmCxrCxarh7HUuAgSDZ0bZWqmYxVgmwKceaLg==",
+			"dependencies": {
+				"@analytics/cookie-utils": "^0.2.12",
+				"@analytics/global-storage-utils": "^0.1.7",
+				"@analytics/localstorage-utils": "^0.1.10",
+				"@analytics/session-storage-utils": "^0.0.7",
+				"@analytics/type-utils": "^0.6.2"
+			}
+		},
+		"node_modules/@analytics/type-utils": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@analytics/type-utils/-/type-utils-0.6.2.tgz",
+			"integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
+		},
 		"node_modules/@esbuild/android-arm": {
 			"version": "0.17.19",
 			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -541,6 +615,27 @@
 			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
 			"dev": true
 		},
+		"node_modules/@ndhoule/each": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@ndhoule/each/-/each-2.0.1.tgz",
+			"integrity": "sha512-wHuJw6x+rF6Q9Skgra++KccjBozCr9ymtna0FhxmV/8xT/hZ2ExGYR8SV8prg8x4AH/7mzDYErNGIVHuzHeybw==",
+			"dependencies": {
+				"@ndhoule/keys": "^2.0.0"
+			}
+		},
+		"node_modules/@ndhoule/keys": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@ndhoule/keys/-/keys-2.0.0.tgz",
+			"integrity": "sha512-vtCqKBC1Av6dsBA8xpAO+cgk051nfaI+PnmTZep2Px0vYrDvpUmLxv7z40COlWH5yCpu3gzNhepk+02yiQiZNw=="
+		},
+		"node_modules/@ndhoule/map": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@ndhoule/map/-/map-2.0.1.tgz",
+			"integrity": "sha512-WOEf2An9mL4DVY6NHgaRmFC82pZGrmzW4I0hpPPdczDP4Gp5+Q1Nny77x3w0qzENA8+cbgd9+Lx2ClSTLvkB0g==",
+			"dependencies": {
+				"@ndhoule/each": "^2.0.1"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -745,6 +840,14 @@
 				}
 			}
 		},
+		"node_modules/@segment/snippet": {
+			"version": "4.16.2",
+			"resolved": "https://registry.npmjs.org/@segment/snippet/-/snippet-4.16.2.tgz",
+			"integrity": "sha512-2fgsrt4U+vKv14ohOAsViCEzeZotaawF2Il7YUbmYVrhPn8Hq7xuGznHKRdZeoxScQ87X36xDX2Fzh5bAYRN7g==",
+			"dependencies": {
+				"@ndhoule/map": "^2.0.1"
+			}
+		},
 		"node_modules/@sveltejs/adapter-node": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz",
@@ -834,6 +937,12 @@
 			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==",
 			"dev": true
 		},
+		"node_modules/@types/dlv": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@types/dlv/-/dlv-1.1.2.tgz",
+			"integrity": "sha512-OyiZ3jEKu7RtGO1yp9oOdK0cTwZ/10oE9PDJ6fyN3r9T5wkyOcvr6awdugjYdqF6KVO5eUvt7jx7rk2Eylufow==",
+			"peer": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
@@ -1110,6 +1219,38 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
+		"node_modules/analytics": {
+			"version": "0.8.9",
+			"resolved": "https://registry.npmjs.org/analytics/-/analytics-0.8.9.tgz",
+			"integrity": "sha512-oTbUzQpncMTslakqfK70GgB6bopk5hY+uuekwnadMkDyqNLgcD02KRzteTnO7q5Ko6wDECVtT8xi/6OuAMZykA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/davidwells"
+				}
+			],
+			"dependencies": {
+				"@analytics/core": "^0.12.7",
+				"@analytics/storage-utils": "^0.4.2"
+			}
+		},
+		"node_modules/analytics-plugin-do-not-track": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/analytics-plugin-do-not-track/-/analytics-plugin-do-not-track-0.1.5.tgz",
+			"integrity": "sha512-Bnadur6Y8UB2GrZD11SXAmIVraPpsVINcU8cgbq6ynJIE00xrcJ/RhqFdqqIM7Heyuze93FhcEKLl5WGV9N9mA=="
+		},
+		"node_modules/analytics-utils": {
+			"version": "1.0.12",
+			"resolved": "https://registry.npmjs.org/analytics-utils/-/analytics-utils-1.0.12.tgz",
+			"integrity": "sha512-WvV2YWgsnXLxaY0QYux0crpBAg/0JA763NmbMVz22jKhMPo7dpTBet8G2IlF7ixTjLDzGlkHk1ZaKqqQmjJ+4w==",
+			"dependencies": {
+				"@analytics/type-utils": "^0.6.2",
+				"dlv": "^1.1.3"
+			},
+			"peerDependencies": {
+				"@types/dlv": "^1.0.0"
+			}
+		},
 		"node_modules/ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1600,8 +1741,7 @@
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-			"dev": true
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
 		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",

src/web-client/package.json

@@ -39,6 +39,10 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"analytics": "^0.8.9",
+		"analytics-plugin-do-not-track": "^0.1.5",
+		"@analytics/google-analytics": "^1.0.7",
+		"@segment/snippet": "^4.16.2",
 		"luxon": "^3.3.0"
 	}
 }

src/web-client/src/app.d.ts

@@ -1,3 +1,4 @@
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/web-client/src/lib/AuthForm.svelte

@@ -40,10 +40,9 @@
 	$: ctaTxt = showRegistration ? 'Up' : 'In';
 	$: toggleCtaTxt = !showRegistration ? 'Up' : 'In';
 	$: ctaFunc = showRegistration ? execRegister : execLogin;
-	$: confirmPasswordValid = password === passwordConfirmation;
 </script>
 
-<form class="flex" on:submit|preventDefault={ctaFunc}>
+<form class="flex" style="max-width: 600px;" on:submit|preventDefault={ctaFunc}>
 	<span class="flex flex-col justify-around w-20">
 		<label for="email"> Email </label>
 		<label for="password"> Password&nbsp;</label>
@@ -51,36 +50,52 @@
 
 	<span class="flex flex-col">
 		<span class="flex">
-			<input class="py-1" type="text" bind:value={email} />
-			<button class="w-20"> Sign {ctaTxt} </button>
-			<button
-				class="w-20 bg-bh-gold text-bh-black border-bh-black"
-				on:click|stopPropagation={toggleFormType}
-			>
-				Sign {toggleCtaTxt}
+			<input
+				class="px-2 py-1 border-r-0 grow invalid:border-red-500 invalid:border-2"
+				type="email"
+				required
+				bind:value={email}
+			/>
+			<button class="border-l-0 px-2 py-1 disabled:text-gray-500">
+				Sign {ctaTxt}
 			</button>
 		</span>
 		<span class="flex">
 			<input
-				class="px-2 py-1 border-r-0"
+				class="px-2 py-1 w-full"
 				name="password"
-				on:blur={() => (showPassword = false)}
 				type={showPassword ? 'text' : 'password'}
-				on:change|nonpassive={(evt) => (password = evt?.target?.value)}
+				required
+				placeholder={showRegistration ? 'Password' : ''}
+				on:blur={() => (showPassword = false)}
+				on:change={(evt) => (password = evt?.target?.value)}
 			/>
 			{#if showRegistration}
 				<input
-					class="px-2 py-1 border-r-0"
+					class="px-2 py-1 border-r-0 invalid:border-red-500 invalid:border-2"
 					name="confirm_password"
+					type={showPassword ? 'text' : 'password'}
+					pattern={password}
+					required
 					placeholder="Confirm Password"
 					on:blur={() => (showPassword = false)}
-					type={showPassword ? 'text' : 'password'}
 					on:change={(evt) => (passwordConfirmation = evt?.target?.value)}
 				/>
+
+				<button
+					class="border-l-0 px-2 py-1 w-16"
+					tabindex="-1"
+					on:click|stopPropagation={revealPass}
+				>
+					{showPassword ? 'Hide' : 'Show'}
+				</button>
 			{/if}
-			<button class="border-l-0 px-2 py-1 w-16" on:click|stopPropagation={revealPass}>
-				{showPassword ? 'Hide' : 'Show'}
-			</button>
 		</span>
 	</span>
+	<button
+		class="w-20 bg-bh-gold text-bh-black border-bh-black"
+		on:click|stopPropagation={toggleFormType}
+	>
+		I Want to Sign {toggleCtaTxt}
+	</button>
 </form>

src/web-client/src/lib/LoginForm.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	let showPassword = false;
-	let showRegistration = false;
-
-	const revealPass = () => (showPassword = !showPassword);
-
-	function execLogin() {
-		console.log('LOGGING IN');
-	}
-</script>
-
-<form class="flex" on:submit|preventDefault={execLogin}>
-	<span class="flex flex-col justify-around w-20">
-		<label for="email"> Email </label>
-		<label for="password"> Password&nbsp;</label>
-	</span>
-
-	<span class="flex flex-col">
-		<span class="flex">
-			<input class="py-1" type="text" />
-			<button class="w-20"> Login </button>
-		</span>
-		<span class="flex">
-			<input
-				class="px-2 py-1 border-r-0"
-				name="password"
-				on:blur={() => (showPassword = false)}
-				type={showPassword ? 'text' : 'password'}
-			/>
-			{#if showRegistration}
-				<input
-					class="px-2 py-1 border-r-0"
-					name="confirm_password"
-					on:blur={() => (showPassword = false)}
-					type={showPassword ? 'text' : 'password'}
-				/>
-			{/if}
-			<button class="border-l-0 px-2 py-1 w-16" on:click|stopPropagation={revealPass}>
-				{showPassword ? 'Hide' : 'Show'}
-			</button>
-		</span>
-	</span>
-</form>

src/web-client/src/lib/RegistrationForm.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	let password;
-	let confirm_password;
-	let email;
-
-	let showPassword = false;
-
-	const revealPass = () => (showPassword = !showPassword);
-
-	function execRegister() {
-		console.log('Regstering User');
-	}
-</script>
-
-<form class="flex" on:submit|preventDefault={execRegister}>
-	<span class="flex flex-col justify-around w-20">
-		<label for="email"> Email </label>
-		<label for="password"> Password&nbsp;</label>
-	</span>
-
-	<span class="flex flex-col">
-		<span class="flex">
-			<input class="py-1" type="text" />
-			<button class="w-20"> Login </button>
-		</span>
-		<span class="flex">
-			<input
-				class="px-2 py-1 border-r-0"
-				name="password"
-				on:blur={() => (showPassword = false)}
-				type={showPassword ? 'text' : 'password'}
-			/>
-			<input
-				class="px-2 py-1 border-r-0"
-				name="confirm_password"
-				on:blur={() => (showPassword = false)}
-				type={showPassword ? 'text' : 'password'}
-			/>
-			<button class="border-l-0 px-2 py-1 w-16" on:click|stopPropagation={revealPass}>
-				{showPassword ? 'Hide' : 'Show'}
-			</button>
-		</span>
-	</span>
-</form>

src/web-client/src/lib/state.ts

@@ -34,9 +34,13 @@ export const loginAction = async ({ email, password }: LoginAction): Promise<Ses
 		const sessionStr = localStorage.getItem('bh-session');
 		if (sessionStr) {
 			const data = JSON.parse(sessionStr);
-			console.log('already authenticated');
-			session.set(data);
-			return data;
+			if (data.sessionId) {
+				console.log('already authenticated');
+				session.set(data);
+				return data;
+			}
+
+			localStorage.removeItem('bh-session');
 		}
 
 		const response = await fetch(
@@ -53,8 +57,14 @@ export const loginAction = async ({ email, password }: LoginAction): Promise<Ses
 		);
 
 		const data = await response.json();
-		localStorage.setItem('bh-session', JSON.stringify(data));
-		return data;
+		console.log(data);
+
+		if (data.sessionId) {
+			localStorage.setItem('bh-session', JSON.stringify(data));
+			return data;
+		}
+
+		console.trace("got this on login attempt:", data);
 	} catch (e) {
 		console.error(e);
 	}

src/web-client/src/routes/+layout.svelte

@@ -1,6 +1,26 @@
 <script lang="ts">
 	import type { LayoutData } from './$types';
 	import { goto } from '$app/navigation';
+
+	import Analytics from 'analytics';
+	// import doNotTrack from 'analytics-plugin-do-not-track';
+	import googleAnalytics from '@analytics/google-analytics';
+
+	const analytics = Analytics({
+		app: 'Barretthousen - Web Client',
+		version: '1.0',
+		debug: process.env.NODE_ENV !== 'production',
+		plugins: [
+			googleAnalytics({
+				measurementIds: ['UA-143763293-1']
+			})
+			// doNotTrack()
+		]
+	});
+
+	/* Track a page view */
+	analytics.page();
+
 	import SearchBox from '$lib/SearchBox.svelte';
 
 	import AuthForm from '$lib/AuthForm.svelte';
@@ -15,20 +35,25 @@
 	}
 
 	async function onLogout() {
+		analytics.track('user.logout', {});
 		logoutAction();
 	}
 
 	async function onRegister(evt: CustomEvent) {
 		const { email, password } = evt.detail;
+		analytics.track('user.register', { email });
 		await registerAction({ email, password });
 	}
 
 	async function onSubmit(evt: CustomEvent) {
 		let { query } = evt.detail;
+
 		// TODO: refactor to one source of truth for building query string parameters
 		await goto(query ? `/?query=${query}` : '/', {
 			invalidateAll: true
 		});
+
+		analytics.track('user.query', { query });
 	}
 
 	interface SessionInfo {
@@ -43,18 +68,26 @@
 
 	let sessionVal: SessionInfo;
 
-	session.subscribe((v) => (sessionVal = v));
+	session.subscribe((v) => {
+		sessionVal = v;
+		if (v && v.sessionId && v.account) {
+			const { id, email, role } = v.account;
+			analytics.identify(id, { email, role });
+		}
+	});
 
 	$: isLoggedIn = !!sessionVal?.sessionId;
+	// $: pageTitle =
+	// 	data.query !== ''
+	// 		? `'${data.query}' Search`
+	// 		: 'Barretthousen: The best rare collectibles from all over the web';
 </script>
 
 <svelte:head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-	<title>
-		Barretthousen: "{data.query}" results
-	</title>
+	<title>Barretthousen: The best rare collectibles from all over the web</title>
 
 	<meta name="description" content="Search results for '{data.query}'" />
 </svelte:head>