pronounscc/frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { Alert, Button, FormGroup, Icon, Input } from "sveltestrap";

  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 ErrorAlert from "$lib/components/ErrorAlert.svelte";
  import { addToast } from "$lib/toast";

  interface SignupResponse {
    user: MeUser;
    token: string;
  }

  export let data: PageData;

  onMount(() => {
    if (!data.is_deleted && data.token && data.user) {
      localStorage.setItem("pronouns-token", data.token);
      localStorage.setItem("pronouns-user", JSON.stringify(data.user));
      userStore.set(data.user);
      goto("/");
    }
  });

  let username = "";
  let invite = "";

  const signupForm = async () => {
    try {
      const resp = await apiFetch<SignupResponse>("/auth/mastodon/signup", {
        method: "POST",
        body: {
          instance: data.instance,
          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);
      goto("/");
    } catch (e) {
      data.error = e as APIError;
    }
  };

  let deleteCancelled = false;
  let deleteError: APIError | null = null;
  const cancelDelete = async () => {
    try {
      await apiFetch<any>("/auth/cancel-delete", {
        method: "GET",
        headers: {
          "X-Delete-Token": data.token!,
        },
      });

      deleteCancelled = true;
      deleteError = null;
    } catch (e) {
      deleteCancelled = false;
      deleteError = e as APIError;
    }
  };

  const linkAccount = async () => {
    try {
      const resp = await apiFetchClient<MeUser>("/auth/mastodon/add-provider", "POST", {
        instance: data.instance,
        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>

<svelte:head>
  <title>Log in with the Fediverse - pronouns.cc</title>
</svelte:head>

<h1>Log in with the Fediverse</h1>

{#if data.error}
  <ErrorAlert error={data.error} />
{/if}
{#if data.ticket && $userStore}
  <div>
    <FormGroup floating label="Fediverse username">
      <Input readonly value="{data.fediverse}@{data.instance}" />
    </FormGroup>
  </div>
  <div class="my-2">
    <FormGroup floating label="pronouns.cc username">
      <Input readonly value={$userStore.name} />
    </FormGroup>
  </div>
  <div>
    <Button on:click={linkAccount}>Link account</Button>
    <Button color="secondary" href="/settings/auth">Cancel</Button>
  </div>
{:else if data.ticket}
  <form on:submit|preventDefault={signupForm}>
    <div>
      <FormGroup floating label="Fediverse username">
        <Input readonly value="{data.fediverse}@{data.instance}" />
      </FormGroup>
    </div>
    <div>
      <FormGroup floating label="Username">
        <Input id="username" name="username" bind:value={username} />
      </FormGroup>
    </div>
    {#if data.require_invite}
      <div>
        <FormGroup floating label="Invite code">
          <Input id="invite" name="invite" aria-describedby="invite-help" bind:value={invite} />
        </FormGroup>
        <div id="invite-help" class="form-text">
          <Icon name="info-circle-fill" /> You currently need an invite code to sign up. You can get
          one from an existing user.
        </div>
      </div>
    {/if}
    <div class="form-text mb-1">
      By signing up, you agree to the <a href="/page/tos">terms of service</a> and the
      <a href="/page/privacy">privacy policy</a>.
    </div>
    <Button type="submit" color="primary">Sign up</Button>
  </form>
{:else if data.is_deleted && data.token}
  <p>Your account is pending deletion since {data.deleted_at}.</p>
  <p>If you wish to cancel deletion, press the button below.</p>
  <p>
    <Button color="primary" on:click={cancelDelete} disabled={deleteCancelled}
      >Cancel account deletion</Button
    >
  </p>
  {#if deleteCancelled}
    <Alert color="secondary" fade={false}>
      Account deletion cancelled! You can now <a href="/auth/login">log in</a> again.
    </Alert>
  {/if}
  {#if deleteError}
    <ErrorAlert error={deleteError} />
  {/if}
{:else}
  Loading...
{/if}