feat: add tumblr oauth

frontend/src/routes/auth/login/+page.svelte

@@ -60,12 +60,9 @@
   <div class="row">
     <div class="col-md-4 mb-1">
       <ListGroup>
-        <ListGroupItem tag="button" on:click={toggleModal}>
-          <img height="16px" src={fediverse} alt="Fediverse logo" aria-hidden /> Log in with the Fediverse
-        </ListGroupItem>
-        <ListGroupItem tag="a" href={data.discord}>
-          <Icon name="discord" /> Log in with Discord
-        </ListGroupItem>
+        <ListGroupItem tag="button" on:click={toggleModal}>Log in with the Fediverse</ListGroupItem>
+        <ListGroupItem tag="a" href={data.discord}>Log in with Discord</ListGroupItem>
+        <ListGroupItem tag="a" href={data.tumblr}>Log in with Tumblr</ListGroupItem>
       </ListGroup>
       <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
         <ModalBody>

frontend/src/routes/auth/login/tumblr/+page.server.ts

@@ -0,0 +1,38 @@
+import type { APIError, MeUser } from "$lib/api/entities";
+import { apiFetch } from "$lib/api/fetch";
+import type { PageServerLoad } from "./$types";
+import { PUBLIC_BASE_URL } from "$env/static/public";
+
+export const load = (async ({ url }) => {
+  try {
+    const resp = await apiFetch<CallbackResponse>("/auth/tumblr/callback", {
+      method: "POST",
+      body: {
+        callback_domain: PUBLIC_BASE_URL,
+        code: url.searchParams.get("code"),
+        state: url.searchParams.get("state"),
+      },
+    });
+
+    return {
+      ...resp,
+    };
+  } catch (e) {
+    return { error: e as APIError };
+  }
+}) satisfies PageServerLoad;
+
+interface CallbackResponse {
+  has_account: boolean;
+  token?: string;
+  user?: MeUser;
+
+  tumblr?: string;
+  ticket?: string;
+  require_invite: boolean;
+
+  is_deleted: boolean;
+  deleted_at?: string;
+  self_delete?: boolean;
+  delete_reason?: string;
+}

frontend/src/routes/auth/login/tumblr/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { APIError, MeUser } from "$lib/api/entities";
+  import { apiFetch, apiFetchClient } from "$lib/api/fetch";
+  import { userStore } from "$lib/store";
+  import type { PageData } from "./$types";
+  import { addToast } from "$lib/toast";
+  import CallbackPage from "../CallbackPage.svelte";
+  import type { SignupResponse } from "$lib/api/responses";
+
+  export let data: PageData;
+
+  const signupForm = async (username: string, invite: string) => {
+    try {
+      const resp = await apiFetch<SignupResponse>("/auth/tumblr/signup", {
+        method: "POST",
+        body: {
+          ticket: data.ticket,
+          username: username,
+          invite_code: invite,
+        },
+      });
+
+      localStorage.setItem("pronouns-token", resp.token);
+      localStorage.setItem("pronouns-user", JSON.stringify(resp.user));
+      userStore.set(resp.user);
+      addToast({ header: "Welcome!", body: "Signed up successfully!" });
+      goto(`/@${resp.user.name}`);
+    } catch (e) {
+      data.error = e as APIError;
+    }
+  };
+
+  const linkAccount = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/auth/tumblr/add-provider", "POST", {
+        ticket: data.ticket,
+      });
+
+      localStorage.setItem("pronouns-user", JSON.stringify(resp));
+      userStore.set(resp);
+      addToast({ header: "Linked account", body: "Successfully linked account!" });
+      await goto("/settings/auth");
+    } catch (e) {
+      data.error = e as APIError;
+    }
+  };
+</script>
+
+<CallbackPage
+  authType="Tumblr"
+  remoteName={data.tumblr}
+  error={data.error}
+  requireInvite={data.require_invite}
+  isDeleted={data.is_deleted}
+  ticket={data.ticket}
+  token={data.token}
+  user={data.user}
+  deletedAt={data.deleted_at}
+  selfDelete={data.self_delete}
+  deleteReason={data.delete_reason}
+  {linkAccount}
+  {signupForm}
+/>

frontend/src/routes/settings/auth/+page.svelte

@@ -21,7 +21,7 @@
   let canUnlink = false;
 
   $: canUnlink =
-    [data.user.discord, data.user.fediverse]
+    [data.user.discord, data.user.fediverse, data.user.tumblr]
       .map<number>((entry) => (entry === null ? 0 : 1))
       .reduce((prev, current) => prev + current) >= 2;
 
@@ -38,6 +38,9 @@
   let discordUnlinkModalOpen = false;
   let toggleDiscordUnlinkModal = () => (discordUnlinkModalOpen = !discordUnlinkModalOpen);
 
+  let tumblrUnlinkModalOpen = false;
+  let toggleTumblrUnlinkModal = () => (tumblrUnlinkModalOpen = !tumblrUnlinkModalOpen);
+
   const fediLogin = async () => {
     fediDisabled = true;
     try {
@@ -74,6 +77,17 @@
       error = e as APIError;
     }
   };
+
+  const tumblrUnlink = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/auth/tumblr/remove-provider", "POST");
+      data.user = resp;
+      addToast({ header: "Unlinked account", body: "Successfully unlinked Tumblr account!" });
+      toggleTumblrUnlinkModal();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
 </script>
 
 <div>
@@ -126,6 +140,28 @@
         </CardBody>
       </Card>
     </div>
+    <div class="my-2">
+      <Card>
+        <CardBody>
+          <CardTitle>Tumblr</CardTitle>
+          <CardText>
+            {#if data.user.tumblr}
+              Your currently linked Tumblr account is <b>{data.user.tumblr_username}</b>
+              (<code>{data.user.tumblr}</code>).
+            {:else}
+              You do not have a linked Tumblr account.
+            {/if}
+          </CardText>
+          {#if data.user.tumblr}
+            <Button color="danger" disabled={!canUnlink} on:click={toggleTumblrUnlinkModal}
+              >Unlink account</Button
+            >
+          {:else}
+            <Button color="secondary" href={data.urls.tumblr}>Link account</Button>
+          {/if}
+        </CardBody>
+      </Card>
+    </div>
     <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
       <ModalBody>
         <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />