feat(frontend): fields editor
This commit is contained in:
parent
7c52ab759c
commit
f435ad4cf5
GPG key ID:
B4EF20DDE721CAA1
7 changed files with 319 additions and 166 deletions
|
|
@ -2,14 +2,25 @@
|
|||
import type { CustomPreference, FieldEntry } from "$api/models";
|
||||
import IconButton from "$components/IconButton.svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import { InputGroup, InputGroupText } from "@sveltestrap/sveltestrap";
|
||||
import FieldEntryEditor from "./FieldEntryEditor.svelte";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
entries: FieldEntry[];
|
||||
allPreferences: Record<string, CustomPreference>;
|
||||
index?: number;
|
||||
move?: (index: number, up: boolean) => void;
|
||||
remove?: (index: number) => void;
|
||||
};
|
||||
let { name, entries = $bindable(), allPreferences }: Props = $props();
|
||||
let {
|
||||
name = $bindable(),
|
||||
entries = $bindable(),
|
||||
allPreferences,
|
||||
index,
|
||||
move,
|
||||
remove,
|
||||
}: Props = $props();
|
||||
|
||||
let newEntry = $state("");
|
||||
|
||||
|
|
@ -38,19 +49,45 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<h4>{name}</h4>
|
||||
{#if index !== undefined && move && remove}
|
||||
<div class="d-flex">
|
||||
<InputGroup>
|
||||
<IconButton
|
||||
icon="chevron-up"
|
||||
color="secondary"
|
||||
tooltip={$t("editor.move-field-up")}
|
||||
onclick={() => move(index, true)}
|
||||
/>
|
||||
<IconButton
|
||||
icon="chevron-down"
|
||||
color="secondary"
|
||||
tooltip={$t("editor.move-field-down")}
|
||||
onclick={() => move(index, false)}
|
||||
/>
|
||||
<InputGroupText>{$t("editor.field-name")}</InputGroupText>
|
||||
<input class="form-control" bind:value={name} />
|
||||
<IconButton
|
||||
color="danger"
|
||||
icon="trash3"
|
||||
tooltip={$t("editor.remove-field")}
|
||||
onclick={() => remove(index)}
|
||||
/>
|
||||
</InputGroup>
|
||||
</div>
|
||||
{:else}
|
||||
<h4>{name}</h4>
|
||||
{/if}
|
||||
|
||||
{#each entries as _, index}
|
||||
<FieldEntryEditor
|
||||
{index}
|
||||
bind:value={entries[index]}
|
||||
{allPreferences}
|
||||
{moveValue}
|
||||
{removeValue}
|
||||
/>
|
||||
{#each entries as _, i}
|
||||
<FieldEntryEditor index={i} bind:value={entries[i]} {allPreferences} {moveValue} {removeValue} />
|
||||
{/each}
|
||||
|
||||
<form class="input-group m-1" onsubmit={addEntry}>
|
||||
<input type="text" class="form-control" bind:value={newEntry} />
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
bind:value={newEntry}
|
||||
placeholder={$t("editor.new-entry")}
|
||||
/>
|
||||
<IconButton type="submit" color="success" icon="plus" tooltip={$t("editor.add-entry")} />
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
icon="chevron-down"
|
||||
color="secondary"
|
||||
tooltip={$t("editor.move-entry-down")}
|
||||
onclick={() => moveValue(index, true)}
|
||||
onclick={() => moveValue(index, false)}
|
||||
/>
|
||||
<input type="text" class="form-control" bind:value={value.value} />
|
||||
<ButtonDropdown>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<script lang="ts">
|
||||
import type { RawApiError } from "$api/error";
|
||||
import type { CustomPreference, Field } from "$api/models";
|
||||
import IconButton from "$components/IconButton.svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import FieldEditor from "./FieldEditor.svelte";
|
||||
import FormStatusMarker from "./FormStatusMarker.svelte";
|
||||
import NoscriptWarning from "./NoscriptWarning.svelte";
|
||||
|
||||
type Props = {
|
||||
fields: Field[];
|
||||
ok: { ok: boolean; error: RawApiError | null } | null;
|
||||
allPreferences: Record<string, CustomPreference>;
|
||||
update: () => Promise<void>;
|
||||
};
|
||||
|
||||
let { fields = $bindable(), ok, allPreferences, update }: Props = $props();
|
||||
|
||||
let newFieldName = $state("");
|
||||
|
||||
const moveField = (index: number, up: boolean) => {
|
||||
if (up && index == 0) return;
|
||||
if (!up && index == fields.length - 1) return;
|
||||
|
||||
const newIndex = up ? index - 1 : index + 1;
|
||||
const temp = fields[index];
|
||||
fields[index] = fields[newIndex];
|
||||
fields[newIndex] = temp;
|
||||
fields = [...fields];
|
||||
};
|
||||
|
||||
const removeField = (index: number) => {
|
||||
fields.splice(index, 1);
|
||||
fields = [...fields];
|
||||
};
|
||||
|
||||
const addField = (event: Event) => {
|
||||
event.preventDefault();
|
||||
if (!newFieldName) return;
|
||||
|
||||
fields = [...fields, { name: newFieldName, entries: [] }];
|
||||
newFieldName = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<NoscriptWarning />
|
||||
<FormStatusMarker form={ok} />
|
||||
|
||||
<h4>{$t("edit-profile.editing-fields-header")}</h4>
|
||||
|
||||
<div>
|
||||
<h5>{$t("editor.add-field")}</h5>
|
||||
<form class="input-group m-1" onsubmit={addField}>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
bind:value={newFieldName}
|
||||
placeholder={$t("editor.field-name")}
|
||||
/>
|
||||
<IconButton type="submit" color="success" icon="plus" tooltip={$t("editor.add-field")} />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if fields.length > 0}
|
||||
<hr />
|
||||
{#each fields as field, index}
|
||||
<FieldEditor
|
||||
{index}
|
||||
bind:name={field.name}
|
||||
bind:entries={field.entries}
|
||||
{allPreferences}
|
||||
move={moveField}
|
||||
remove={removeField}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
<div>
|
||||
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
|
||||
</div>
|
||||
|
|
@ -1,150 +1,157 @@
|
|||
{
|
||||
"hello": "Hello, {{name}}!",
|
||||
"nav": {
|
||||
"log-in": "Log in or sign up",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"avatar-tooltip": "Avatar for {{name}}",
|
||||
"profile": {
|
||||
"edit-member-profile-notice": "You are currently viewing the public profile of {{memberName}}.",
|
||||
"edit-user-profile-notice": "You are currently viewing your public profile.",
|
||||
"edit-profile-link": "Edit profile",
|
||||
"names-header": "Names",
|
||||
"pronouns-header": "Pronouns",
|
||||
"default-members-header": "Members",
|
||||
"create-member-button": "Create member",
|
||||
"back-to-user": "Back to {{name}}"
|
||||
},
|
||||
"title": {
|
||||
"log-in": "Log in",
|
||||
"welcome": "Welcome",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"auth": {
|
||||
"log-in-form-title": "Log in with email",
|
||||
"log-in-form-email-label": "Email address",
|
||||
"log-in-form-password-label": "Password",
|
||||
"register-with-email-button": "Register with email",
|
||||
"log-in-button": "Log in",
|
||||
"log-in-3rd-party-header": "Log in with another service",
|
||||
"log-in-3rd-party-desc": "If you prefer, you can also log in with one of these services:",
|
||||
"log-in-with-discord": "Log in with Discord",
|
||||
"log-in-with-google": "Log in with Google",
|
||||
"log-in-with-tumblr": "Log in with Tumblr",
|
||||
"log-in-with-the-fediverse": "Log in with the Fediverse",
|
||||
"remote-fediverse-account-label": "Your Fediverse account",
|
||||
"register-username-label": "Username",
|
||||
"register-button": "Register account",
|
||||
"register-with-mastodon": "Register with a Fediverse account",
|
||||
"log-in-with-fediverse-error-blurb": "Is your instance returning an error?",
|
||||
"log-in-with-fediverse-force-refresh-button": "Force a refresh on our end"
|
||||
},
|
||||
"error": {
|
||||
"bad-request-header": "Something was wrong with your input",
|
||||
"generic-header": "Something went wrong",
|
||||
"raw-header": "Raw error",
|
||||
"authentication-error": "Something went wrong when logging you in.",
|
||||
"bad-request": "Your input was rejected by the server, please check for any mistakes and try again.",
|
||||
"forbidden": "You are not allowed to perform that action.",
|
||||
"internal-server-error": "Server experienced an internal error, please try again later.",
|
||||
"authentication-required": "You need to log in first.",
|
||||
"missing-scopes": "The current token is missing a required scope. Did you manually edit your cookies?",
|
||||
"generic-error": "An unknown error occurred.",
|
||||
"user-not-found": "User not found, please check your spelling and try again. Remember that usernames are case sensitive.",
|
||||
"member-not-found": "Member not found, please check your spelling and try again.",
|
||||
"account-already-linked": "This account is already linked with a pronouns.cc account.",
|
||||
"last-auth-method": "You cannot remove your last authentication method.",
|
||||
"validation-max-length-error": "Value is too long, maximum length is {{max}}, current length is {{actual}}.",
|
||||
"validation-min-length-error": "Value is too short, minimum length is {{min}}, current length is {{actual}}.",
|
||||
"validation-disallowed-value-1": "The following value is not allowed here",
|
||||
"validation-disallowed-value-2": "Allowed values are",
|
||||
"validation-reason": "Reason",
|
||||
"validation-generic": "The value you entered is not allowed here. Reason",
|
||||
"extra-info-header": "Extra error information",
|
||||
"noscript-title": "This page requires JavaScript",
|
||||
"noscript-info": "This page requires JavaScript to function correctly. Some buttons may not work, or the page may not work at all.",
|
||||
"noscript-short": "Requires JavaScript"
|
||||
},
|
||||
"settings": {
|
||||
"general-information-tab": "General information",
|
||||
"your-profile-tab": "Your profile",
|
||||
"members-tab": "Members",
|
||||
"authentication-tab": "Authentication",
|
||||
"export-tab": "Export your data",
|
||||
"change-username-button": "Change username",
|
||||
"username-change-hint": "Changing your username will make any existing links to your or your members' profiles invalid.\nYour username must be unique, be at most 40 characters long, and only contain letters from the basic English alphabet, dashes, underscores, and periods. Your username is used as part of your profile link, you can set a separate display name.",
|
||||
"username-update-error": "Could not update your username as the new username is invalid:\n{{message}}",
|
||||
"change-avatar-link": "Change your avatar here",
|
||||
"new-username": "New username",
|
||||
"table-role": "Role",
|
||||
"table-custom-preferences": "Custom preferences",
|
||||
"table-member-list-hidden": "Member list hidden?",
|
||||
"table-member-count": "Member count",
|
||||
"table-created-at": "Account created at",
|
||||
"table-id": "Your ID",
|
||||
"table-title": "Account information",
|
||||
"force-log-out-title": "Log out everywhere",
|
||||
"force-log-out-button": "Force log out",
|
||||
"force-log-out-hint": "If you think one of your tokens might have been compromised, you can log out on all devices by clicking this button.",
|
||||
"log-out-title": "Log out",
|
||||
"log-out-hint": "Use this button to log out on this device only.",
|
||||
"log-out-button": "Log out",
|
||||
"avatar": "Avatar",
|
||||
"username-update-success": "Successfully changed your username!",
|
||||
"create-member-title": "Create a new member",
|
||||
"create-member-name-label": "Member name"
|
||||
},
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
"edit-profile": {
|
||||
"user-header": "Editing your profile",
|
||||
"general-tab": "General",
|
||||
"names-pronouns-tab": "Names & pronouns",
|
||||
"file-too-large": "This file is too large, please resize it (maximum is {{max}}, the file you're trying to upload is {{current}})",
|
||||
"sid-current": "Current short ID:",
|
||||
"sid": "Short ID",
|
||||
"sid-reroll": "Reroll short ID",
|
||||
"sid-hint": "This ID is used in prns.cc links. You can reroll one short ID every hour (shared between your main profile and all members) by pressing the button above.",
|
||||
"sid-copy": "Copy short link",
|
||||
"update-avatar": "Update avatar",
|
||||
"avatar-updated": "Avatar updated! It might take a moment to be reflected on your profile.",
|
||||
"member-header-label": "\"Members\" header text",
|
||||
"member-header-info": "This is the text used for the \"Members\" heading. If you leave it blank, the default text will be used.",
|
||||
"hide-member-list-label": "Hide member list",
|
||||
"timezone-label": "Timezone",
|
||||
"timezone-preview": "This will show up on your profile like this:",
|
||||
"timezone-info": "This is optional. Your timezone is never shared directly, only the difference between UTC and your current timezone is.",
|
||||
"hide-member-list-info": "This only hides your member list. Individual members will still be visible to anyone with a direct link to their pages.",
|
||||
"profile-options-header": "Profile options",
|
||||
"bio-tab": "Bio",
|
||||
"saved-changes": "Successfully saved changes!",
|
||||
"bio-length-hint": "Using {{length}}/{{maxLength}} characters",
|
||||
"preview": "Preview",
|
||||
"fields-tab": "Fields",
|
||||
"flags-links-tab": "Flags & links",
|
||||
"back-to-settings-tab": "Back to settings",
|
||||
"member-header": "Editing profile of {{name}}",
|
||||
"username": "Username",
|
||||
"change-username-info": "As changing your username will also change all of your members' links, you can only change it in your account settings.",
|
||||
"change-username-link": "Go to settings",
|
||||
"member-name": "Name",
|
||||
"change-member-name": "Change name",
|
||||
"display-name": "Display name",
|
||||
"unlisted-label": "Hide from member list",
|
||||
"unlisted-note": "This only hides this member from your public member list. They will still be visible to anyone at this link:",
|
||||
"edit-names-pronouns-header": "Edit names and pronouns",
|
||||
"back-to-profile-tab": "Back to profile"
|
||||
},
|
||||
"save-changes": "Save changes",
|
||||
"change": "Change",
|
||||
"editor": {
|
||||
"remove-entry": "Remove entry",
|
||||
"move-entry-down": "Move entry down",
|
||||
"move-entry-up": "Move entry up",
|
||||
"add-entry": "Add entry",
|
||||
"change-display-text": "Change display text",
|
||||
"display-text-example": "Optional display text (e.g. it/its)",
|
||||
"display-text-label": "Display text",
|
||||
"display-text-info": "This is the short text shown on your profile page. If you leave it empty, it will default to the first two forms of the full set."
|
||||
}
|
||||
"hello": "Hello, {{name}}!",
|
||||
"nav": {
|
||||
"log-in": "Log in or sign up",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"avatar-tooltip": "Avatar for {{name}}",
|
||||
"profile": {
|
||||
"edit-member-profile-notice": "You are currently viewing the public profile of {{memberName}}.",
|
||||
"edit-user-profile-notice": "You are currently viewing your public profile.",
|
||||
"edit-profile-link": "Edit profile",
|
||||
"names-header": "Names",
|
||||
"pronouns-header": "Pronouns",
|
||||
"default-members-header": "Members",
|
||||
"create-member-button": "Create member",
|
||||
"back-to-user": "Back to {{name}}"
|
||||
},
|
||||
"title": {
|
||||
"log-in": "Log in",
|
||||
"welcome": "Welcome",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"auth": {
|
||||
"log-in-form-title": "Log in with email",
|
||||
"log-in-form-email-label": "Email address",
|
||||
"log-in-form-password-label": "Password",
|
||||
"register-with-email-button": "Register with email",
|
||||
"log-in-button": "Log in",
|
||||
"log-in-3rd-party-header": "Log in with another service",
|
||||
"log-in-3rd-party-desc": "If you prefer, you can also log in with one of these services:",
|
||||
"log-in-with-discord": "Log in with Discord",
|
||||
"log-in-with-google": "Log in with Google",
|
||||
"log-in-with-tumblr": "Log in with Tumblr",
|
||||
"log-in-with-the-fediverse": "Log in with the Fediverse",
|
||||
"remote-fediverse-account-label": "Your Fediverse account",
|
||||
"register-username-label": "Username",
|
||||
"register-button": "Register account",
|
||||
"register-with-mastodon": "Register with a Fediverse account",
|
||||
"log-in-with-fediverse-error-blurb": "Is your instance returning an error?",
|
||||
"log-in-with-fediverse-force-refresh-button": "Force a refresh on our end"
|
||||
},
|
||||
"error": {
|
||||
"bad-request-header": "Something was wrong with your input",
|
||||
"generic-header": "Something went wrong",
|
||||
"raw-header": "Raw error",
|
||||
"authentication-error": "Something went wrong when logging you in.",
|
||||
"bad-request": "Your input was rejected by the server, please check for any mistakes and try again.",
|
||||
"forbidden": "You are not allowed to perform that action.",
|
||||
"internal-server-error": "Server experienced an internal error, please try again later.",
|
||||
"authentication-required": "You need to log in first.",
|
||||
"missing-scopes": "The current token is missing a required scope. Did you manually edit your cookies?",
|
||||
"generic-error": "An unknown error occurred.",
|
||||
"user-not-found": "User not found, please check your spelling and try again. Remember that usernames are case sensitive.",
|
||||
"member-not-found": "Member not found, please check your spelling and try again.",
|
||||
"account-already-linked": "This account is already linked with a pronouns.cc account.",
|
||||
"last-auth-method": "You cannot remove your last authentication method.",
|
||||
"validation-max-length-error": "Value is too long, maximum length is {{max}}, current length is {{actual}}.",
|
||||
"validation-min-length-error": "Value is too short, minimum length is {{min}}, current length is {{actual}}.",
|
||||
"validation-disallowed-value-1": "The following value is not allowed here",
|
||||
"validation-disallowed-value-2": "Allowed values are",
|
||||
"validation-reason": "Reason",
|
||||
"validation-generic": "The value you entered is not allowed here. Reason",
|
||||
"extra-info-header": "Extra error information",
|
||||
"noscript-title": "This page requires JavaScript",
|
||||
"noscript-info": "This page requires JavaScript to function correctly. Some buttons may not work, or the page may not work at all.",
|
||||
"noscript-short": "Requires JavaScript"
|
||||
},
|
||||
"settings": {
|
||||
"general-information-tab": "General information",
|
||||
"your-profile-tab": "Your profile",
|
||||
"members-tab": "Members",
|
||||
"authentication-tab": "Authentication",
|
||||
"export-tab": "Export your data",
|
||||
"change-username-button": "Change username",
|
||||
"username-change-hint": "Changing your username will make any existing links to your or your members' profiles invalid.\nYour username must be unique, be at most 40 characters long, and only contain letters from the basic English alphabet, dashes, underscores, and periods. Your username is used as part of your profile link, you can set a separate display name.",
|
||||
"username-update-error": "Could not update your username as the new username is invalid:\n{{message}}",
|
||||
"change-avatar-link": "Change your avatar here",
|
||||
"new-username": "New username",
|
||||
"table-role": "Role",
|
||||
"table-custom-preferences": "Custom preferences",
|
||||
"table-member-list-hidden": "Member list hidden?",
|
||||
"table-member-count": "Member count",
|
||||
"table-created-at": "Account created at",
|
||||
"table-id": "Your ID",
|
||||
"table-title": "Account information",
|
||||
"force-log-out-title": "Log out everywhere",
|
||||
"force-log-out-button": "Force log out",
|
||||
"force-log-out-hint": "If you think one of your tokens might have been compromised, you can log out on all devices by clicking this button.",
|
||||
"log-out-title": "Log out",
|
||||
"log-out-hint": "Use this button to log out on this device only.",
|
||||
"log-out-button": "Log out",
|
||||
"avatar": "Avatar",
|
||||
"username-update-success": "Successfully changed your username!",
|
||||
"create-member-title": "Create a new member",
|
||||
"create-member-name-label": "Member name"
|
||||
},
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
"edit-profile": {
|
||||
"user-header": "Editing your profile",
|
||||
"general-tab": "General",
|
||||
"names-pronouns-tab": "Names & pronouns",
|
||||
"file-too-large": "This file is too large, please resize it (maximum is {{max}}, the file you're trying to upload is {{current}})",
|
||||
"sid-current": "Current short ID:",
|
||||
"sid": "Short ID",
|
||||
"sid-reroll": "Reroll short ID",
|
||||
"sid-hint": "This ID is used in prns.cc links. You can reroll one short ID every hour (shared between your main profile and all members) by pressing the button above.",
|
||||
"sid-copy": "Copy short link",
|
||||
"update-avatar": "Update avatar",
|
||||
"avatar-updated": "Avatar updated! It might take a moment to be reflected on your profile.",
|
||||
"member-header-label": "\"Members\" header text",
|
||||
"member-header-info": "This is the text used for the \"Members\" heading. If you leave it blank, the default text will be used.",
|
||||
"hide-member-list-label": "Hide member list",
|
||||
"timezone-label": "Timezone",
|
||||
"timezone-preview": "This will show up on your profile like this:",
|
||||
"timezone-info": "This is optional. Your timezone is never shared directly, only the difference between UTC and your current timezone is.",
|
||||
"hide-member-list-info": "This only hides your member list. Individual members will still be visible to anyone with a direct link to their pages.",
|
||||
"profile-options-header": "Profile options",
|
||||
"bio-tab": "Bio",
|
||||
"saved-changes": "Successfully saved changes!",
|
||||
"bio-length-hint": "Using {{length}}/{{maxLength}} characters",
|
||||
"preview": "Preview",
|
||||
"fields-tab": "Fields",
|
||||
"flags-links-tab": "Flags & links",
|
||||
"back-to-settings-tab": "Back to settings",
|
||||
"member-header": "Editing profile of {{name}}",
|
||||
"username": "Username",
|
||||
"change-username-info": "As changing your username will also change all of your members' links, you can only change it in your account settings.",
|
||||
"change-username-link": "Go to settings",
|
||||
"member-name": "Name",
|
||||
"change-member-name": "Change name",
|
||||
"display-name": "Display name",
|
||||
"unlisted-label": "Hide from member list",
|
||||
"unlisted-note": "This only hides this member from your public member list. They will still be visible to anyone at this link:",
|
||||
"edit-names-pronouns-header": "Edit names and pronouns",
|
||||
"back-to-profile-tab": "Back to profile",
|
||||
"editing-fields-header": "Editing fields"
|
||||
},
|
||||
"save-changes": "Save changes",
|
||||
"change": "Change",
|
||||
"editor": {
|
||||
"remove-entry": "Remove entry",
|
||||
"move-entry-down": "Move entry down",
|
||||
"move-entry-up": "Move entry up",
|
||||
"add-entry": "Add entry",
|
||||
"change-display-text": "Change display text",
|
||||
"display-text-example": "Optional display text (e.g. it/its)",
|
||||
"display-text-label": "Display text",
|
||||
"display-text-info": "This is the short text shown on your profile page. If you leave it empty, it will default to the first two forms of the full set.",
|
||||
"move-field-up": "Move field up",
|
||||
"move-field-down": "Move field down",
|
||||
"remove-field": "Remove field",
|
||||
"field-name": "Field name",
|
||||
"add-field": "Add field",
|
||||
"new-entry": "New entry"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
import { mergePreferences } from "$api/models/user";
|
||||
import FieldEditor from "$components/editor/FieldEditor.svelte";
|
||||
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
|
||||
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
|
||||
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import log from "$lib/log";
|
||||
|
|
@ -37,16 +38,15 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<NoscriptWarning />
|
||||
<FormStatusMarker form={ok} />
|
||||
|
||||
<div>
|
||||
<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<PronounsEditor bind:entries={pronouns} {allPreferences} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { apiRequest } from "$api";
|
||||
import ApiError, { type RawApiError } from "$api/error";
|
||||
import { mergePreferences, type User } from "$api/models/user";
|
||||
import FieldsEditor from "$components/editor/FieldsEditor.svelte";
|
||||
import log from "$lib/log";
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
type Props = { data: PageData };
|
||||
let { data }: Props = $props();
|
||||
|
||||
let fields = $state(data.user.fields);
|
||||
let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
|
||||
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
|
||||
|
||||
const update = async () => {
|
||||
try {
|
||||
const resp = await apiRequest<User>("PATCH", "/users/@me", {
|
||||
body: { fields },
|
||||
token: data.token,
|
||||
});
|
||||
fields = resp.fields;
|
||||
ok = { ok: true, error: null };
|
||||
} catch (e) {
|
||||
ok = { ok: false, error: null };
|
||||
log.error("Could not update fields:", e);
|
||||
if (e instanceof ApiError) ok.error = e.obj;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<FieldsEditor {fields} {ok} {allPreferences} {update} />
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import { mergePreferences, type User } from "$api/models/user";
|
||||
import FieldEditor from "$components/editor/FieldEditor.svelte";
|
||||
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
|
||||
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
|
||||
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import log from "$lib/log";
|
||||
|
|
@ -14,9 +15,7 @@
|
|||
|
||||
let names = $state(data.user.names);
|
||||
let pronouns = $state(data.user.pronouns);
|
||||
|
||||
let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
|
||||
|
||||
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
|
||||
|
||||
const update = async () => {
|
||||
|
|
@ -36,16 +35,15 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<NoscriptWarning />
|
||||
<FormStatusMarker form={ok} />
|
||||
|
||||
<div>
|
||||
<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<PronounsEditor bind:entries={pronouns} {allPreferences} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue