mirror of
https://github.com/wukko/cobalt.git
synced 2025-01-22 10:46:19 +01:00
web/settings: add a reusable SettingsInput component
This commit is contained in:
wukko
parent
8415d0e4f3
commit
7c7cefe89b
3 changed files with 199 additions and 170 deletions
|
|
@ -1,167 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { get } from "svelte/store";
|
|
||||||
import { t } from "$lib/i18n/translations";
|
|
||||||
|
|
||||||
import settings, { updateSetting } from "$lib/state/settings";
|
|
||||||
import { customInstanceWarning } from "$lib/api/safety-warning";
|
|
||||||
|
|
||||||
import IconX from "@tabler/icons-svelte/IconX.svelte";
|
|
||||||
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
|
|
||||||
|
|
||||||
let inputValue = get(settings).processing.customInstanceURL;
|
|
||||||
let inputFocused = false;
|
|
||||||
|
|
||||||
let url: string;
|
|
||||||
let validUrl: boolean;
|
|
||||||
|
|
||||||
const checkUrl = () => {
|
|
||||||
try {
|
|
||||||
url = new URL(inputValue).origin.toString();
|
|
||||||
validUrl = true;
|
|
||||||
} catch {
|
|
||||||
validUrl = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const writeInput = () => {
|
|
||||||
let url;
|
|
||||||
try {
|
|
||||||
url = new URL(inputValue).origin.toString();
|
|
||||||
} catch {
|
|
||||||
return (validUrl = false);
|
|
||||||
}
|
|
||||||
updateSetting({
|
|
||||||
processing: {
|
|
||||||
customInstanceURL: url,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
inputValue = get(settings).processing.customInstanceURL;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="custom-instance-holder">
|
|
||||||
<div id="input-container" class:focused={inputFocused}>
|
|
||||||
<input
|
|
||||||
id="custom-instance-input"
|
|
||||||
bind:value={inputValue}
|
|
||||||
on:input={() => {
|
|
||||||
checkUrl();
|
|
||||||
inputFocused = true;
|
|
||||||
}}
|
|
||||||
on:input={() => (inputFocused = true)}
|
|
||||||
on:focus={() => (inputFocused = true)}
|
|
||||||
on:blur={() => (inputFocused = false)}
|
|
||||||
spellcheck="false"
|
|
||||||
autocomplete="off"
|
|
||||||
autocapitalize="off"
|
|
||||||
maxlength="64"
|
|
||||||
placeholder={$t("settings.processing.custom.placeholder")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="custom-instance-buttons">
|
|
||||||
<button
|
|
||||||
id="instance-save"
|
|
||||||
class="custom-instance-button"
|
|
||||||
aria-label={$t("button.save")}
|
|
||||||
disabled={inputValue == $settings.processing.customInstanceURL ||
|
|
||||||
!validUrl}
|
|
||||||
on:click={async () => {
|
|
||||||
await customInstanceWarning();
|
|
||||||
if ($settings.processing.seenCustomWarning) {
|
|
||||||
if (inputValue) writeInput();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconCheck />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="instance-reset"
|
|
||||||
class="custom-instance-button"
|
|
||||||
aria-label={$t("button.reset")}
|
|
||||||
disabled={$settings.processing.customInstanceURL.length <= 0}
|
|
||||||
on:click={() => {
|
|
||||||
updateSetting({
|
|
||||||
processing: {
|
|
||||||
customInstanceURL: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
inputValue = get(settings).processing.customInstanceURL;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconX />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#custom-instance-holder {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#input-container {
|
|
||||||
padding: 0 18px;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--secondary);
|
|
||||||
background-color: var(--button);
|
|
||||||
box-shadow: var(--button-box-shadow);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#input-container,
|
|
||||||
#custom-instance-input {
|
|
||||||
font-size: 13.5px;
|
|
||||||
font-weight: 500;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-instance-input {
|
|
||||||
flex: 1;
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--secondary);
|
|
||||||
border: none;
|
|
||||||
padding-block: 0;
|
|
||||||
padding-inline: 0;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-instance-input::placeholder {
|
|
||||||
color: var(--gray);
|
|
||||||
/* fix for firefox */
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-instance-input:focus-visible {
|
|
||||||
box-shadow: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#input-container.focused {
|
|
||||||
box-shadow: 0 0 0 2px var(--secondary) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-instance-buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-instance-button {
|
|
||||||
height: 42px;
|
|
||||||
width: 42px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-instance-button :global(svg) {
|
|
||||||
height: 21px;
|
|
||||||
width: 21px;
|
|
||||||
stroke-width: 1.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-instance-button[disabled] {
|
|
||||||
opacity: 0.5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
193
web/src/components/settings/SettingsInput.svelte
Normal file
193
web/src/components/settings/SettingsInput.svelte
Normal file
|
|
@ -0,0 +1,193 @@
|
||||||
|
<script
|
||||||
|
lang="ts"
|
||||||
|
generics="
|
||||||
|
Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
|
||||||
|
Id extends keyof CobaltSettings[Context]
|
||||||
|
"
|
||||||
|
>
|
||||||
|
import { get } from "svelte/store";
|
||||||
|
import { t } from "$lib/i18n/translations";
|
||||||
|
import type { CobaltSettings } from "$lib/types/settings";
|
||||||
|
|
||||||
|
import settings, { updateSetting } from "$lib/state/settings";
|
||||||
|
import { customInstanceWarning } from "$lib/api/safety-warning";
|
||||||
|
|
||||||
|
import IconX from "@tabler/icons-svelte/IconX.svelte";
|
||||||
|
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
|
||||||
|
|
||||||
|
export let settingId: Id;
|
||||||
|
export let settingContext: Context;
|
||||||
|
export let placeholder: string;
|
||||||
|
export let type: "url" | "uuid" = "url";
|
||||||
|
|
||||||
|
const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
|
||||||
|
|
||||||
|
let inputValue: string = String(get(settings)[settingContext][settingId]);
|
||||||
|
let inputFocused = false;
|
||||||
|
|
||||||
|
let validInput: boolean;
|
||||||
|
|
||||||
|
const checkInput = () => {
|
||||||
|
try {
|
||||||
|
if (type === "uuid") {
|
||||||
|
const regex = UUID_REGEX.test(inputValue);
|
||||||
|
if (!regex) throw new Error("invalid uuid");
|
||||||
|
} else {
|
||||||
|
new URL(inputValue).origin.toString();
|
||||||
|
}
|
||||||
|
validInput = true;
|
||||||
|
} catch {
|
||||||
|
validInput = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const writeInput = () => {
|
||||||
|
let input;
|
||||||
|
try {
|
||||||
|
if (type === "uuid") {
|
||||||
|
const regex = UUID_REGEX.test(inputValue);
|
||||||
|
if (regex) input = inputValue.toString();
|
||||||
|
} else {
|
||||||
|
input = new URL(inputValue).origin.toString();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
validInput = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSetting({
|
||||||
|
[settingContext]: {
|
||||||
|
[settingId]: input,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
inputValue = String(get(settings)[settingContext][settingId]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
updateSetting({
|
||||||
|
[settingContext]: {
|
||||||
|
[settingId]: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
inputValue = String(get(settings)[settingContext][settingId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
await customInstanceWarning();
|
||||||
|
if ($settings.processing.seenCustomWarning && inputValue) {
|
||||||
|
writeInput();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="settings-input-holder">
|
||||||
|
<div id="input-container" class:focused={inputFocused}>
|
||||||
|
<input
|
||||||
|
id="input-box"
|
||||||
|
bind:value={inputValue}
|
||||||
|
on:input={() => checkInput()}
|
||||||
|
on:input={() => (inputFocused = true)}
|
||||||
|
on:focus={() => (inputFocused = true)}
|
||||||
|
on:blur={() => (inputFocused = false)}
|
||||||
|
spellcheck="false"
|
||||||
|
autocomplete="off"
|
||||||
|
autocapitalize="off"
|
||||||
|
maxlength="64"
|
||||||
|
{placeholder}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="settings-input-buttons">
|
||||||
|
<button
|
||||||
|
class="settings-input-button"
|
||||||
|
aria-label={$t("button.save")}
|
||||||
|
disabled={
|
||||||
|
inputValue == $settings[settingContext][settingId] || !validInput
|
||||||
|
}
|
||||||
|
on:click={save}
|
||||||
|
>
|
||||||
|
<IconCheck />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="settings-input-button"
|
||||||
|
aria-label={$t("button.reset")}
|
||||||
|
disabled={String($settings[settingContext][settingId]).length <= 0}
|
||||||
|
on:click={() => reset()}
|
||||||
|
>
|
||||||
|
<IconX />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#settings-input-holder {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-container {
|
||||||
|
padding: 0 18px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--secondary);
|
||||||
|
background-color: var(--button);
|
||||||
|
box-shadow: var(--button-box-shadow);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-container,
|
||||||
|
#input-box {
|
||||||
|
font-size: 13.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-box {
|
||||||
|
flex: 1;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--secondary);
|
||||||
|
border: none;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: 0;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-box::placeholder {
|
||||||
|
color: var(--gray);
|
||||||
|
/* fix for firefox */
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-box:focus-visible {
|
||||||
|
box-shadow: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-container.focused {
|
||||||
|
box-shadow: 0 0 0 2px var(--secondary) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-input-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-input-button {
|
||||||
|
height: 42px;
|
||||||
|
width: 42px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-input-button :global(svg) {
|
||||||
|
height: 21px;
|
||||||
|
width: 21px;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-input-button[disabled] {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,15 +3,14 @@
|
||||||
|
|
||||||
import { t } from "$lib/i18n/translations";
|
import { t } from "$lib/i18n/translations";
|
||||||
|
|
||||||
|
import SettingsInput from "$components/settings/SettingsInput.svelte";
|
||||||
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
|
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
|
||||||
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
|
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
|
||||||
import CustomInstanceInput from "$components/settings/CustomInstanceInput.svelte";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SettingsCategory
|
<SettingsCategory
|
||||||
sectionId="community"
|
sectionId="community"
|
||||||
title={$t("settings.processing.community")}
|
title={$t("settings.processing.community")}
|
||||||
beta
|
|
||||||
>
|
>
|
||||||
<div class="category-inside-group">
|
<div class="category-inside-group">
|
||||||
<SettingsToggle
|
<SettingsToggle
|
||||||
|
|
@ -20,7 +19,11 @@
|
||||||
title={$t("settings.processing.enable_custom.title")}
|
title={$t("settings.processing.enable_custom.title")}
|
||||||
/>
|
/>
|
||||||
{#if $settings.processing.enableCustomInstances}
|
{#if $settings.processing.enableCustomInstances}
|
||||||
<CustomInstanceInput />
|
<SettingsInput
|
||||||
|
settingContext="processing"
|
||||||
|
settingId="customInstanceURL"
|
||||||
|
placeholder="https://instance.url.example/"
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="subtext">
|
<div class="subtext">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue