feat(frontend): start settings pages
This commit is contained in:
parent
8f3478d57a
commit
80ac16694c
GPG key ID:
B4EF20DDE721CAA1
6 changed files with 202 additions and 93 deletions
|
|
@ -93,7 +93,7 @@ export default function UserPage() {
|
|||
{user.member_title || t("user.heading.members")}{" "}
|
||||
{isMeUser && (
|
||||
// @ts-expect-error using as=Link causes an error here, even though it runs completely fine
|
||||
<Button as={Link} to="/settings/members/create" variant="success">
|
||||
<Button as={Link} to="/settings/new-member" variant="success">
|
||||
<PersonPlusFill /> {t("user.create-member-button")}
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default function MemberPage() {
|
|||
<Trans t={t} i18nKey="member.own-profile-alert" values={{ memberName: member.name }}>
|
||||
You are currently viewing the <strong>public</strong> profile of {{ memberName }}.
|
||||
<br />
|
||||
<Link to={`/settings/profile/${member.id}`}>Edit profile</Link>
|
||||
<Link to={`/settings/members/${member.id}`}>Edit profile</Link>
|
||||
</Trans>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,15 @@ import {
|
|||
useActionData,
|
||||
useLoaderData,
|
||||
ShouldRevalidateFunction,
|
||||
useNavigate,
|
||||
Navigate,
|
||||
} from "@remix-run/react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Form, Button, Alert } from "react-bootstrap";
|
||||
import ErrorAlert from "~/components/ErrorAlert";
|
||||
import i18n from "~/i18next.server";
|
||||
import { tokenCookieName } from "~/lib/utils";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||
return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
|
||||
|
|
@ -106,6 +109,16 @@ export default function DiscordCallbackPage() {
|
|||
const { t } = useTranslation();
|
||||
const data = useLoaderData<typeof loader>();
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (data.hasAccount) {
|
||||
navigate(`/@${data.user!.username}`);
|
||||
}
|
||||
}, 2000);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
if (data.hasAccount) {
|
||||
const username = data.user!.username;
|
||||
|
|
|
|||
18
Foxnouns.Frontend/app/routes/settings._index/route.tsx
Normal file
18
Foxnouns.Frontend/app/routes/settings._index/route.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { Table } from "react-bootstrap";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRouteLoaderData } from "@remix-run/react";
|
||||
import { loader as settingsLoader } from "../settings/route";
|
||||
|
||||
export default function SettingsIndex() {
|
||||
const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return <>
|
||||
<Table striped bordered>
|
||||
<tr>
|
||||
<th scope="row">{t("settings.general.id")}</th>
|
||||
<td><code>{user.id}</code></td>
|
||||
</tr>
|
||||
</Table>
|
||||
</>
|
||||
}
|
||||
65
Foxnouns.Frontend/app/routes/settings/route.tsx
Normal file
65
Foxnouns.Frontend/app/routes/settings/route.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { LoaderFunctionArgs, json, redirect, MetaFunction } from "@remix-run/node";
|
||||
import i18n from "~/i18next.server";
|
||||
import serverRequest, { getToken } from "~/lib/request.server";
|
||||
import { User } from "~/lib/api/user";
|
||||
import { Link, Outlet, useLocation } from "@remix-run/react";
|
||||
import { Nav } from "react-bootstrap";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||
return [{ title: `${data?.meta.title || "Settings"} • pronouns.cc` }];
|
||||
};
|
||||
|
||||
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
||||
const t = await i18n.getFixedT(request);
|
||||
const token = getToken(request);
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
const user = await serverRequest<User>("GET", "/users/@me", { token });
|
||||
return json({ user, meta: { title: t("settings.title") } });
|
||||
} catch (e) {
|
||||
return redirect("/auth/log-in");
|
||||
}
|
||||
}
|
||||
|
||||
return redirect("/auth/log-in");
|
||||
};
|
||||
|
||||
export default function SettingsLayout() {
|
||||
const { t } = useTranslation();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav variant="pills" justify fill className="flex-column flex-md-row">
|
||||
<Nav.Link active={pathname === "/settings"} as={Link} to="/settings">
|
||||
{t("settings.nav.general-information")}
|
||||
</Nav.Link>
|
||||
<Nav.Link
|
||||
active={pathname.startsWith("/settings/profile")}
|
||||
as={Link}
|
||||
to="/settings/profile"
|
||||
>
|
||||
{t("settings.nav.profile")}
|
||||
</Nav.Link>
|
||||
<Nav.Link
|
||||
active={pathname.startsWith("/settings/members")}
|
||||
as={Link}
|
||||
to="/settings/members"
|
||||
>
|
||||
{t("settings.nav.members")}
|
||||
</Nav.Link>
|
||||
<Nav.Link active={pathname.startsWith("/settings/auth")} as={Link} to="/settings/auth">
|
||||
{t("settings.nav.authentication")}
|
||||
</Nav.Link>
|
||||
<Nav.Link active={pathname === "/settings/export"} as={Link} to="/settings/export">
|
||||
{t("settings.nav.export")}
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
<div className="my-3">
|
||||
<Outlet />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,93 +1,106 @@
|
|||
{
|
||||
"error": {
|
||||
"heading": "An error occurred",
|
||||
"validation": {
|
||||
"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
|
||||
"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
|
||||
"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
|
||||
"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
|
||||
"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
|
||||
},
|
||||
"errors": {
|
||||
"authentication-error": "There was an error validating your credentials.",
|
||||
"authentication-required": "You need to log in.",
|
||||
"bad-request": "Server rejected your input, please check anything for errors.",
|
||||
"forbidden": "You are not allowed to perform that action.",
|
||||
"generic-error": "An unknown error occurred.",
|
||||
"internal-server-error": "Server experienced an internal error, please try again later.",
|
||||
"member-not-found": "Member not found, please check your spelling and try again.",
|
||||
"user-not-found": "User not found, please check your spelling and try again."
|
||||
},
|
||||
"title": "An error occurred",
|
||||
"more-info": "Click here for a more detailed error"
|
||||
},
|
||||
"navbar": {
|
||||
"view-profile": "View profile",
|
||||
"settings": "Settings",
|
||||
"log-out": "Log out",
|
||||
"log-in": "Log in or sign up"
|
||||
},
|
||||
"user": {
|
||||
"avatar-alt": "Avatar for @{{username}}",
|
||||
"heading": {
|
||||
"names": "Names",
|
||||
"pronouns": "Pronouns",
|
||||
"members": "Members"
|
||||
},
|
||||
"member-avatar-alt": "Avatar for {{name}}",
|
||||
"member-hidden": "This member is unlisted, and not shown in your public member list.",
|
||||
"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
|
||||
"create-member-button": "Create member",
|
||||
"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>"
|
||||
},
|
||||
"member": {
|
||||
"avatar-alt": "Avatar for {{name}}",
|
||||
"own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>",
|
||||
"back": "Back to {{name}}"
|
||||
},
|
||||
"log-in": {
|
||||
"callback": {
|
||||
"title": {
|
||||
"discord-success": "Log in with Discord",
|
||||
"discord-register": "Register with Discord"
|
||||
},
|
||||
"success": "Successfully logged in!",
|
||||
"success-link": "Welcome back, <1>@{{username}}</1>!",
|
||||
"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
|
||||
"remote-username": {
|
||||
"discord": "Your discord username"
|
||||
},
|
||||
"username": "Username",
|
||||
"sign-up-button": "Sign up",
|
||||
"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
|
||||
"invalid-username": "Invalid username",
|
||||
"username-taken": "That username is already taken, please try something else."
|
||||
},
|
||||
"title": "Log in",
|
||||
"form-title": "Log in with email",
|
||||
"email": "Email address",
|
||||
"password": "Password",
|
||||
"log-in-button": "Log in",
|
||||
"register-with-email": "Register with email",
|
||||
"3rd-party": {
|
||||
"title": "Log in with another service",
|
||||
"desc": "If you prefer, you can also log in with one of these services:",
|
||||
"discord": "Log in with Discord",
|
||||
"google": "Log in with Google",
|
||||
"tumblr": "Log in with Tumblr"
|
||||
},
|
||||
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
|
||||
},
|
||||
"welcome": {
|
||||
"title": "Welcome",
|
||||
"header": "Welcome to pronouns.cc!",
|
||||
"blurb": "{welcome.blurb}",
|
||||
"customize-profile": "Customize your profile",
|
||||
"customize-profile-blurb": "{welcome.customize-profile-blurb}",
|
||||
"create-members": "Create members",
|
||||
"create-members-blurb": "{welcome.create-members-blurb}",
|
||||
"custom-preferences": "Customize your preferences",
|
||||
"custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
|
||||
"profile-button": "Go to your profile"
|
||||
}
|
||||
"error": {
|
||||
"heading": "An error occurred",
|
||||
"validation": {
|
||||
"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
|
||||
"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
|
||||
"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
|
||||
"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
|
||||
"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
|
||||
},
|
||||
"errors": {
|
||||
"authentication-error": "There was an error validating your credentials.",
|
||||
"authentication-required": "You need to log in.",
|
||||
"bad-request": "Server rejected your input, please check anything for errors.",
|
||||
"forbidden": "You are not allowed to perform that action.",
|
||||
"generic-error": "An unknown error occurred.",
|
||||
"internal-server-error": "Server experienced an internal error, please try again later.",
|
||||
"member-not-found": "Member not found, please check your spelling and try again.",
|
||||
"user-not-found": "User not found, please check your spelling and try again."
|
||||
},
|
||||
"title": "An error occurred",
|
||||
"more-info": "Click here for a more detailed error"
|
||||
},
|
||||
"navbar": {
|
||||
"view-profile": "View profile",
|
||||
"settings": "Settings",
|
||||
"log-out": "Log out",
|
||||
"log-in": "Log in or sign up"
|
||||
},
|
||||
"user": {
|
||||
"avatar-alt": "Avatar for @{{username}}",
|
||||
"heading": {
|
||||
"names": "Names",
|
||||
"pronouns": "Pronouns",
|
||||
"members": "Members"
|
||||
},
|
||||
"member-avatar-alt": "Avatar for {{name}}",
|
||||
"member-hidden": "This member is unlisted, and not shown in your public member list.",
|
||||
"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
|
||||
"create-member-button": "Create member",
|
||||
"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>"
|
||||
},
|
||||
"member": {
|
||||
"avatar-alt": "Avatar for {{name}}",
|
||||
"own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>",
|
||||
"back": "Back to {{name}}"
|
||||
},
|
||||
"log-in": {
|
||||
"callback": {
|
||||
"title": {
|
||||
"discord-success": "Log in with Discord",
|
||||
"discord-register": "Register with Discord"
|
||||
},
|
||||
"success": "Successfully logged in!",
|
||||
"success-link": "Welcome back, <1>@{{username}}</1>!",
|
||||
"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
|
||||
"remote-username": {
|
||||
"discord": "Your discord username"
|
||||
},
|
||||
"username": "Username",
|
||||
"sign-up-button": "Sign up",
|
||||
"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
|
||||
"invalid-username": "Invalid username",
|
||||
"username-taken": "That username is already taken, please try something else."
|
||||
},
|
||||
"title": "Log in",
|
||||
"form-title": "Log in with email",
|
||||
"email": "Email address",
|
||||
"password": "Password",
|
||||
"log-in-button": "Log in",
|
||||
"register-with-email": "Register with email",
|
||||
"3rd-party": {
|
||||
"title": "Log in with another service",
|
||||
"desc": "If you prefer, you can also log in with one of these services:",
|
||||
"discord": "Log in with Discord",
|
||||
"google": "Log in with Google",
|
||||
"tumblr": "Log in with Tumblr"
|
||||
},
|
||||
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
|
||||
},
|
||||
"welcome": {
|
||||
"title": "Welcome",
|
||||
"header": "Welcome to pronouns.cc!",
|
||||
"blurb": "{welcome.blurb}",
|
||||
"customize-profile": "Customize your profile",
|
||||
"customize-profile-blurb": "{welcome.customize-profile-blurb}",
|
||||
"create-members": "Create members",
|
||||
"create-members-blurb": "{welcome.create-members-blurb}",
|
||||
"custom-preferences": "Customize your preferences",
|
||||
"custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
|
||||
"profile-button": "Go to your profile"
|
||||
},
|
||||
"settings": {
|
||||
"general": {
|
||||
"id": "Your user ID"
|
||||
},
|
||||
"title": "Settings",
|
||||
"nav": {
|
||||
"general-information": "General information",
|
||||
"profile": "Base profile",
|
||||
"members": "Members",
|
||||
"authentication": "Authentication",
|
||||
"export": "Export your data"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue