pinafore/routes/settings/instances/add.html

<:Head>
  <title>Add an Instance</title>
</:Head>

<Layout page='settings'>
  <SettingsLayout page='settings/instances/add' label="Add an Instance">
    <h1>Add an Instance</h1>

    {{#if $isUserLoggedIn}}
    <p>Connect to an instance to log in.</p>
    {{else}}
    <p>Log in to an instance to start using Pinafore.</p>
    {{/if}}

    <form class="add-new-instance" 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>

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

  input {
    width: 250px;
  }

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

  form.add-new-instance label, form.add-new-instance input, form.add-new-instance 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/oauth'
  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: {
      onSubmit: async function(event) {
        event.preventDefault()
        let instanceName = this.store.get('instanceNameInSearch')
        instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
        // TODO: show toast error if you're already logged into this instance
        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
      },
      onReceivedOauthCode: async function(code) {
        let currentRegisteredInstanceName = this.store.get('currentRegisteredInstanceName')
        let currentRegisteredInstance = this.store.get('currentRegisteredInstance')
        let instanceData = await getAccessTokenFromAuthCode(
          currentRegisteredInstanceName,
          currentRegisteredInstance.client_id,
          currentRegisteredInstance.client_secret,
          code
        )
        // 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: '',
          currentRegisteredInstanceName: null,
          currentRegisteredInstance: null,
          loggedInInstances: loggedInInstances,
          currentInstance: currentRegisteredInstanceName,
          loggedInInstancesInOrder: loggedInInstancesInOrder
        })
        this.store.save()
        goto('/')
      },
    }
  }
</script>