<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>