pinafore/routes/settings/instances/add.html
2018-02-14 18:37:19 -08:00

98 lines
2.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<:Head>
<title>Pinafore Add an Instance</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='settings/instances/add' label="Add an Instance">
<h1 id="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)' aria-labelledby="add-an-instance-h1">
{{#if $logInToInstanceError}}
<div class="form-error" role="alert">
Error: {{$logInToInstanceError}}
</div>
{{/if}}
<label for="instanceInput">Instance:</label>
<input class="new-instance-input" type="text" id="instanceInput"
bind:value='$instanceNameInSearch' placeholder='' required
>
<button class="primary" type="submit" id="submitButton"
disabled="{{!$instanceNameInSearch || $logInToInstanceLoading}}">
Add instance
</button>
</form>
{{#if !$isUserLoggedIn}}
<p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p>
{{/if}}
</SettingsLayout>
</Layout>
<style>
.form-error {
border: 2px solid red;
border-radius: 2px;
padding: 10px;
font-size: 1.3em;
margin: 5px;
background-color: var(--main-bg);
}
input.new-instance-input {
min-width: 50%;
max-width: 100%;
}
form.add-new-instance {
background: var(--form-bg);
padding: 5px 10px 15px;
margin: 20px auto;
border: 1px solid var(--form-border);
border-radius: 4px;
}
form.add-new-instance label, form.add-new-instance input, form.add-new-instance button {
display: block;
margin: 20px 5px;
}
@media (max-width: 767px) {
input.new-instance-input {
max-width: 80%;
}
}
</style>
<script>
import Layout from '../../_components/Layout.html';
import SettingsLayout from '../_components/SettingsLayout.html'
import { store } from '../../_store/store'
import { logInToInstance, handleOauthCode } from '../../_actions/addInstance'
import ExternalLink from '../../_components/ExternalLink.html'
export default {
async oncreate () {
let params = new URLSearchParams(location.search)
if (params.has('code')) {
handleOauthCode(params.get('code'))
}
},
components: {
Layout,
SettingsLayout,
ExternalLink
},
store: () => store,
methods: {
onSubmit(event) {
event.preventDefault()
logInToInstance()
}
}
}
</script>