130 lines
2.8 KiB
Plaintext
130 lines
2.8 KiB
Plaintext
---
|
|
/*!
|
|
* © 2023 Nikita Karamov
|
|
* Licensed under AGPL v3 or later
|
|
*/
|
|
|
|
const { prefilledInstance } = Astro.props;
|
|
---
|
|
|
|
<datalist id="instances"></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="instances"
|
|
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, save } from "@stores/saved-instances";
|
|
import { $popularInstances } from "@stores/popular-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> = $savedInstances.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);
|
|
|
|
save(instance);
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
const instancesElement = document.querySelector("#instances");
|
|
if (instancesElement != undefined) {
|
|
$popularInstances.subscribe((instances) => {
|
|
instancesElement.replaceChildren(
|
|
...instances.map((domain) => {
|
|
const option = document.createElement("option");
|
|
option.value = domain;
|
|
return option;
|
|
}),
|
|
);
|
|
});
|
|
}
|
|
</script>
|