even more frontend stuff
This commit is contained in:
parent
8bba5f6137
commit
c0bb76580d
GPG key ID:
B4EF20DDE721CAA1
33 changed files with 796 additions and 178 deletions
|
|
@ -0,0 +1,22 @@
|
|||
import { apiRequest } from "$api";
|
||||
import ApiError from "$api/error";
|
||||
import type { Member } from "$api/models";
|
||||
import log from "$lib/log";
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
|
||||
export const load = async ({ parent, params, fetch, cookies }) => {
|
||||
const { meUser, token } = await parent();
|
||||
if (!meUser) redirect(303, "/");
|
||||
|
||||
try {
|
||||
const member = await apiRequest<Member>("GET", `/users/@me/members/${params.id}`, {
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
return { user: meUser, token: token!, member };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) throw e.obj;
|
||||
log.error("Error trying to fetch member %s:", params.id, e);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { t } from "$lib/i18n";
|
||||
import type { LayoutData } from "./$types";
|
||||
|
||||
type Props = { data: LayoutData; children: Snippet };
|
||||
let { data, children }: Props = $props();
|
||||
|
||||
const isActive = (path: string) => $page.url.pathname === path;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t("edit-profile.member-header", { name: data.member.name })} • pronouns.cc</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<h3>{$t("edit-profile.member-header", { name: data.member.name })}</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-3 mt-1 mb-3">
|
||||
<div class="list-group">
|
||||
<a
|
||||
href="/settings/members/{data.member.id}"
|
||||
class="list-group-item list-group-item-action"
|
||||
class:active={isActive(`/settings/members/${data.member.id}`)}
|
||||
>
|
||||
{$t("edit-profile.general-tab")}
|
||||
</a>
|
||||
<a
|
||||
href="/settings/members/{data.member.id}/names-pronouns"
|
||||
class="list-group-item list-group-item-action"
|
||||
class:active={isActive(`/settings/members/${data.member.id}/names-pronouns`)}
|
||||
>
|
||||
{$t("edit-profile.names-pronouns-tab")}
|
||||
</a>
|
||||
<a
|
||||
href="/settings/members/{data.member.id}/fields"
|
||||
class="list-group-item list-group-item-action"
|
||||
class:active={isActive(`/settings/members/${data.member.id}/fields`)}
|
||||
>
|
||||
{$t("edit-profile.fields-tab")}
|
||||
</a>
|
||||
<a
|
||||
href="/settings/members/{data.member.id}/flags-links"
|
||||
class="list-group-item list-group-item-action"
|
||||
class:active={isActive(`/settings/members/${data.member.id}/flags-links`)}
|
||||
>
|
||||
{$t("edit-profile.flags-links-tab")}
|
||||
</a>
|
||||
<a
|
||||
href="/@{data.user.username}/{data.member.name}"
|
||||
class="list-group-item list-group-item-action text-danger"
|
||||
>
|
||||
Back to member
|
||||
</a>
|
||||
<a href="/settings/members" class="list-group-item list-group-item-action text-danger">
|
||||
{$t("edit-profile.back-to-settings-tab")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import { apiRequest, fastRequest } from "$api";
|
||||
import ApiError, { ErrorCode, type RawApiError } from "$api/error";
|
||||
import type { Member } from "$api/models/member";
|
||||
import log from "$lib/log.js";
|
||||
|
||||
export const load = async ({ params, fetch, cookies }) => {
|
||||
try {
|
||||
const member = await apiRequest<Member>("GET", `/users/@me/members/${params.id}`, {
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
return { member };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) throw e.obj;
|
||||
log.error("Error trying to fetch member %s:", params.id, e);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
changeName: async ({ params, request, fetch, cookies }) => {
|
||||
const body = await request.formData();
|
||||
const name = body.get("name") as string | null;
|
||||
if (!name)
|
||||
return {
|
||||
error: {
|
||||
message: "You must pass a name.",
|
||||
status: 403,
|
||||
code: ErrorCode.BadRequest,
|
||||
} as RawApiError,
|
||||
ok: false,
|
||||
};
|
||||
|
||||
try {
|
||||
await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
|
||||
body: { name },
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
return { error: null, ok: true };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { error: e.obj, ok: false };
|
||||
log.error("Error updating name for member %s:", params.id, e);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
changeDisplayName: async ({ params, request, fetch, cookies }) => {
|
||||
const body = await request.formData();
|
||||
let displayName = body.get("display-name") as string | null;
|
||||
if (!displayName || displayName === "") displayName = null;
|
||||
|
||||
try {
|
||||
await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
|
||||
body: { display_name: displayName },
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
return { error: null, ok: true };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { error: e.obj, ok: false };
|
||||
log.error("Error updating name for member %s:", params.id, e);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
bio: async ({ params, request, fetch, cookies }) => {
|
||||
const body = await request.formData();
|
||||
const bio = body.get("bio") as string | null;
|
||||
|
||||
try {
|
||||
await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
|
||||
body: { bio },
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
return { error: null, ok: true };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { error: e.obj, ok: false };
|
||||
log.error("Error updating bio for member %s:", params.id, e);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
};
|
||||
115
Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte
Normal file
115
Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<script lang="ts">
|
||||
import { DateTime } from "luxon";
|
||||
import type { ActionData, PageData } from "./$types";
|
||||
import type { Member } from "$api/models";
|
||||
import { apiRequest, fastRequest } from "$api";
|
||||
import ApiError from "$api/error";
|
||||
import log from "$lib/log";
|
||||
import { InputGroup } from "@sveltestrap/sveltestrap";
|
||||
import { t } from "$lib/i18n";
|
||||
import AvatarEditor from "$components/editor/AvatarEditor.svelte";
|
||||
import ErrorAlert from "$components/ErrorAlert.svelte";
|
||||
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
|
||||
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
|
||||
import SidEditor from "$components/editor/SidEditor.svelte";
|
||||
import BioEditor from "$components/editor/BioEditor.svelte";
|
||||
|
||||
type Props = { data: PageData; form: ActionData };
|
||||
let { data, form }: Props = $props();
|
||||
|
||||
// SID reroll code
|
||||
// We compare the current time with the user's last SID reroll time. If it's more than an hour ago, it can be rerolled.
|
||||
let error: ApiError | null = $state(null);
|
||||
let sid = $state(data.member.sid);
|
||||
let lastSidReroll = $state(data.user.last_sid_reroll);
|
||||
let canRerollSid = $derived(
|
||||
DateTime.now().toLocal().diff(DateTime.fromISO(lastSidReroll).toLocal(), "hours").hours >= 1,
|
||||
);
|
||||
const rerollSid = async () => {
|
||||
try {
|
||||
const resp = await apiRequest<Member>(
|
||||
"POST",
|
||||
`/users/@me/members/${data.member.id}/reroll-sid`,
|
||||
{ token: data.token },
|
||||
);
|
||||
sid = resp.sid;
|
||||
lastSidReroll = DateTime.now().toUTC().toISO();
|
||||
error = null;
|
||||
} catch (e) {
|
||||
log.error("Could not reroll sid:", e);
|
||||
if (e instanceof ApiError) error = e;
|
||||
}
|
||||
};
|
||||
|
||||
// Passed to AvatarEditor
|
||||
let avatarUpdated = $state(false);
|
||||
const updateAvatar = async (avatar: string) => {
|
||||
try {
|
||||
await fastRequest("PATCH", `/users/@me/members/${data.member.id}`, {
|
||||
body: { avatar },
|
||||
token: data.token,
|
||||
});
|
||||
avatarUpdated = true;
|
||||
error = null;
|
||||
} catch (e) {
|
||||
log.error("Could not update avatar:", e);
|
||||
if (e instanceof ApiError) error = e;
|
||||
}
|
||||
};
|
||||
|
||||
// Bio is stored in a $state() so we have a markdown preview
|
||||
let bio = $state(data.member.bio || "");
|
||||
</script>
|
||||
|
||||
{#if error}
|
||||
<ErrorAlert error={error.obj} />
|
||||
{/if}
|
||||
|
||||
{#if form}
|
||||
<FormStatusMarker {form} />
|
||||
{/if}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<h4>{$t("settings.avatar")}</h4>
|
||||
<AvatarEditor
|
||||
current={data.member.avatar_url}
|
||||
alt={$t("avatar-tooltip", { name: data.member.name })}
|
||||
update={updateAvatar}
|
||||
updated={avatarUpdated}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<h4>{$t("edit-profile.member-name")}</h4>
|
||||
<form method="POST" action="?/changeName" class="mb-3">
|
||||
<InputGroup>
|
||||
<input name="name" class="form-control" type="text" value={data.member.name} />
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{$t("change")}
|
||||
</button>
|
||||
</InputGroup>
|
||||
</form>
|
||||
|
||||
<h4>{$t("edit-profile.display-name")}</h4>
|
||||
<form class="mb-3" method="POST" action="?/changeDisplayName">
|
||||
<InputGroup>
|
||||
<input
|
||||
class="form-control"
|
||||
name="display-name"
|
||||
placeholder={data.member.name}
|
||||
value={data.member.display_name !== data.member.name ? data.member.display_name : null}
|
||||
/>
|
||||
<button class="btn btn-primary" type="submit">{$t("change")}</button>
|
||||
</InputGroup>
|
||||
</form>
|
||||
|
||||
<h4>{$t("edit-profile.sid")}</h4>
|
||||
<SidEditor {rerollSid} {sid} {canRerollSid} />
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4>{$t("edit-profile.bio-tab")}</h4>
|
||||
<form method="POST" action="?/bio">
|
||||
<BioEditor bind:value={bio} maxLength={data.meta.limits.bio_length} />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue