@@ -168,6 +177,30 @@ function RootComponent() {
)}
+
+
+
+
+
+ {m['languages.title']()}
+
+ {locales.map((locale) => (
+
+
+
+ ))}
+
+
+
diff --git a/src/routes/api/users.$id.ts b/src/routes/api/users.$id.ts
deleted file mode 100644
index 0038365..0000000
--- a/src/routes/api/users.$id.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { json } from '@tanstack/react-start';
-import { createAPIFileRoute } from '@tanstack/react-start/api';
-import type { User } from '../../utils/users';
-
-export const APIRoute = createAPIFileRoute('/api/users/$id')({
- GET: async ({ request, params }) => {
- console.info(`Fetching users by id=${params.id}... @`, request.url);
- try {
- const res = await fetch(
- `https://jsonplaceholder.typicode.com/users/${params.id}`,
- );
- if (!res.ok) {
- throw new Error('Failed to fetch user');
- }
-
- const user = (await res.json()) as User;
-
- return json({
- id: user.id,
- name: user.name,
- email: user.email,
- });
- } catch (e) {
- console.error(e);
- return json({ error: 'User not found' }, { status: 404 });
- }
- },
-});
diff --git a/src/routes/api/users.ts b/src/routes/api/users.ts
deleted file mode 100644
index 61ad3e5..0000000
--- a/src/routes/api/users.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { json } from '@tanstack/react-start'
-import { createAPIFileRoute } from '@tanstack/react-start/api'
-import type { User } from '../../utils/users'
-
-export const APIRoute = createAPIFileRoute('/api/users')({
- GET: async ({ request }) => {
- console.info('Fetching users... @', request.url)
- const res = await fetch('https://jsonplaceholder.typicode.com/users')
- if (!res.ok) {
- throw new Error('Failed to fetch users')
- }
-
- const data = (await res.json()) as Array
-
- const list = data.slice(0, 10)
-
- return json(list.map((u) => ({ id: u.id, name: u.name, email: u.email })))
- },
-})
diff --git a/src/routes/download.tsx b/src/routes/download.tsx
new file mode 100644
index 0000000..354d7db
--- /dev/null
+++ b/src/routes/download.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/download')({
+ component: Page,
+});
+
+function Page() {
+ return Hello "/download"!
;
+}
diff --git a/src/routes/forgot-password.tsx b/src/routes/forgot-password.tsx
index 6d5cb5b..e0cb15b 100644
--- a/src/routes/forgot-password.tsx
+++ b/src/routes/forgot-password.tsx
@@ -9,12 +9,15 @@ import {
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { forgotPassword, ForgotPasswordSchema } from '@/lib/actions/password';
+import { isValidationError } from '@/lib/utils/http';
+import { m } from '@/paraglide/messages';
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
import { useMutation } from '@tanstack/react-query';
import { createFileRoute, redirect } from '@tanstack/react-router';
import { useServerFn } from '@tanstack/react-start';
import { LoaderCircleIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
import type { z } from 'zod/v4';
export const Route = createFileRoute('/forgot-password')({
@@ -25,10 +28,10 @@ export const Route = createFileRoute('/forgot-password')({
});
}
},
- component: RouteComponent,
+ component: Page,
});
-function RouteComponent() {
+function Page() {
const serverFn = useServerFn(forgotPassword);
const form = useForm>({
@@ -38,7 +41,30 @@ function RouteComponent() {
const mutation = useMutation({
mutationFn: async (payload: z.infer) =>
await serverFn({ data: payload }),
- // TODO Sonner
+ onMutate: () => {
+ return {
+ toastId: toast.loading(m['forgot-password.mutation.pending']()),
+ };
+ },
+ onSuccess: (_data, _variables, context) => {
+ toast.success(m['forgot-password.mutation.success'](), {
+ id: context.toastId,
+ });
+ },
+ onError: (err, _variables, context) => {
+ toast.error(err.message, {
+ id: context?.toastId,
+ });
+
+ if (isValidationError>(err)) {
+ for (const [key, errors] of Object.entries(err.errors) as [
+ keyof typeof err.errors,
+ string[],
+ ][]) {
+ form.setError(key, { message: errors[0] });
+ }
+ }
+ },
});
const onSubmit = form.handleSubmit((payload) => mutation.mutate(payload));
@@ -51,9 +77,13 @@ function RouteComponent() {
name="email"
render={({ field }) => (
- Email
+ {m['forgot-password.form.email']()}
-
+
@@ -63,7 +93,7 @@ function RouteComponent() {
{mutation.isPending && (
)}
- Recover password
+ {m['forgot-password.form.submit']()}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 5a17456..72dfe4f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,13 +1,17 @@
+import { helloWorld } from '@/lib/actions/test';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/')({
component: Page,
+ loader: async () => await helloWorld(),
});
function Page() {
+ const message = Route.useLoaderData();
+
return (
-
Welcome Home!!!
+ {message}
);
}
diff --git a/src/routes/profile/change-email.tsx b/src/routes/profile/change-email.tsx
index 90eae2c..3da9b3c 100644
--- a/src/routes/profile/change-email.tsx
+++ b/src/routes/profile/change-email.tsx
@@ -1,9 +1,111 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { changeEmail, ChangeEmailSchema } from '@/lib/actions/profile';
+import { isValidationError } from '@/lib/utils/http';
+import { m } from '@/paraglide/messages';
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
+import { useMutation } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useServerFn } from '@tanstack/react-start';
+import { LoaderCircleIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import type { z } from 'zod/v4';
export const Route = createFileRoute('/profile/change-email')({
component: Page,
-})
+});
function Page() {
- return Hello "/profile/change-email"!
+ const serverFn = useServerFn(changeEmail);
+
+ const form = useForm>({
+ resolver: standardSchemaResolver(ChangeEmailSchema),
+ });
+
+ const mutation = useMutation({
+ mutationFn: async (payload: z.infer) =>
+ await serverFn({ data: payload }),
+ onMutate: () => {
+ return {
+ toastId: toast.loading(m['change-email.mutation.pending']()),
+ };
+ },
+ onSuccess: (data, _variables, context) => {
+ toast.success(data.message, {
+ id: context.toastId,
+ });
+ },
+ onError: (err, _variables, context) => {
+ toast.error(err.message, {
+ id: context?.toastId,
+ });
+
+ if (isValidationError>(err)) {
+ for (const [key, errors] of Object.entries(err.errors) as [
+ keyof typeof err.errors,
+ string[],
+ ][]) {
+ form.setError(key, { message: errors[0] });
+ }
+ }
+ },
+ });
+
+ const onSubmit = form.handleSubmit((payload) => mutation.mutate(payload));
+
+ return (
+
+
+ );
}
diff --git a/src/routes/profile/change-password.tsx b/src/routes/profile/change-password.tsx
index ae84521..343cbee 100644
--- a/src/routes/profile/change-password.tsx
+++ b/src/routes/profile/change-password.tsx
@@ -1,9 +1,130 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { changePassword, ChangePasswordSchema } from '@/lib/actions/profile';
+import { isValidationError } from '@/lib/utils/http';
+import { m } from '@/paraglide/messages';
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
+import { useMutation } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useServerFn } from '@tanstack/react-start';
+import { LoaderCircleIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import type { z } from 'zod/v4';
export const Route = createFileRoute('/profile/change-password')({
component: Page,
-})
+});
function Page() {
- return Hello "/profile/change-password"!
+ const serverFn = useServerFn(changePassword);
+
+ const form = useForm>({
+ resolver: standardSchemaResolver(ChangePasswordSchema),
+ });
+
+ const mutation = useMutation({
+ mutationFn: async (payload: z.infer) =>
+ await serverFn({ data: payload }),
+ onMutate: () => {
+ return {
+ toastId: toast.loading(m['change-password.mutation.pending']()),
+ };
+ },
+ onSuccess: (data, _variables, context) => {
+ toast.success(data.message, {
+ id: context.toastId,
+ });
+ },
+ onError: (err, _variables, context) => {
+ toast.error(err.message, {
+ id: context?.toastId,
+ });
+
+ if (isValidationError>(err)) {
+ for (const [key, errors] of Object.entries(err.errors) as [
+ keyof typeof err.errors,
+ string[],
+ ][]) {
+ form.setError(key, { message: errors[0] });
+ }
+ }
+ },
+ });
+
+ const onSubmit = form.handleSubmit((payload) => mutation.mutate(payload));
+
+ return (
+
+
+ );
}
diff --git a/src/routes/profile/index.tsx b/src/routes/profile/index.tsx
index f090741..8cffbc0 100644
--- a/src/routes/profile/index.tsx
+++ b/src/routes/profile/index.tsx
@@ -1,9 +1,10 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, Link } from '@tanstack/react-router';
export const Route = createFileRoute('/profile/')({
component: Page,
});
+// TODO Structure
function Page() {
const { user } = Route.useRouteContext();
@@ -11,5 +12,17 @@ function Page() {
return null;
}
- return Hello {user.login}
;
+ return (
+
+ Hello {user.login}
+
+ -
+ Change email
+
+ -
+ Change password
+
+
+
Hello "/rankings/guilds"!
;
+}
diff --git a/src/routes/rankings/players.tsx b/src/routes/rankings/players.tsx
new file mode 100644
index 0000000..35f072c
--- /dev/null
+++ b/src/routes/rankings/players.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/rankings/players')({
+ component: Page,
+});
+
+function Page() {
+ return Hello "/rankings/players"!
;
+}
diff --git a/src/routes/reset-password.tsx b/src/routes/reset-password.tsx
index 2ecd7dc..b320162 100644
--- a/src/routes/reset-password.tsx
+++ b/src/routes/reset-password.tsx
@@ -14,12 +14,15 @@ import {
ResetPasswordSchema,
validateResetPassword,
} from '@/lib/actions/password';
+import { isValidationError } from '@/lib/utils/http';
+import { m } from '@/paraglide/messages';
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
import { useMutation } from '@tanstack/react-query';
import { createFileRoute, redirect } from '@tanstack/react-router';
import { useServerFn } from '@tanstack/react-start';
import { LoaderCircleIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
import type { z } from 'zod/v4';
export const Route = createFileRoute('/reset-password')({
@@ -56,7 +59,30 @@ function Page() {
const mutation = useMutation({
mutationFn: async (payload: z.infer) =>
await serverFn({ data: payload }),
- // TODO Sonner
+ onMutate: () => {
+ return {
+ toastId: toast.loading(m['reset-password.mutation.pending']()),
+ };
+ },
+ onSuccess: (_data, _variables, context) => {
+ toast.success(m['reset-password.mutation.success'](), {
+ id: context.toastId,
+ });
+ },
+ onError: (err, _variables, context) => {
+ toast.error(err.message, {
+ id: context?.toastId,
+ });
+
+ if (isValidationError>(err)) {
+ for (const [key, errors] of Object.entries(err.errors) as [
+ keyof typeof err.errors,
+ string[],
+ ][]) {
+ form.setError(key, { message: errors[0] });
+ }
+ }
+ },
});
const onSubmit = form.handleSubmit((payload) => mutation.mutate(payload));
@@ -69,9 +95,13 @@ function Page() {
name="email"
render={({ field }) => (
- Email
+ {m['reset-password.form.email']()}
-
+
@@ -82,9 +112,13 @@ function Page() {
name="password"
render={({ field }) => (
- Password
+ {m['reset-password.form.password']()}
-
+
@@ -94,7 +128,7 @@ function Page() {
{mutation.isPending && (
)}
- Reset Password
+ {m['reset-password.form.submit']()}
diff --git a/src/routes/login.tsx b/src/routes/sign-in.tsx
similarity index 78%
rename from src/routes/login.tsx
rename to src/routes/sign-in.tsx
index 02d0241..8c55a21 100644
--- a/src/routes/login.tsx
+++ b/src/routes/sign-in.tsx
@@ -1,7 +1,7 @@
import { LoginForm } from '@/components/login/form';
import { createFileRoute, redirect } from '@tanstack/react-router';
-export const Route = createFileRoute('/login')({
+export const Route = createFileRoute('/sign-in')({
beforeLoad: ({ context }) => {
if (context.user) {
throw redirect({ href: '/' });
@@ -11,5 +11,5 @@ export const Route = createFileRoute('/login')({
});
function Page() {
- return ;
+ return ;
}
diff --git a/src/routes/register.tsx b/src/routes/sign-up.tsx
similarity index 71%
rename from src/routes/register.tsx
rename to src/routes/sign-up.tsx
index 58ba139..596dbf6 100644
--- a/src/routes/register.tsx
+++ b/src/routes/sign-up.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, Link, redirect } from '@tanstack/react-router';
import { useForm } from 'react-hook-form';
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
import {
@@ -18,8 +18,9 @@ import type { z } from 'zod/v4';
import { register, RegisterSchema } from '@/lib/actions/auth';
import { toast } from 'sonner';
import { isValidationError } from '@/lib/utils/http';
+import { m } from '@/paraglide/messages';
-export const Route = createFileRoute('/register')({
+export const Route = createFileRoute('/sign-up')({
beforeLoad: ({ context }) => {
if (context.user) {
throw redirect({ href: '/' });
@@ -40,11 +41,11 @@ function Page() {
await serverFn({ data: payload }),
onMutate: () => {
return {
- toastId: toast.loading('Signing up...'),
+ toastId: toast.loading(m['sign-up.mutation.pending']()),
};
},
onSuccess: (_data, _variables, context) => {
- toast.success('Signed up successfully, redirecting now', {
+ toast.success(m['sign-up.mutation.success'](), {
id: context.toastId,
});
},
@@ -74,9 +75,9 @@ function Page() {
name="login"
render={({ field }) => (
- Username
+ {m['sign-up.form.login']()}
-
+
@@ -87,9 +88,13 @@ function Page() {
name="email"
render={({ field }) => (
- Email
+ {m['sign-up.form.email']()}
-
+
@@ -100,9 +105,9 @@ function Page() {
name="socialId"
render={({ field }) => (
- Character deletion code
+ {m['sign-up.form.socialId']()}
-
+
@@ -113,19 +118,28 @@ function Page() {
name="password"
render={({ field }) => (
- Password
+ {m['sign-up.form.password']()}
-
+
)}
/>
+
+
+ {m['sign-up.links.sign-in']()}
+
+
diff --git a/src/routes/support/index.tsx b/src/routes/support/index.tsx
new file mode 100644
index 0000000..a2323ac
--- /dev/null
+++ b/src/routes/support/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/support/')({
+ component: Page,
+});
+
+function Page() {
+ return Hello "/support/"!
;
+}