2 files changed, 19 insertions, 3 deletions
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}