pinafore/routes/_pages/settings/instances/add.html

<SettingsLayout page='settings/instances/add' label="Add instance">
  <h1 id="add-an-instance-h1">Add instance</h1>

  <form class="add-new-instance" on:submit='onSubmit(event)' aria-labelledby="add-an-instance-h1">

    {#if $logInToInstanceError && $logInToInstanceErrorForText === $instanceNameInSearch}
    <div class="form-error form-error-user-error" role="alert">
      Error: {$logInToInstanceError}
    </div>
    {/if}

    <noscript>
      <div class="form-error" role="alert">
        You must enable JavaScript to log in.
      </div>
    </noscript>

    <label class="add-new-instance-label" for="instanceInput">Instance:</label>
    <input class="add-new-instance-input" type="text" id="instanceInput"
           bind:value='$instanceNameInSearch' placeholder="Enter instance name" required
    >
    <button class="primary add-new-instance-button" type="submit" id="submitButton"
            disabled={!$instanceNameInSearch || $logInToInstanceLoading}>
      Log in
    </button>
  </form>

  {#if !$isUserLoggedIn}
  <p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p>
  {/if}
</SettingsLayout>
<style>
  .form-error {
    border: 2px solid red;
    border-radius: 2px;
    padding: 10px;
    font-size: 1.3em;
    margin: 5px;
    background-color: var(--main-bg);
  }
  .add-new-instance-input {
    min-width: 70%;
    max-width: 100%;
  }

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

  .add-new-instance-label, .add-new-instance-input, .add-new-instance-button {
    display: block;
    margin: 20px 5px;
  }

  @media (max-width: 767px) {
    .add-new-instance-input {
      min-width: 95%;
    }
  }

</style>
<script>
  import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
  import { store } from '../../../_store/store'
  import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance'
  import ExternalLink from '../../../_components/ExternalLink.html'

  export default {
    async oncreate () {
      let codeMatch = location.search.match(/code=([^&]+)/)
      if (codeMatch) {
        handleOauthCode(codeMatch[1])
      }
    },
    components: {
      SettingsLayout,
      ExternalLink
    },
    store: () => store,
    methods: {
      onSubmit (event) {
        event.preventDefault()
        logInToInstance()
      }
    }
  }
</script>