120 lines
2.5 KiB
Plaintext
120 lines
2.5 KiB
Plaintext
---
|
|
/*!
|
|
* © 2023 Nikita Karamov
|
|
* Licensed under AGPL v3 or later
|
|
*/
|
|
|
|
const { prefilledInstance } = Astro.props;
|
|
---
|
|
|
|
<datalist id="instance-list"></datalist>
|
|
<label id="s2f-instanceContainer">
|
|
Fediverse instance
|
|
<div class="instance-input">
|
|
<span id="https-label">https://</span>
|
|
<input
|
|
type="text"
|
|
name="instance"
|
|
id="instance"
|
|
placeholder="mastodon.social"
|
|
list="instance-list"
|
|
required
|
|
aria-describedby="https-label"
|
|
value={prefilledInstance}
|
|
/>
|
|
</div>
|
|
</label>
|
|
|
|
<label for="remember">
|
|
<input
|
|
type="checkbox"
|
|
id="remember"
|
|
name="remember"
|
|
/>
|
|
Remember my instance on this device
|
|
</label>
|
|
|
|
<style lang="scss">
|
|
:global(.previously-used) {
|
|
color: var(--s2f-accent-color-contrast);
|
|
cursor: pointer;
|
|
text-decoration: 1px solid underline currentColor;
|
|
}
|
|
|
|
.instance-input {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
input[type="text"] {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
width: 1%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { getUrlDomain, normalizeURL } from "@scripts/util";
|
|
import {
|
|
savedInstances as instanceStore,
|
|
saveInstance,
|
|
} from "@stores/saved-instances";
|
|
|
|
const $form = document.querySelector("#js-s2f-form") as HTMLFormElement;
|
|
const $instanceContainer = document.querySelector(
|
|
"#s2f-instanceContainer",
|
|
) as HTMLLabelElement;
|
|
const $instance = document.querySelector("#instance") as HTMLInputElement;
|
|
|
|
const savedInstances: Set<string> = instanceStore.get();
|
|
|
|
if (savedInstances.size > 0) {
|
|
$instanceContainer.append(
|
|
"Previously used: ",
|
|
...[...savedInstances]
|
|
.flatMap((instance: string, index: number) => {
|
|
if (!instance) {
|
|
return [];
|
|
}
|
|
|
|
const host = getUrlDomain(instance);
|
|
if (index == 0 && !$instance.value) {
|
|
$instance.value = host;
|
|
}
|
|
const element = document.createElement("span");
|
|
element.textContent = host;
|
|
element.classList.add("previously-used");
|
|
element.addEventListener("click", () => {
|
|
$instance.value = host;
|
|
});
|
|
return [element, ", "];
|
|
})
|
|
.slice(0, -1),
|
|
);
|
|
}
|
|
|
|
$form.addEventListener("submit", (event) => {
|
|
const formData = new FormData(event.target as HTMLFormElement);
|
|
|
|
if (formData.get("remember")) {
|
|
const instance = normalizeURL(formData.get("instance") as string);
|
|
|
|
saveInstance(instance);
|
|
}
|
|
|
|
return true;
|
|
});
|
|
</script>
|
|
<script src="../scripts/fetch-instances.ts"></script>
|