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 SettingsInput from "$components/settings/SettingsInput.svelte";
|
||||
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
|
||||
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
|
||||
import CustomInstanceInput from "$components/settings/CustomInstanceInput.svelte";
|
||||
</script>
|
||||
|
||||
<SettingsCategory
|
||||
sectionId="community"
|
||||
title={$t("settings.processing.community")}
|
||||
beta
|
||||
>
|
||||
<div class="category-inside-group">
|
||||
<SettingsToggle
|
||||
|
|
@ -20,7 +19,11 @@
|
|||
title={$t("settings.processing.enable_custom.title")}
|
||||
/>
|
||||
{#if $settings.processing.enableCustomInstances}
|
||||
<CustomInstanceInput />
|
||||
<SettingsInput
|
||||
settingContext="processing"
|
||||
settingId="customInstanceURL"
|
||||
placeholder="https://instance.url.example/"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="subtext">
|
||||
|
|
|
|||
Loading…
Reference in a new issue