5 files changed, 39 insertions, 3 deletions
diff --git a/src/locales/en.json b/src/locales/en.json
index 77b2cb20..0ff021cd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -296,6 +296,8 @@
 			"placeholder": "Enter an address, invoice or username"
 		},
 		"settings": {
+      "connectSquare": "Connect to Square",
+      "revokeSquare": "Revoke Square Connection",
       "confirmAutoWithdrawal": "Confirm auto withdrawal settings",
       "confirmAutoWithdrawalDesc": "Your auto withdrawals have been disabled. Please double check your destination address before re-enabling them or remove the address to dismiss this message.",
 			"tip": "Default tip",
diff --git a/src/routes/(app)/settings/account/+page.server.ts b/src/routes/(app)/settings/account/+page.server.ts
index f0cc700e..ebb90f05 100644
--- a/src/routes/(app)/settings/account/+page.server.ts
+++ b/src/routes/(app)/settings/account/+page.server.ts
@@ -1,9 +1,11 @@
 import getRates from "$lib/rates";
 import updateUser from "$lib/settings";
+import { auth, get } from "$lib/utils";
 
-export async function load() {
+export async function load({ cookies }) {
 	const rates = await getRates();
-	return { rates };
+	const connect = await get("/square/connect", auth(cookies));
+	return { connect, rates };
 }
 
 export const actions = {
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index d8b61170..26013cbb 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -13,7 +13,7 @@
 
   let { data } = $props();
   let { user } = $state(data);
-  let { rates, subscriptions } = data;
+  let { connect, rates, subscriptions } = data;
   let { currency, email, tip, verified } = $state(user);
   let rate = rates[currency];
 
@@ -97,6 +97,8 @@
   $effect(() => {
     if (email !== user.email) verified = false;
   });
+
+  let revoke = () => {};
 </script>
 
 <div>
@@ -319,3 +321,15 @@
     </div>
   </div>
 {/if}
+
+{#if connect !== "connected"}
+  <a href={connect} class="btn flex">
+    <img src="/images/square.svg" class="w-12" />
+    <div>{$t("user.settings.connectSquare")}</div></a
+  >
+{:else}
+  <button type="button" onclick={revoke} class="btn">
+    <img src="/images/square.svg" class="w-12" />
+    <div>{$t("user.settings.revokeSquare")}</div>
+  </button>
+{/if}
diff --git a/src/routes/(app)/settings/square/+page.server.ts b/src/routes/(app)/settings/square/+page.server.ts
new file mode 100644
index 00000000..e00bdf1b
--- /dev/null
+++ b/src/routes/(app)/settings/square/+page.server.ts
@@ -0,0 +1,18 @@
+import { auth, get } from "$lib/utils";
+import { fail, redirect } from "@sveltejs/kit";
+
+export async function load({ cookies, url }) {
+	let connected;
+
+	const query = url.searchParams.toString();
+
+	try {
+		await get(`/square/auth?${query}`, auth(cookies));
+		connected = true;
+	} catch (e) {
+		const { message } = e as Error;
+		fail(400, { message });
+	}
+
+	if (connected) redirect(307, "/settings/account");
+}
diff --git a/src/routes/(app)/settings/square/+page.svelte b/src/routes/(app)/settings/square/+page.svelte
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/routes/(app)/settings/square/+page.svelte