pinafore/routes/settings/add-instance.html

<:Head>
  <title>Instance Wizard</title>
</:Head>

<Layout page='settings'>
  <SettingsLayout page='add-instance'>
    <h1>Add an instance</h1>

    <p>Log in to your instance to use Pinafore.</p>

    <form on:submit='onSubmit(event)'>
      <label for="instanceInput">Instance name:</label>
      <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
      <button class="primary" type="submit" id="submitButton">Add instance</button>
    </form>

    <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
  </SettingsLayout>
</Layout>
<style>
  @media (max-width: 767px) {
    input {
      width: 90%;
    }
  }

  input {
    width: 250px;
  }

  form {
    background: var(--form-bg);
    padding: 5px 10px 15px;
    margin: 20px auto;
    border: 1px solid var(--form-border);
  }

  form label, form input, form button {
    display: block;
    margin: 20px 5px;
  }
</style>
<script>
  import Layout from '../_components/Layout.html';
  import SettingsLayout from './_components/SettingsLayout.html'
  import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
  import { databasePromise } from '../_utils/database'
  import { store } from '../_utils/store'
  import { goto } from 'sapper/runtime.js'

  export default {
    oncreate: function () {
      if (process.browser) {
        (async () => {
          let params = new URLSearchParams(location.search)
          if (params.has('code')) {
            this.onReceivedOauthCode(params.get('code'))
          }
        })()
      }
    },
    components: {
      Layout,
      SettingsLayout
    },
    store: () => store,
    methods: {
      onReceivedOauthCode: async function(code) {
        let currentRegisteredInstanceName = this.store.get('currentRegisteredInstanceName')
        let currentRegisteredInstance = this.store.get('currentRegisteredInstance')
        let instanceData = await (await getAccessTokenFromAuthCode(
          currentRegisteredInstanceName,
          currentRegisteredInstance.client_id,
          currentRegisteredInstance.client_secret,
          code
        )).json()
        // TODO: handle error
        let loggedInInstances = this.store.get('loggedInInstances')
        let loggedInInstancesInOrder = this.store.get('loggedInInstancesInOrder')
        loggedInInstances[currentRegisteredInstanceName] = instanceData
        if (!loggedInInstancesInOrder.includes(currentRegisteredInstanceName)) {
          loggedInInstancesInOrder.push(currentRegisteredInstanceName)
        }
        this.store.set({
          instanceNameInSearch: '',
          loggedInInstances: loggedInInstances,
          currentInstance: currentRegisteredInstanceName,
          loggedInInstancesInOrder: loggedInInstancesInOrder
        })
        this.store.save()
        goto('/')
      },
      onSubmit: async function(event) {
        event.preventDefault()
        let instanceName = this.store.get('instanceNameInSearch')
        instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
        let instanceData = await (await registerApplication(instanceName)).json()
        // TODO: handle error
        this.store.set({
          currentRegisteredInstanceName: instanceName,
          currentRegisteredInstance: instanceData
        })
        this.store.save()
        let oauthUrl = generateAuthLink(instanceName, instanceData.client_id)
        document.location.href = oauthUrl
      },
    }
  }
</script>