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: #fafafa;
    padding: 5px 10px 15px;
    border: 1px solid #ccc;
    margin: 0 auto;
  }

  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 instanceData = this.store.get('currentOauthInstance')
        instanceData.code = code
        let response = await (await getAccessTokenFromAuthCode(
          instanceData.instanceName,
          instanceData.client_id,
          instanceData.client_secret,
          instanceData.code
        )).json()
        instanceData = Object.assign(instanceData, response)
        this.store.set({
          'currentOauthInstance': instanceData,
          'instanceNameInSearch': '',
        })
        this.store.save()
        goto('/')
      },
      onSubmit: async function(event) {
        event.preventDefault()
        let instanceName = this.store.get('instanceNameInSearch')
        instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
        let data = await (await registerApplication(instanceName)).json()
        data.instanceName = instanceName
        this.store.set({'currentOauthInstance': data})
        this.store.save()
        let oauthUrl = generateAuthLink(instanceName, data.client_id)
        document.location.href = oauthUrl
      },
    }
  }
</script>