pinafore/routes/settings/add-instance.html

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

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

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

  <form on:submit='handleSubmit(event)'>
    <label for="instanceInput">Instance name:</label>
    <input type="text" id="instanceInput" bind:value='instanceName' 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>
</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 { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
  import { databasePromise } from '../_utils/database'
  import { goto } from 'sapper/runtime.js'

  export default {
    oncreate: function () {
      if (process.browser) {
        (async () => {
          let params = new URLSearchParams(location.search)
          if (params.has('code')) {
            let db = await databasePromise
            let instanceData = await db.get('instance')
            this.set({instanceName: instanceData.instanceName})
            let code = params.get('code')
            instanceData.code = code
            let response = await (await getAccessTokenFromAuthCode(
              instanceData.instanceName,
              instanceData.client_id,
              instanceData.client_secret,
              instanceData.code
            )).json()
            instanceData = Object.assign(instanceData, response)
            await db.set(`instance`, instanceData)
            goto('/')
          }
        })()
      }
    },
    components: {
      Layout
    },
    data: () => ({
      instanceName: ''
    }),
    methods: {
      handleSubmit: async function(event) {
        event.preventDefault()
        let instanceName = this.get('instanceName')
        instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
        let data = await (await registerApplication(instanceName)).json()
        let db = await databasePromise
        data.instanceName = instanceName
        await db.set(`instance`, data)
        let oauthUrl = generateAuthLink(instanceName, data.client_id)
        document.location.href = oauthUrl
      },
    }
  }
</script>