mirror of
https://github.com/steveiliop56/tinyauth.git
synced 2025-10-28 04:35:40 +00:00
Feat/new UI (#153)
* wip * feat: make forms functional * feat: finalize pages * chore: remove unused translations * feat: app context * feat: user context * feat: finalize username login * fix: use correct tab order in login form * feat: add oauth logic * chore: update readme and assets * chore: rename docs back to assets * feat: favicons * feat: custom background image config option * chore: add acknowledgements for background image * feat: sanitize redirect URL * feat: sanitize redirect URL on check * chore: fix dependabot config * refactor: bot suggestions * fix: correctly redirect to app and check for untrusted redirects * fix: run oauth auto redirect only when there is a redirect URI * refactor: change select color * fix: fix dockerfiles * fix: fix hook rendering * chore: remove translations cdn * chore: formatting * feat: validate api response against zod schema * fix: use axios error instead of generic error in login page
This commit is contained in:
Stavros
@@ -1,3 +1,6 @@
|
||||
# Ignore artifacts:
|
||||
dist
|
||||
node_modules
|
||||
node_modules
|
||||
bun.lock
|
||||
package.json
|
||||
src/lib/i18n/locales
|
||||
@@ -3,7 +3,7 @@ FROM oven/bun:1.1.45-alpine
|
||||
WORKDIR /frontend
|
||||
|
||||
COPY ./frontend/package.json ./
|
||||
COPY ./frontend/bun.lockb ./
|
||||
COPY ./frontend/bun.lock ./
|
||||
|
||||
RUN bun install
|
||||
|
||||
@@ -16,7 +16,6 @@ COPY ./frontend/tsconfig.json ./
|
||||
COPY ./frontend/tsconfig.app.json ./
|
||||
COPY ./frontend/tsconfig.node.json ./
|
||||
COPY ./frontend/vite.config.ts ./
|
||||
COPY ./frontend/postcss.config.cjs ./
|
||||
|
||||
EXPOSE 5173
|
||||
|
||||
|
||||
1093
frontend/bun.lock
Normal file
1093
frontend/bun.lock
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
21
frontend/components.json
Normal file
21
frontend/components.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import globals from "globals";
|
||||
import reactHooks from "eslint-plugin-react-hooks";
|
||||
import reactRefresh from "eslint-plugin-react-refresh";
|
||||
import tseslint from "typescript-eslint";
|
||||
import pluginQuery from "@tanstack/eslint-plugin-query";
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ["dist"] },
|
||||
@@ -16,6 +17,7 @@ export default tseslint.config(
|
||||
plugins: {
|
||||
"react-hooks": reactHooks,
|
||||
"react-refresh": reactRefresh,
|
||||
"@tanstack/query": pluginQuery,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
@@ -23,6 +25,7 @@ export default tseslint.config(
|
||||
"warn",
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
"@tanstack/query/exhaustive-deps": "error",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
@@ -3,13 +3,15 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/frontend.webmanifest" />
|
||||
<meta name="apple-mobile-web-app-title" content="Tinyauth" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<title>Tinyauth</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="dark">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
4919
frontend/package-lock.json
generated
4919
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"name": "tinyauth-shadcn",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
@@ -10,39 +10,49 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "^8.0.0",
|
||||
"@mantine/form": "^8.0.0",
|
||||
"@mantine/hooks": "^8.0.0",
|
||||
"@mantine/notifications": "^8.0.0",
|
||||
"@tanstack/react-query": "5",
|
||||
"axios": "^1.7.9",
|
||||
"i18next": "^25.0.0",
|
||||
"i18next-browser-languagedetector": "^8.0.4",
|
||||
"i18next-chained-backend": "^4.6.2",
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@radix-ui/react-label": "^2.1.6",
|
||||
"@radix-ui/react-select": "^2.2.2",
|
||||
"@radix-ui/react-separator": "^1.1.4",
|
||||
"@radix-ui/react-slot": "^1.2.2",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"@tanstack/react-query": "^5.75.6",
|
||||
"axios": "^1.9.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dompurify": "^3.2.5",
|
||||
"i18next": "^25.0.2",
|
||||
"i18next-browser-languagedetector": "^8.0.5",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-i18next": "^15.4.1",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.503.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.56.3",
|
||||
"react-i18next": "^15.5.1",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router": "^7.5.2",
|
||||
"zod": "^3.24.1"
|
||||
"react-router": "^7.5.3",
|
||||
"sonner": "^2.0.3",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"zod": "^3.24.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^19.1.1",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"@eslint/js": "^9.22.0",
|
||||
"@tanstack/eslint-plugin-query": "^5.74.7",
|
||||
"@types/node": "^22.15.3",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-preset-mantine": "^1.17.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "3.5.3",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.18.2",
|
||||
"vite": "^6.3.4"
|
||||
"tw-animate-css": "^1.2.8",
|
||||
"typescript": "~5.7.2",
|
||||
"typescript-eslint": "^8.26.1",
|
||||
"vite": "^6.3.1"
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-preset-mantine": {},
|
||||
"postcss-simple-vars": {
|
||||
variables: {
|
||||
"mantine-breakpoint-xs": "36em",
|
||||
"mantine-breakpoint-sm": "48em",
|
||||
"mantine-breakpoint-md": "62em",
|
||||
"mantine-breakpoint-lg": "75em",
|
||||
"mantine-breakpoint-xl": "88em",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 9.6 KiB |
BIN
frontend/public/background.jpg
Normal file
BIN
frontend/public/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 588 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 602 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
frontend/public/favicon-96x96.png
Normal file
BIN
frontend/public/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
3
frontend/public/favicon.svg
Normal file
3
frontend/public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
@@ -1 +1,21 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
{
|
||||
"name": "Tinyauth",
|
||||
"short_name": "Tinyauth",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/web-app-manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/web-app-manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#171717",
|
||||
"background_color": "#171717",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
BIN
frontend/public/web-app-manifest-192x192.png
Normal file
BIN
frontend/public/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
frontend/public/web-app-manifest-512x512.png
Normal file
BIN
frontend/public/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -1,17 +1,12 @@
|
||||
import { Navigate } from "react-router";
|
||||
import { useUserContext } from "./context/user-context";
|
||||
import { LogoutPage } from "./pages/logout-page";
|
||||
|
||||
export const App = () => {
|
||||
const queryString = window.location.search;
|
||||
const params = new URLSearchParams(queryString);
|
||||
const redirectUri = params.get("redirect_uri");
|
||||
|
||||
const { isLoggedIn } = useUserContext();
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
|
||||
if (isLoggedIn) {
|
||||
return <Navigate to="/logout" />;
|
||||
}
|
||||
|
||||
return <LogoutPage />;
|
||||
return <Navigate to="/login" />;
|
||||
};
|
||||
|
||||
81
frontend/src/components/auth/login-form.tsx
Normal file
81
frontend/src/components/auth/login-form.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Input } from "../ui/input";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "../ui/form";
|
||||
import { Button } from "../ui/button";
|
||||
import { loginSchema, LoginSchema } from "@/schemas/login-schema";
|
||||
|
||||
interface Props {
|
||||
onSubmit: (data: LoginSchema) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export const LoginForm = (props: Props) => {
|
||||
const { onSubmit, loading } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const form = useForm<LoginSchema>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-4">
|
||||
<FormLabel>{t("loginUsername")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t("loginUsername")}
|
||||
disabled={loading}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-4">
|
||||
<div className="relative">
|
||||
<FormLabel className="mb-2">{t("loginPassword")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t("loginPassword")}
|
||||
type="password"
|
||||
disabled={loading}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<a
|
||||
href="/forgot-password"
|
||||
className="text-muted-foreground text-sm absolute right-0 bottom-10"
|
||||
>
|
||||
{t("forgotPasswordTitle")}
|
||||
</a>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button className="w-full" type="submit" loading={loading}>
|
||||
{t("loginSubmit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import { TextInput, PasswordInput, Button, Anchor, Group, Text } from "@mantine/core";
|
||||
import { useForm, zodResolver } from "@mantine/form";
|
||||
import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface LoginFormProps {
|
||||
isPending: boolean;
|
||||
onSubmit: (values: LoginFormValues) => void;
|
||||
}
|
||||
|
||||
export const LoginForm = (props: LoginFormProps) => {
|
||||
const { isPending, onSubmit } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const form = useForm({
|
||||
mode: "uncontrolled",
|
||||
initialValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
validate: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||||
<TextInput
|
||||
label={t("loginUsername")}
|
||||
placeholder="Username"
|
||||
disabled={isPending}
|
||||
required
|
||||
withAsterisk={false}
|
||||
key={form.key("username")}
|
||||
{...form.getInputProps("username")}
|
||||
/>
|
||||
<Group justify="space-between" mb={5} mt="md">
|
||||
<Text component="label" htmlFor=".password-input" size="sm" fw={500}>
|
||||
{t("loginPassword")}
|
||||
</Text>
|
||||
|
||||
<Anchor href="#" onClick={() => window.location.replace("/forgot-password")} pt={2} fw={500} fz="xs">
|
||||
{t('forgotPasswordTitle')}
|
||||
</Anchor>
|
||||
</Group>
|
||||
<PasswordInput
|
||||
className="password-input"
|
||||
placeholder="Password"
|
||||
required
|
||||
disabled={isPending}
|
||||
key={form.key("password")}
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
<Button fullWidth mt="xl" type="submit" loading={isPending}>
|
||||
{t("loginSubmit")}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Grid, Button } from "@mantine/core";
|
||||
import { GithubIcon } from "../../icons/github";
|
||||
import { GoogleIcon } from "../../icons/google";
|
||||
import { OAuthIcon } from "../../icons/oauth";
|
||||
|
||||
interface OAuthButtonsProps {
|
||||
oauthProviders: string[];
|
||||
isPending: boolean;
|
||||
mutate: (provider: string) => void;
|
||||
genericName: string;
|
||||
}
|
||||
|
||||
export const OAuthButtons = (props: OAuthButtonsProps) => {
|
||||
const { oauthProviders, isPending, genericName, mutate } = props;
|
||||
return (
|
||||
<Grid mb="md" mt="md" align="center" justify="center">
|
||||
{oauthProviders.includes("google") && (
|
||||
<Grid.Col span="content">
|
||||
<Button
|
||||
radius="xl"
|
||||
leftSection={<GoogleIcon style={{ width: 14, height: 14 }} />}
|
||||
variant="default"
|
||||
onClick={() => mutate("google")}
|
||||
loading={isPending}
|
||||
>
|
||||
Google
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
)}
|
||||
{oauthProviders.includes("github") && (
|
||||
<Grid.Col span="content">
|
||||
<Button
|
||||
radius="xl"
|
||||
leftSection={<GithubIcon style={{ width: 14, height: 14 }} />}
|
||||
variant="default"
|
||||
onClick={() => mutate("github")}
|
||||
loading={isPending}
|
||||
>
|
||||
Github
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
)}
|
||||
{oauthProviders.includes("generic") && (
|
||||
<Grid.Col span="content">
|
||||
<Button
|
||||
radius="xl"
|
||||
leftSection={<OAuthIcon style={{ width: 14, height: 14 }} />}
|
||||
variant="default"
|
||||
onClick={() => mutate("generic")}
|
||||
loading={isPending}
|
||||
>
|
||||
{genericName}
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
@@ -1,40 +1,54 @@
|
||||
import { Button, PinInput } from "@mantine/core";
|
||||
import { useForm, zodResolver } from "@mantine/form";
|
||||
import { z } from "zod";
|
||||
import { Form, FormControl, FormField, FormItem } from "../ui/form";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSeparator,
|
||||
InputOTPSlot,
|
||||
} from "../ui/input-otp";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { totpSchema, TotpSchema } from "@/schemas/totp-schema";
|
||||
|
||||
const schema = z.object({
|
||||
code: z.string(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof schema>;
|
||||
|
||||
interface TotpFormProps {
|
||||
onSubmit: (values: FormValues) => void;
|
||||
isPending: boolean;
|
||||
interface Props {
|
||||
formId: string;
|
||||
onSubmit: (code: TotpSchema) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export const TotpForm = (props: TotpFormProps) => {
|
||||
const { onSubmit, isPending } = props;
|
||||
export const TotpForm = (props: Props) => {
|
||||
const { formId, onSubmit, loading } = props;
|
||||
|
||||
const form = useForm({
|
||||
mode: "uncontrolled",
|
||||
initialValues: {
|
||||
code: "",
|
||||
},
|
||||
validate: zodResolver(schema),
|
||||
const form = useForm<TotpSchema>({
|
||||
resolver: zodResolver(totpSchema),
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||||
<PinInput
|
||||
length={6}
|
||||
type={"number"}
|
||||
placeholder=""
|
||||
{...form.getInputProps("code")}
|
||||
/>
|
||||
<Button type="submit" mt="xl" loading={isPending} fullWidth>
|
||||
Verify
|
||||
</Button>
|
||||
</form>
|
||||
<Form {...form}>
|
||||
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="code"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<InputOTP maxLength={6} disabled={loading} {...field}>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
export function OAuthIcon(props: SVGProps<SVGSVGElement>) {
|
||||
export function GenericIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
30
frontend/src/components/icons/google.tsx
Normal file
30
frontend/src/components/icons/google.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
export function GoogleIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={256}
|
||||
height={262}
|
||||
viewBox="0 0 256 262"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#4285f4"
|
||||
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
|
||||
></path>
|
||||
<path
|
||||
fill="#34a853"
|
||||
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
|
||||
></path>
|
||||
<path
|
||||
fill="#fbbc05"
|
||||
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
|
||||
></path>
|
||||
<path
|
||||
fill="#eb4335"
|
||||
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { ComboboxItem, Select } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import i18n from "../../lib/i18n/i18n";
|
||||
import {
|
||||
SupportedLanguage,
|
||||
getLanguageName,
|
||||
languages,
|
||||
} from "../../lib/i18n/locales";
|
||||
|
||||
export const LanguageSelector = () => {
|
||||
const [language, setLanguage] = useState<ComboboxItem>({
|
||||
value: i18n.language,
|
||||
label: getLanguageName(i18n.language as SupportedLanguage),
|
||||
});
|
||||
|
||||
const languageOptions = Object.entries(languages).map(([code, name]) => ({
|
||||
value: code,
|
||||
label: name,
|
||||
}));
|
||||
|
||||
const handleLanguageChange = (option: string) => {
|
||||
i18n.changeLanguage(option as SupportedLanguage);
|
||||
setLanguage({
|
||||
value: option,
|
||||
label: getLanguageName(option as SupportedLanguage),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
data={languageOptions}
|
||||
value={language ? language.value : null}
|
||||
onChange={(_value, option) => handleLanguageChange(option.value)}
|
||||
allowDeselect={false}
|
||||
pos="absolute"
|
||||
right={10}
|
||||
top={10}
|
||||
/>
|
||||
);
|
||||
};
|
||||
35
frontend/src/components/language/language.tsx
Normal file
35
frontend/src/components/language/language.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { languages, SupportedLanguage } from "@/lib/i18n/locales";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
import { useState } from "react";
|
||||
import i18n from "@/lib/i18n/i18n";
|
||||
|
||||
export const LanguageSelector = () => {
|
||||
const [language, setLanguage] = useState<SupportedLanguage>(
|
||||
i18n.language as SupportedLanguage,
|
||||
);
|
||||
|
||||
const handleSelect = (option: string) => {
|
||||
setLanguage(option as SupportedLanguage);
|
||||
i18n.changeLanguage(option as SupportedLanguage);
|
||||
};
|
||||
return (
|
||||
<Select onValueChange={handleSelect} value={language}>
|
||||
<SelectTrigger className="absolute top-5 right-5">
|
||||
<SelectValue placeholder="Select language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(languages).map(([key, value]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{value}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
20
frontend/src/components/layout/layout.tsx
Normal file
20
frontend/src/components/layout/layout.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { useAppContext } from "@/context/app-context";
|
||||
import { LanguageSelector } from "../language/language";
|
||||
|
||||
export const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const { backgroundImage } = useAppContext();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col justify-center items-center min-h-svh"
|
||||
style={{
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<LanguageSelector />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
import { Center, Flex } from "@mantine/core";
|
||||
import { ReactNode } from "react";
|
||||
import { LanguageSelector } from "../language-selector/language-selector";
|
||||
|
||||
export const Layout = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<LanguageSelector />
|
||||
<Center style={{ minHeight: "100vh" }}>
|
||||
<Flex direction="column" flex="1" maw={340}>
|
||||
{children}
|
||||
</Flex>
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
};
|
||||
77
frontend/src/components/ui/button.tsx
Normal file
77
frontend/src/components/ui/button.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
warning:
|
||||
"bg-amber-500 text-white shadow-xs hover:bg-amber-400 focus-visible:ring-amber-200/20 dark:focus-visible:ring-amber-400/40 dark:bg-amber-600",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
loading = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
loading?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
disabled
|
||||
{...props}
|
||||
>
|
||||
<Loader2 className="animate-spin" />
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants };
|
||||
92
frontend/src/components/ui/card.tsx
Normal file
92
frontend/src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
};
|
||||
166
frontend/src/components/ui/form.tsx
Normal file
166
frontend/src/components/ui/form.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import * as React from "react";
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
useFormState,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const Form = FormProvider;
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName;
|
||||
};
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue,
|
||||
);
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext);
|
||||
const itemContext = React.useContext(FormItemContext);
|
||||
const { getFieldState } = useFormContext();
|
||||
const formState = useFormState({ name: fieldContext.name });
|
||||
const fieldState = getFieldState(fieldContext.name, formState);
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>");
|
||||
}
|
||||
|
||||
const { id } = itemContext;
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
};
|
||||
};
|
||||
|
||||
type FormItemContextValue = {
|
||||
id: string;
|
||||
};
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue,
|
||||
);
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const id = React.useId();
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
</FormItemContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField();
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||
useFormField();
|
||||
|
||||
return (
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { formDescriptionId } = useFormField();
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { error, formMessageId } = useFormField();
|
||||
const body = error ? String(error?.message ?? "") : props.children;
|
||||
|
||||
if (!body) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
};
|
||||
75
frontend/src/components/ui/input-otp.tsx
Normal file
75
frontend/src/components/ui/input-otp.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import * as React from "react";
|
||||
import { OTPInput, OTPInputContext } from "input-otp";
|
||||
import { MinusIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function InputOTP({
|
||||
className,
|
||||
containerClassName,
|
||||
...props
|
||||
}: React.ComponentProps<typeof OTPInput> & {
|
||||
containerClassName?: string;
|
||||
}) {
|
||||
return (
|
||||
<OTPInput
|
||||
data-slot="input-otp"
|
||||
containerClassName={cn(
|
||||
"flex items-center gap-2 has-disabled:opacity-50",
|
||||
containerClassName,
|
||||
)}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-group"
|
||||
className={cn("flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSlot({
|
||||
index,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
index: number;
|
||||
}) {
|
||||
const inputOTPContext = React.useContext(OTPInputContext);
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-slot"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{char}
|
||||
{hasFakeCaret && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div data-slot="input-otp-separator" role="separator" {...props}>
|
||||
<MinusIcon />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
||||
21
frontend/src/components/ui/input.tsx
Normal file
21
frontend/src/components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input };
|
||||
22
frontend/src/components/ui/label.tsx
Normal file
22
frontend/src/components/ui/label.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import * as React from "react";
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Label };
|
||||
33
frontend/src/components/ui/oauth-button.tsx
Normal file
33
frontend/src/components/ui/oauth-button.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Button } from "./button";
|
||||
import React from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
interface Props extends React.ComponentProps<typeof Button> {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export const OAuthButton = (props: Props) => {
|
||||
const { title, icon, onClick, loading, className, ...rest } = props;
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={onClick}
|
||||
className={twMerge("rounded-md", className)}
|
||||
variant="outline"
|
||||
{...rest}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
{icon}
|
||||
{title}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
183
frontend/src/components/ui/select.tsx
Normal file
183
frontend/src/components/ui/select.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import * as React from "react";
|
||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default";
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-card dark:hover:bg-card/90 flex w-fit items-center justify-between gap-2 rounded-md border bg-card hover:bg-card/90 px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
};
|
||||
38
frontend/src/components/ui/separator.tsx
Normal file
38
frontend/src/components/ui/separator.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator-root"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SeperatorWithChildren({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<Separator className="flex-1" />
|
||||
<span className="text-sm text-muted-foreground">{children}</span>
|
||||
<Separator className="flex-1" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator, SeperatorWithChildren };
|
||||
23
frontend/src/components/ui/sonner.tsx
Normal file
23
frontend/src/components/ui/sonner.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { useTheme } from "next-themes";
|
||||
import { Toaster as Sonner, ToasterProps } from "sonner";
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Toaster };
|
||||
@@ -1,40 +1,42 @@
|
||||
import {
|
||||
appContextSchema,
|
||||
AppContextSchema,
|
||||
} from "@/schemas/app-context-schema";
|
||||
import { createContext, useContext } from "react";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import React, { createContext, useContext } from "react";
|
||||
import axios from "axios";
|
||||
import { AppContextSchemaType } from "../schemas/app-context-schema";
|
||||
|
||||
const AppContext = createContext<AppContextSchemaType | null>(null);
|
||||
const AppContext = createContext<AppContextSchema | null>(null);
|
||||
|
||||
export const AppContextProvider = ({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const {
|
||||
data: userContext,
|
||||
isLoading,
|
||||
error,
|
||||
} = useSuspenseQuery({
|
||||
queryKey: ["appContext"],
|
||||
queryFn: async () => {
|
||||
const res = await axios.get("/api/app");
|
||||
return res.data;
|
||||
},
|
||||
const { isFetching, data, error } = useSuspenseQuery({
|
||||
queryKey: ["app"],
|
||||
queryFn: () => axios.get("/api/app").then((res) => res.data),
|
||||
});
|
||||
|
||||
if (error && !isLoading) {
|
||||
if (error && !isFetching) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const validated = appContextSchema.safeParse(data);
|
||||
|
||||
if (validated.success === false) {
|
||||
throw validated.error;
|
||||
}
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={userContext}>{children}</AppContext.Provider>
|
||||
<AppContext.Provider value={validated.data}>{children}</AppContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAppContext = () => {
|
||||
const context = useContext(AppContext);
|
||||
|
||||
if (context === null) {
|
||||
if (!context) {
|
||||
throw new Error("useAppContext must be used within an AppContextProvider");
|
||||
}
|
||||
|
||||
|
||||
@@ -1,41 +1,47 @@
|
||||
import {
|
||||
userContextSchema,
|
||||
UserContextSchema,
|
||||
} from "@/schemas/user-context-schema";
|
||||
import { createContext, useContext } from "react";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import React, { createContext, useContext } from "react";
|
||||
import axios from "axios";
|
||||
import { UserContextSchemaType } from "../schemas/user-context-schema";
|
||||
|
||||
const UserContext = createContext<UserContextSchemaType | null>(null);
|
||||
const UserContext = createContext<UserContextSchema | null>(null);
|
||||
|
||||
export const UserContextProvider = ({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const {
|
||||
data: userContext,
|
||||
isLoading,
|
||||
error,
|
||||
} = useSuspenseQuery({
|
||||
queryKey: ["userContext"],
|
||||
queryFn: async () => {
|
||||
const res = await axios.get("/api/user");
|
||||
return res.data;
|
||||
},
|
||||
const { isFetching, data, error } = useSuspenseQuery({
|
||||
queryKey: ["user"],
|
||||
queryFn: () => axios.get("/api/user").then((res) => res.data),
|
||||
});
|
||||
|
||||
if (error && !isLoading) {
|
||||
if (error && !isFetching) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const validated = userContextSchema.safeParse(data);
|
||||
|
||||
if (validated.success === false) {
|
||||
throw validated.error;
|
||||
}
|
||||
|
||||
return (
|
||||
<UserContext.Provider value={userContext}>{children}</UserContext.Provider>
|
||||
<UserContext.Provider value={validated.data}>
|
||||
{children}
|
||||
</UserContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useUserContext = () => {
|
||||
const context = useContext(UserContext);
|
||||
|
||||
if (context === null) {
|
||||
throw new Error("useUserContext must be used within a UserContextProvider");
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useUserContext must be used within an UserContextProvider",
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
export function GoogleIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={48}
|
||||
height={48}
|
||||
viewBox="0 0 48 48"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#ffc107"
|
||||
d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917"
|
||||
></path>
|
||||
<path
|
||||
fill="#ff3d00"
|
||||
d="m6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691"
|
||||
></path>
|
||||
<path
|
||||
fill="#4caf50"
|
||||
d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44"
|
||||
></path>
|
||||
<path
|
||||
fill="#1976d2"
|
||||
d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,176 @@
|
||||
span,
|
||||
p {
|
||||
word-break: break-word;
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply scroll-m-20 text-2xl font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply scroll-m-20 text-xl font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply leading-7 [&:not(:first-child)]:mt-6;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply mt-6 border-l-2 pl-6 italic;
|
||||
}
|
||||
|
||||
tr {
|
||||
@apply m-0 border-t p-0 even:bg-muted;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply my-6 ml-6 list-disc [&>li]:mt-2;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@apply text-xl text-muted-foreground;
|
||||
}
|
||||
|
||||
.large {
|
||||
@apply text-lg font-semibold;
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-sm font-medium leading-none;
|
||||
}
|
||||
|
||||
.muted {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,15 @@
|
||||
import { useCallback, useEffect, useRef } from 'react'
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
|
||||
/**
|
||||
* Custom hook that determines if the component is currently mounted.
|
||||
* @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
|
||||
* @public
|
||||
* @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
|
||||
* @example
|
||||
* ```tsx
|
||||
* const isComponentMounted = useIsMounted();
|
||||
* // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
|
||||
* ```
|
||||
*/
|
||||
export function useIsMounted(): () => boolean {
|
||||
const isMounted = useRef(false)
|
||||
const isMounted = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
isMounted.current = true
|
||||
isMounted.current = true;
|
||||
|
||||
return () => {
|
||||
isMounted.current = false
|
||||
}
|
||||
}, [])
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return useCallback(() => isMounted.current, [])
|
||||
}
|
||||
return useCallback(() => isMounted.current, []);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,16 @@
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import LanguageDetector from "i18next-browser-languagedetector";
|
||||
import ChainedBackend from "i18next-chained-backend";
|
||||
import resourcesToBackend from "i18next-resources-to-backend";
|
||||
import HttpBackend from "i18next-http-backend";
|
||||
|
||||
const backends = [
|
||||
HttpBackend,
|
||||
resourcesToBackend(
|
||||
(language: string) => import(`./locales/${language}.json`),
|
||||
),
|
||||
]
|
||||
|
||||
const backendOptions = [
|
||||
{
|
||||
loadPath: "https://cdn.tinyauth.app/i18n/v1/{{lng}}.json",
|
||||
},
|
||||
{}
|
||||
]
|
||||
|
||||
i18n
|
||||
.use(ChainedBackend)
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.use(
|
||||
resourcesToBackend(
|
||||
(language: string) => import(`./locales/${language}.json`),
|
||||
),
|
||||
)
|
||||
.init({
|
||||
fallbackLng: "en",
|
||||
debug: import.meta.env.MODE === "development",
|
||||
@@ -32,11 +20,6 @@ i18n
|
||||
},
|
||||
|
||||
load: "currentOnly",
|
||||
|
||||
backend: {
|
||||
backends: import.meta.env.MODE !== "development" ? backends : backends.reverse(),
|
||||
backendOptions: import.meta.env.MODE !== "development" ? backendOptions : backendOptions.reverse()
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
|
||||
@@ -1,36 +1,37 @@
|
||||
export const languages = {
|
||||
"af-ZA": "Afrikaans",
|
||||
"ar-SA": "العربية",
|
||||
"ca-ES": "Català",
|
||||
"cs-CZ": "Čeština",
|
||||
"da-DK": "Dansk",
|
||||
"de-DE": "Deutsch",
|
||||
"el-GR": "Ελληνικά",
|
||||
"en-US": "English",
|
||||
"es-ES": "Español",
|
||||
"fi-FI": "Suomi",
|
||||
"fr-FR": "Français",
|
||||
"he-IL": "עברית",
|
||||
"hu-HU": "Magyar",
|
||||
"it-IT": "Italiano",
|
||||
"ja-JP": "日本語",
|
||||
"ko-KR": "한국어",
|
||||
"nl-NL": "Nederlands",
|
||||
"no-NO": "Norsk",
|
||||
"pl-PL": "Polski",
|
||||
"pt-BR": "Português",
|
||||
"pt-PT": "Português",
|
||||
"ro-RO": "Română",
|
||||
"ru-RU": "Русский",
|
||||
"sr-SP": "Српски",
|
||||
"sv-SE": "Svenska",
|
||||
"tr-TR": "Türkçe",
|
||||
"uk-UA": "Українська",
|
||||
"vi-VN": "Tiếng Việt",
|
||||
"zh-CN": "中文",
|
||||
"zh-TW": "中文"
|
||||
}
|
||||
"af-ZA": "Afrikaans",
|
||||
"ar-SA": "العربية",
|
||||
"ca-ES": "Català",
|
||||
"cs-CZ": "Čeština",
|
||||
"da-DK": "Dansk",
|
||||
"de-DE": "Deutsch",
|
||||
"el-GR": "Ελληνικά",
|
||||
"en-US": "English",
|
||||
"es-ES": "Español",
|
||||
"fi-FI": "Suomi",
|
||||
"fr-FR": "Français",
|
||||
"he-IL": "עברית",
|
||||
"hu-HU": "Magyar",
|
||||
"it-IT": "Italiano",
|
||||
"ja-JP": "日本語",
|
||||
"ko-KR": "한국어",
|
||||
"nl-NL": "Nederlands",
|
||||
"no-NO": "Norsk",
|
||||
"pl-PL": "Polski",
|
||||
"pt-BR": "Português",
|
||||
"pt-PT": "Português",
|
||||
"ro-RO": "Română",
|
||||
"ru-RU": "Русский",
|
||||
"sr-SP": "Српски",
|
||||
"sv-SE": "Svenska",
|
||||
"tr-TR": "Türkçe",
|
||||
"uk-UA": "Українська",
|
||||
"vi-VN": "Tiếng Việt",
|
||||
"zh-CN": "中文",
|
||||
"zh-TW": "中文",
|
||||
};
|
||||
|
||||
export type SupportedLanguage = keyof typeof languages;
|
||||
|
||||
export const getLanguageName = (language: SupportedLanguage): string => languages[language];
|
||||
export const getLanguageName = (language: SupportedLanguage): string =>
|
||||
languages[language];
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"loginTitle": "Welcome back, login with",
|
||||
"loginDivider": "Or continue with password",
|
||||
"loginTitleSimple": "Welcome back, please login",
|
||||
"loginDivider": "Or",
|
||||
"loginUsername": "Username",
|
||||
"loginPassword": "Password",
|
||||
"loginSubmit": "Login",
|
||||
"loginFailTitle": "Failed to log in",
|
||||
"loginFailSubtitle": "Please check your username and password",
|
||||
"loginFailRateLimit": "You failed to login too many times, please try again later",
|
||||
"loginFailRateLimit": "You failed to login too many times. Please try again later",
|
||||
"loginSuccessTitle": "Logged in",
|
||||
"loginSuccessSubtitle": "Welcome back!",
|
||||
"loginOauthFailTitle": "Internal error",
|
||||
"loginOauthFailTitle": "An error occurred",
|
||||
"loginOauthFailSubtitle": "Failed to get OAuth URL",
|
||||
"loginOauthSuccessTitle": "Redirecting",
|
||||
"loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
|
||||
@@ -18,19 +19,16 @@
|
||||
"continueInvalidRedirectTitle": "Invalid redirect",
|
||||
"continueInvalidRedirectSubtitle": "The redirect URL is invalid",
|
||||
"continueInsecureRedirectTitle": "Insecure redirect",
|
||||
"continueInsecureRedirectSubtitle": "You are trying to redirect from <Code>https</Code> to <Code>http</Code>, are you sure you want to continue?",
|
||||
"continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. Are you sure you want to continue?",
|
||||
"continueTitle": "Continue",
|
||||
"continueSubtitle": "Click the button to continue to your app.",
|
||||
"internalErrorTitle": "Internal Server Error",
|
||||
"internalErrorSubtitle": "An error occurred on the server and it currently cannot serve your request.",
|
||||
"internalErrorButton": "Try again",
|
||||
"logoutFailTitle": "Failed to log out",
|
||||
"logoutFailSubtitle": "Please try again",
|
||||
"logoutSuccessTitle": "Logged out",
|
||||
"logoutSuccessSubtitle": "You have been logged out",
|
||||
"logoutTitle": "Logout",
|
||||
"logoutUsernameSubtitle": "You are currently logged in as <Code>{{username}}</Code>, click the button below to logout.",
|
||||
"logoutOauthSubtitle": "You are currently logged in as <Code>{{username}}</Code> using the {{provider}} OAuth provider, click the button below to logout.",
|
||||
"logoutUsernameSubtitle": "You are currently logged in as <code>{{username}}</code>. Click the button below to logout.",
|
||||
"logoutOauthSubtitle": "You are currently logged in as <code>{{username}}</code> using the {{provider}} OAuth provider. Click the button below to logout.",
|
||||
"notFoundTitle": "Page not found",
|
||||
"notFoundSubtitle": "The page you are looking for does not exist.",
|
||||
"notFoundButton": "Go home",
|
||||
@@ -39,13 +37,17 @@
|
||||
"totpSuccessTitle": "Verified",
|
||||
"totpSuccessSubtitle": "Redirecting to your app",
|
||||
"totpTitle": "Enter your TOTP code",
|
||||
"totpSubtitle": "Please enter the code from your authenticator app.",
|
||||
"unauthorizedTitle": "Unauthorized",
|
||||
"unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
|
||||
"unauthorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
|
||||
"unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
|
||||
"unauthorizedResourceSubtitle": "The user with username <code>{{username}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
|
||||
"unauthorizedLoginSubtitle": "The user with username <code>{{username}}</code> is not authorized to login.",
|
||||
"unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
|
||||
"unauthorizedButton": "Try again",
|
||||
"untrustedRedirectTitle": "Untrusted redirect",
|
||||
"untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",
|
||||
"untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
|
||||
"cancelTitle": "Cancel",
|
||||
"forgotPasswordTitle": "Forgot your password?"
|
||||
"forgotPasswordTitle": "Forgot your password?",
|
||||
"failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
|
||||
"errorTitle": "An error occurred",
|
||||
"errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information."
|
||||
}
|
||||
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"loginTitle": "Welcome back, login with",
|
||||
"loginDivider": "Or continue with password",
|
||||
"loginTitleSimple": "Welcome back, please login",
|
||||
"loginDivider": "Or",
|
||||
"loginUsername": "Username",
|
||||
"loginPassword": "Password",
|
||||
"loginSubmit": "Login",
|
||||
"loginFailTitle": "Failed to log in",
|
||||
"loginFailSubtitle": "Please check your username and password",
|
||||
"loginFailRateLimit": "You failed to login too many times, please try again later",
|
||||
"loginFailRateLimit": "You failed to login too many times. Please try again later",
|
||||
"loginSuccessTitle": "Logged in",
|
||||
"loginSuccessSubtitle": "Welcome back!",
|
||||
"loginOauthFailTitle": "Internal error",
|
||||
"loginOauthFailTitle": "An error occurred",
|
||||
"loginOauthFailSubtitle": "Failed to get OAuth URL",
|
||||
"loginOauthSuccessTitle": "Redirecting",
|
||||
"loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
|
||||
@@ -18,19 +19,16 @@
|
||||
"continueInvalidRedirectTitle": "Invalid redirect",
|
||||
"continueInvalidRedirectSubtitle": "The redirect URL is invalid",
|
||||
"continueInsecureRedirectTitle": "Insecure redirect",
|
||||
"continueInsecureRedirectSubtitle": "You are trying to redirect from <Code>https</Code> to <Code>http</Code>, are you sure you want to continue?",
|
||||
"continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. Are you sure you want to continue?",
|
||||
"continueTitle": "Continue",
|
||||
"continueSubtitle": "Click the button to continue to your app.",
|
||||
"internalErrorTitle": "Internal Server Error",
|
||||
"internalErrorSubtitle": "An error occurred on the server and it currently cannot serve your request.",
|
||||
"internalErrorButton": "Try again",
|
||||
"logoutFailTitle": "Failed to log out",
|
||||
"logoutFailSubtitle": "Please try again",
|
||||
"logoutSuccessTitle": "Logged out",
|
||||
"logoutSuccessSubtitle": "You have been logged out",
|
||||
"logoutTitle": "Logout",
|
||||
"logoutUsernameSubtitle": "You are currently logged in as <Code>{{username}}</Code>, click the button below to logout.",
|
||||
"logoutOauthSubtitle": "You are currently logged in as <Code>{{username}}</Code> using the {{provider}} OAuth provider, click the button below to logout.",
|
||||
"logoutUsernameSubtitle": "You are currently logged in as <code>{{username}}</code>. Click the button below to logout.",
|
||||
"logoutOauthSubtitle": "You are currently logged in as <code>{{username}}</code> using the {{provider}} OAuth provider. Click the button below to logout.",
|
||||
"notFoundTitle": "Page not found",
|
||||
"notFoundSubtitle": "The page you are looking for does not exist.",
|
||||
"notFoundButton": "Go home",
|
||||
@@ -39,13 +37,17 @@
|
||||
"totpSuccessTitle": "Verified",
|
||||
"totpSuccessSubtitle": "Redirecting to your app",
|
||||
"totpTitle": "Enter your TOTP code",
|
||||
"totpSubtitle": "Please enter the code from your authenticator app.",
|
||||
"unauthorizedTitle": "Unauthorized",
|
||||
"unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
|
||||
"unauthorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
|
||||
"unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
|
||||
"unauthorizedResourceSubtitle": "The user with username <code>{{username}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
|
||||
"unauthorizedLoginSubtitle": "The user with username <code>{{username}}</code> is not authorized to login.",
|
||||
"unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
|
||||
"unauthorizedButton": "Try again",
|
||||
"untrustedRedirectTitle": "Untrusted redirect",
|
||||
"untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",
|
||||
"untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
|
||||
"cancelTitle": "Cancel",
|
||||
"forgotPasswordTitle": "Forgot your password?"
|
||||
"forgotPasswordTitle": "Forgot your password?",
|
||||
"failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
|
||||
"errorTitle": "An error occurred",
|
||||
"errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information."
|
||||
}
|
||||
19
frontend/src/lib/utils.ts
Normal file
19
frontend/src/lib/utils.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export const isValidUrl = (url: string) => {
|
||||
try {
|
||||
new URL(url);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const capitalize = (str: string) => {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
};
|
||||
@@ -1,54 +1,83 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App.tsx";
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import "@mantine/core/styles.css";
|
||||
import "@mantine/notifications/styles.css";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { BrowserRouter, Route } from "react-router";
|
||||
import { Routes } from "react-router";
|
||||
import { UserContextProvider } from "./context/user-context.tsx";
|
||||
import { LoginPage } from "./pages/login-page.tsx";
|
||||
import { LogoutPage } from "./pages/logout-page.tsx";
|
||||
import { ContinuePage } from "./pages/continue-page.tsx";
|
||||
import { NotFoundPage } from "./pages/not-found-page.tsx";
|
||||
import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
|
||||
import { InternalServerError } from "./pages/internal-server-error.tsx";
|
||||
import { TotpPage } from "./pages/totp-page.tsx";
|
||||
import { AppContextProvider } from "./context/app-context.tsx";
|
||||
import "./lib/i18n/i18n.ts";
|
||||
import { ForgotPasswordPage } from "./pages/forgot-password-page.tsx";
|
||||
import "./index.css";
|
||||
import { Layout } from "./components/layout/layout.tsx";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router";
|
||||
import { LoginPage } from "./pages/login-page.tsx";
|
||||
import { App } from "./App.tsx";
|
||||
import { ErrorPage } from "./pages/error-page.tsx";
|
||||
import { NotFoundPage } from "./pages/not-found-page.tsx";
|
||||
import { ContinuePage } from "./pages/continue-page.tsx";
|
||||
import { TotpPage } from "./pages/totp-page.tsx";
|
||||
import { ForgotPasswordPage } from "./pages/forgot-password-page.tsx";
|
||||
import { LogoutPage } from "./pages/logout-page.tsx";
|
||||
import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { AppContextProvider } from "./context/app-context.tsx";
|
||||
import { UserContextProvider } from "./context/user-context.tsx";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
element: <LoginPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/logout",
|
||||
element: <LogoutPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/continue",
|
||||
element: <ContinuePage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/totp",
|
||||
element: <TotpPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/forgot-password",
|
||||
element: <ForgotPasswordPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/unauthorized",
|
||||
element: <UnauthorizedPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/error",
|
||||
element: <ErrorPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <NotFoundPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<MantineProvider defaultColorScheme="auto">
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Notifications />
|
||||
<AppContextProvider>
|
||||
<UserContextProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<App />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/totp" element={<TotpPage />} />
|
||||
<Route path="/logout" element={<LogoutPage />} />
|
||||
<Route path="/continue" element={<ContinuePage />} />
|
||||
<Route path="/unauthorized" element={<UnauthorizedPage />} />
|
||||
<Route path="/error" element={<InternalServerError />} />
|
||||
<Route
|
||||
path="/forgot-password"
|
||||
element={<ForgotPasswordPage />}
|
||||
/>
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</UserContextProvider>
|
||||
</AppContextProvider>
|
||||
</QueryClientProvider>
|
||||
</MantineProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AppContextProvider>
|
||||
<UserContextProvider>
|
||||
<Layout>
|
||||
<RouterProvider router={router} />
|
||||
<Toaster />
|
||||
</Layout>
|
||||
</UserContextProvider>
|
||||
</AppContextProvider>
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,144 +1,132 @@
|
||||
import { Button, Code, Paper, Text } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { Navigate } from "react-router";
|
||||
import { useUserContext } from "../context/user-context";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { ReactNode } from "react";
|
||||
import { escapeRegex, isValidRedirectUri } from "../utils/utils";
|
||||
import { useAppContext } from "../context/app-context";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useAppContext } from "@/context/app-context";
|
||||
import { useUserContext } from "@/context/user-context";
|
||||
import { isValidUrl } from "@/lib/utils";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Navigate, useLocation, useNavigate } from "react-router";
|
||||
import DOMPurify from "dompurify";
|
||||
|
||||
export const ContinuePage = () => {
|
||||
const queryString = window.location.search;
|
||||
const params = new URLSearchParams(queryString);
|
||||
const redirectUri = params.get("redirect_uri") ?? "";
|
||||
|
||||
const { isLoggedIn } = useUserContext();
|
||||
const { disableContinue, domain } = useAppContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
|
||||
return <Navigate to="/login" />;
|
||||
}
|
||||
|
||||
if (!isValidRedirectUri(redirectUri)) {
|
||||
return <Navigate to="/" />;
|
||||
const { domain, disableContinue } = useAppContext();
|
||||
const { search } = useLocation();
|
||||
|
||||
const searchParams = new URLSearchParams(search);
|
||||
const redirectURI = searchParams.get("redirect_uri");
|
||||
|
||||
if (!redirectURI) {
|
||||
return <Navigate to="/logout" />;
|
||||
}
|
||||
|
||||
const redirect = () => {
|
||||
notifications.show({
|
||||
title: t("continueRedirectingTitle"),
|
||||
message: t("continueRedirectingSubtitle"),
|
||||
color: "blue",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = redirectUri;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
let uri;
|
||||
|
||||
try {
|
||||
uri = new URL(redirectUri);
|
||||
} catch {
|
||||
return (
|
||||
<ContinuePageLayout>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("Invalid redirect")}
|
||||
</Text>
|
||||
<Text>{t("The redirect URL is invalid")}</Text>
|
||||
</ContinuePageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const regex = new RegExp(`^.*${escapeRegex(domain)}$`);
|
||||
|
||||
if (!regex.test(uri.hostname)) {
|
||||
return (
|
||||
<ContinuePageLayout>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("untrustedRedirectTitle")}
|
||||
</Text>
|
||||
<Trans
|
||||
i18nKey="untrustedRedirectSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
values={{ domain: domain }}
|
||||
/>
|
||||
<Button fullWidth mt="xl" color="red" onClick={redirect}>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
mt="xs"
|
||||
color="gray"
|
||||
onClick={() => (window.location.href = "/")}
|
||||
>
|
||||
{t("cancelTitle")}
|
||||
</Button>
|
||||
</ContinuePageLayout>
|
||||
);
|
||||
if (!isValidUrl(DOMPurify.sanitize(redirectURI))) {
|
||||
return <Navigate to="/logout" />;
|
||||
}
|
||||
|
||||
if (disableContinue) {
|
||||
window.location.href = redirectUri;
|
||||
window.location.href = DOMPurify.sanitize(redirectURI);
|
||||
}
|
||||
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const url = new URL(redirectURI);
|
||||
|
||||
if (!(url.hostname == domain) && !url.hostname.endsWith(`.${domain}`)) {
|
||||
return (
|
||||
<ContinuePageLayout>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("continueRedirectingTitle")}
|
||||
</Text>
|
||||
<Text>{t("continueRedirectingSubtitle")}</Text>
|
||||
</ContinuePageLayout>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">
|
||||
{t("untrustedRedirectTitle")}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
<Trans
|
||||
i18nKey="untrustedRedirectSubtitle"
|
||||
t={t}
|
||||
components={{
|
||||
code: <code />,
|
||||
}}
|
||||
values={{ domain }}
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch gap-2">
|
||||
<Button
|
||||
onClick={() =>
|
||||
(window.location.href = DOMPurify.sanitize(redirectURI))
|
||||
}
|
||||
variant="destructive"
|
||||
>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
<Button onClick={() => navigate("/logout")} variant="outline">
|
||||
{t("cancelTitle")}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (window.location.protocol === "https:" && uri.protocol === "http:") {
|
||||
if (url.protocol === "http:" && window.location.protocol === "https:") {
|
||||
return (
|
||||
<ContinuePageLayout>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("continueInsecureRedirectTitle")}
|
||||
</Text>
|
||||
<Text>
|
||||
<Trans
|
||||
i18nKey="continueInsecureRedirectSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
/>
|
||||
</Text>
|
||||
<Button fullWidth mt="xl" color="yellow" onClick={redirect}>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">
|
||||
{t("continueInsecureRedirectTitle")}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
<Trans
|
||||
i18nKey="continueInsecureRedirectSubtitle"
|
||||
t={t}
|
||||
components={{
|
||||
code: <code />,
|
||||
}}
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch gap-2">
|
||||
<Button
|
||||
onClick={() =>
|
||||
(window.location.href = DOMPurify.sanitize(redirectURI))
|
||||
}
|
||||
variant="warning"
|
||||
>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
<Button onClick={() => navigate("/logout")} variant="outline">
|
||||
{t("cancelTitle")}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("continueTitle")}</CardTitle>
|
||||
<CardDescription>{t("continueSubtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch">
|
||||
<Button
|
||||
onClick={() =>
|
||||
(window.location.href = DOMPurify.sanitize(redirectURI))
|
||||
}
|
||||
>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
mt="xs"
|
||||
color="gray"
|
||||
onClick={() => (window.location.href = "/")}
|
||||
>
|
||||
{t("cancelTitle")}
|
||||
</Button>
|
||||
</ContinuePageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ContinuePageLayout>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("continueTitle")}
|
||||
</Text>
|
||||
<Text>{t("continueSubtitle")}</Text>
|
||||
<Button fullWidth mt="xl" onClick={redirect}>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
</ContinuePageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export const ContinuePageLayout = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
{children}
|
||||
</Paper>
|
||||
</Layout>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
20
frontend/src/pages/error-page.tsx
Normal file
20
frontend/src/pages/error-page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const ErrorPage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("errorTitle")}</CardTitle>
|
||||
<CardDescription>{t("errorSubtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Paper, Text, TypographyStylesProvider } from "@mantine/core";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useAppContext } from "@/context/app-context";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppContext } from "../context/app-context";
|
||||
import Markdown from 'react-markdown'
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export const ForgotPasswordPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const { forgotPasswordMessage } = useAppContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("forgotPasswordTitle")}
|
||||
</Text>
|
||||
<TypographyStylesProvider>
|
||||
<Markdown>
|
||||
{forgotPasswordMessage}
|
||||
</Markdown>
|
||||
</TypographyStylesProvider>
|
||||
</Paper>
|
||||
</Layout>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("forgotPasswordTitle")}</CardTitle>
|
||||
<CardDescription>
|
||||
<Markdown>{forgotPasswordMessage}</Markdown>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Button, Paper, Text } from "@mantine/core";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const InternalServerError = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("internalErrorTitle")}
|
||||
</Text>
|
||||
<Text>{t("internalErrorSubtitle")}</Text>
|
||||
<Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
|
||||
{t("internalErrorButton")}
|
||||
</Button>
|
||||
</Paper>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
@@ -1,181 +1,166 @@
|
||||
import { Paper, Title, Text, Divider } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { LoginForm } from "@/components/auth/login-form";
|
||||
import { GenericIcon } from "@/components/icons/generic";
|
||||
import { GithubIcon } from "@/components/icons/github";
|
||||
import { GoogleIcon } from "@/components/icons/google";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "@/components/ui/card";
|
||||
import { OAuthButton } from "@/components/ui/oauth-button";
|
||||
import { SeperatorWithChildren } from "@/components/ui/separator";
|
||||
import { useAppContext } from "@/context/app-context";
|
||||
import { useUserContext } from "@/context/user-context";
|
||||
import { useIsMounted } from "@/lib/hooks/use-is-mounted";
|
||||
import { LoginSchema } from "@/schemas/login-schema";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import axios, { type AxiosError } from "axios";
|
||||
import { useUserContext } from "../context/user-context";
|
||||
import { Navigate } from "react-router";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { OAuthButtons } from "../components/auth/oauth-buttons";
|
||||
import { LoginFormValues } from "../schemas/login-schema";
|
||||
import { LoginForm } from "../components/auth/login-forn";
|
||||
import { useAppContext } from "../context/app-context";
|
||||
import axios, { AxiosError } from "axios";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useIsMounted } from "../lib/hooks/use-is-mounted";
|
||||
import { isValidRedirectUri } from "../utils/utils";
|
||||
import { Navigate, useLocation } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const LoginPage = () => {
|
||||
const queryString = window.location.search;
|
||||
const params = new URLSearchParams(queryString);
|
||||
const redirectUri = params.get("redirect_uri") ?? "";
|
||||
|
||||
const { isLoggedIn } = useUserContext();
|
||||
|
||||
if (isLoggedIn) {
|
||||
return <Navigate to="/logout" />;
|
||||
}
|
||||
|
||||
const {
|
||||
configuredProviders,
|
||||
title,
|
||||
genericName,
|
||||
oauthAutoRedirect: oauthAutoRedirectContext,
|
||||
} = useAppContext();
|
||||
|
||||
const { configuredProviders, title, oauthAutoRedirect } = useAppContext();
|
||||
const { search } = useLocation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [oauthAutoRedirect, setOAuthAutoRedirect] = useState(
|
||||
oauthAutoRedirectContext,
|
||||
);
|
||||
|
||||
const oauthProviders = configuredProviders.filter(
|
||||
(value) => value !== "username",
|
||||
);
|
||||
|
||||
const isMounted = useIsMounted();
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: (login: LoginFormValues) => {
|
||||
return axios.post("/api/login", login);
|
||||
},
|
||||
onError: (data: AxiosError) => {
|
||||
if (data.response) {
|
||||
if (data.response.status === 429) {
|
||||
notifications.show({
|
||||
title: t("loginFailTitle"),
|
||||
message: t("loginFailRateLimit"),
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
notifications.show({
|
||||
title: t("loginFailTitle"),
|
||||
message: t("loginFailSubtitle"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
onSuccess: async (data) => {
|
||||
if (data.data.totpPending) {
|
||||
window.location.replace(`/totp?redirect_uri=${redirectUri}`);
|
||||
return;
|
||||
}
|
||||
const searchParams = new URLSearchParams(search);
|
||||
const redirectUri = searchParams.get("redirect_uri");
|
||||
|
||||
notifications.show({
|
||||
title: t("loginSuccessTitle"),
|
||||
message: t("loginSuccessSubtitle"),
|
||||
color: "green",
|
||||
});
|
||||
const oauthConfigured =
|
||||
configuredProviders.filter((provider) => provider !== "username").length >
|
||||
0;
|
||||
const userAuthConfigured = configuredProviders.includes("username");
|
||||
|
||||
setTimeout(() => {
|
||||
if (!isValidRedirectUri(redirectUri)) {
|
||||
window.location.replace("/");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.replace(`/continue?redirect_uri=${redirectUri}`);
|
||||
}, 500);
|
||||
},
|
||||
});
|
||||
|
||||
const loginOAuthMutation = useMutation({
|
||||
mutationFn: (provider: string) => {
|
||||
return axios.get(
|
||||
`/api/oauth/url/${provider}?redirect_uri=${redirectUri}`,
|
||||
);
|
||||
},
|
||||
onError: () => {
|
||||
notifications.show({
|
||||
title: t("loginOauthFailTitle"),
|
||||
message: t("loginOauthFailSubtitle"),
|
||||
color: "red",
|
||||
});
|
||||
setOAuthAutoRedirect("none");
|
||||
},
|
||||
const oauthMutation = useMutation({
|
||||
mutationFn: (provider: string) =>
|
||||
axios.get(
|
||||
`/api/oauth/url/${provider}?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
|
||||
),
|
||||
mutationKey: ["oauth"],
|
||||
onSuccess: (data) => {
|
||||
notifications.show({
|
||||
title: t("loginOauthSuccessTitle"),
|
||||
message: t("loginOauthSuccessSubtitle"),
|
||||
color: "blue",
|
||||
toast.info(t("loginOauthSuccessTitle"), {
|
||||
description: t("loginOauthSuccessSubtitle"),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = data.data.url;
|
||||
}, 500);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("loginOauthFailTitle"), {
|
||||
description: t("loginOauthFailSubtitle"),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (values: LoginFormValues) => {
|
||||
loginMutation.mutate(values);
|
||||
};
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: (values: LoginSchema) => axios.post("/api/login", values),
|
||||
mutationKey: ["login"],
|
||||
onSuccess: (data) => {
|
||||
if (data.data.totpPending) {
|
||||
window.location.replace(
|
||||
`/totp?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(t("loginSuccessTitle"), {
|
||||
description: t("loginSuccessSubtitle"),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.replace(
|
||||
`/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
onError: (error: AxiosError) => {
|
||||
toast.error(t("loginFailTitle"), {
|
||||
description:
|
||||
error.response?.status === 429
|
||||
? t("loginFailRateLimit")
|
||||
: t("loginFailSubtitle"),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isMounted()) {
|
||||
if (
|
||||
oauthProviders.includes(oauthAutoRedirect) &&
|
||||
isValidRedirectUri(redirectUri)
|
||||
oauthConfigured &&
|
||||
configuredProviders.includes(oauthAutoRedirect) &&
|
||||
redirectUri
|
||||
) {
|
||||
loginOAuthMutation.mutate(oauthAutoRedirect);
|
||||
oauthMutation.mutate(oauthAutoRedirect);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (
|
||||
oauthProviders.includes(oauthAutoRedirect) &&
|
||||
isValidRedirectUri(redirectUri)
|
||||
) {
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("continueRedirectingTitle")}
|
||||
</Text>
|
||||
<Text>{t("loginOauthSuccessSubtitle")}</Text>
|
||||
</Paper>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Title ta="center">{title}</Title>
|
||||
<Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
|
||||
{oauthProviders.length > 0 && (
|
||||
<>
|
||||
<Text size="lg" fw={500} ta="center">
|
||||
{t("loginTitle")}
|
||||
</Text>
|
||||
<OAuthButtons
|
||||
oauthProviders={oauthProviders}
|
||||
isPending={loginOAuthMutation.isPending}
|
||||
mutate={loginOAuthMutation.mutate}
|
||||
genericName={genericName}
|
||||
/>
|
||||
{configuredProviders.includes("username") && (
|
||||
<Divider
|
||||
label={t("loginDivider")}
|
||||
labelPosition="center"
|
||||
my="lg"
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center text-3xl">{title}</CardTitle>
|
||||
{configuredProviders.length > 0 && (
|
||||
<CardDescription className="text-center">
|
||||
{oauthConfigured ? t("loginTitle") : t("loginTitleSimple")}
|
||||
</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
{oauthConfigured && (
|
||||
<div className="flex flex-col gap-2 items-center justify-center">
|
||||
{configuredProviders.includes("google") && (
|
||||
<OAuthButton
|
||||
title="Google"
|
||||
icon={<GoogleIcon />}
|
||||
className="w-full"
|
||||
onClick={() => oauthMutation.mutate("google")}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
{configuredProviders.includes("github") && (
|
||||
<OAuthButton
|
||||
title="Github"
|
||||
icon={<GithubIcon />}
|
||||
className="w-full"
|
||||
onClick={() => oauthMutation.mutate("github")}
|
||||
/>
|
||||
)}
|
||||
{configuredProviders.includes("generic") && (
|
||||
<OAuthButton
|
||||
title="Generic"
|
||||
icon={<GenericIcon />}
|
||||
className="w-full"
|
||||
onClick={() => oauthMutation.mutate("generic")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{configuredProviders.includes("username") && (
|
||||
{userAuthConfigured && oauthConfigured && (
|
||||
<SeperatorWithChildren>{t("loginDivider")}</SeperatorWithChildren>
|
||||
)}
|
||||
{userAuthConfigured && (
|
||||
<LoginForm
|
||||
isPending={loginMutation.isPending}
|
||||
onSubmit={handleSubmit}
|
||||
onSubmit={(values) => loginMutation.mutate(values)}
|
||||
loading={loginMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
</Layout>
|
||||
{configuredProviders.length == 0 && (
|
||||
<h3 className="text-center text-xl text-red-600">
|
||||
{t("failedToFetchProvidersTitle")}
|
||||
</h3>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,84 +1,89 @@
|
||||
import { Button, Code, Paper, Text } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useAppContext } from "@/context/app-context";
|
||||
import { useUserContext } from "@/context/user-context";
|
||||
import { capitalize } from "@/lib/utils";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { useUserContext } from "../context/user-context";
|
||||
import { Navigate } from "react-router";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { capitalize } from "../utils/utils";
|
||||
import { useAppContext } from "../context/app-context";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Navigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const LogoutPage = () => {
|
||||
const { isLoggedIn, oauth, provider, email, username } = useUserContext();
|
||||
const { genericName } = useAppContext();
|
||||
const { t } = useTranslation();
|
||||
const { provider, username, isLoggedIn, email } = useUserContext();
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return <Navigate to="/login" />;
|
||||
}
|
||||
|
||||
const { genericName } = useAppContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: () => {
|
||||
return axios.post("/api/logout");
|
||||
},
|
||||
onError: () => {
|
||||
notifications.show({
|
||||
title: t("logoutFailTitle"),
|
||||
message: t("logoutFailSubtitle"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
mutationFn: () => axios.post("/api/logout"),
|
||||
mutationKey: ["logout"],
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
title: t("logoutSuccessTitle"),
|
||||
message: t("logoutSuccessSubtitle"),
|
||||
color: "green",
|
||||
toast.success(t("logoutSuccessTitle"), {
|
||||
description: t("logoutSuccessSubtitle"),
|
||||
});
|
||||
setTimeout(() => {
|
||||
|
||||
setTimeout(async () => {
|
||||
window.location.replace("/login");
|
||||
}, 500);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("logoutFailTitle"), {
|
||||
description: t("logoutFailSubtitle"),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("logoutTitle")}
|
||||
</Text>
|
||||
<Text>
|
||||
{oauth ? (
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("logoutTitle")}</CardTitle>
|
||||
<CardDescription>
|
||||
{provider !== "username" ? (
|
||||
<Trans
|
||||
i18nKey="logoutOauthSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
components={{
|
||||
code: <code />,
|
||||
}}
|
||||
values={{
|
||||
username: email,
|
||||
provider:
|
||||
provider === "generic" ? genericName : capitalize(provider),
|
||||
username: email,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Trans
|
||||
i18nKey="logoutUsernameSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
components={{
|
||||
code: <code />,
|
||||
}}
|
||||
values={{
|
||||
username: username,
|
||||
username,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Text>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch">
|
||||
<Button
|
||||
fullWidth
|
||||
mt="xl"
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
loading={logoutMutation.isPending}
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
>
|
||||
{t("logoutTitle")}
|
||||
</Button>
|
||||
</Paper>
|
||||
</Layout>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
import { Button, Paper, Text } from "@mantine/core";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
export const NotFoundPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("notFoundTitle")}
|
||||
</Text>
|
||||
<Text>{t("notFoundSubtitle")}</Text>
|
||||
<Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
|
||||
{t("notFoundButton")}
|
||||
</Button>
|
||||
</Paper>
|
||||
</Layout>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("notFoundTitle")}</CardTitle>
|
||||
<CardDescription>{t("notFoundSubtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch">
|
||||
<Button onClick={() => navigate("/")}>{t("notFoundButton")}</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,66 +1,69 @@
|
||||
import { Navigate } from "react-router";
|
||||
import { useUserContext } from "../context/user-context";
|
||||
import { Title, Paper, Text } from "@mantine/core";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { TotpForm } from "../components/auth/totp-form";
|
||||
import { TotpForm } from "@/components/auth/totp-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { TotpSchema } from "@/schemas/totp-schema";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useAppContext } from "../context/app-context";
|
||||
import { useId } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation, useNavigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const TotpPage = () => {
|
||||
const queryString = window.location.search;
|
||||
const params = new URLSearchParams(queryString);
|
||||
const redirectUri = params.get("redirect_uri") ?? "";
|
||||
|
||||
const { totpPending, isLoggedIn } = useUserContext();
|
||||
const { title } = useAppContext();
|
||||
const { t } = useTranslation();
|
||||
const { search } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const formId = useId();
|
||||
|
||||
if (isLoggedIn) {
|
||||
return <Navigate to={`/logout`} />;
|
||||
}
|
||||
|
||||
if (!totpPending) {
|
||||
return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
|
||||
}
|
||||
const searchParams = new URLSearchParams(search);
|
||||
const redirectUri = searchParams.get("redirect_uri");
|
||||
|
||||
const totpMutation = useMutation({
|
||||
mutationFn: async (totp: { code: string }) => {
|
||||
await axios.post("/api/totp", totp);
|
||||
mutationFn: (values: TotpSchema) => axios.post("/api/totp", values),
|
||||
mutationKey: ["totp"],
|
||||
onSuccess: () => {
|
||||
toast.success(t("totpSuccessTitle"), {
|
||||
description: t("totpSuccessSubtitle"),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
navigate(
|
||||
`/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
onError: () => {
|
||||
notifications.show({
|
||||
title: t("totpFailTitle"),
|
||||
message: t("totpFailSubtitle"),
|
||||
color: "red",
|
||||
toast.error(t("totpFailTitle"), {
|
||||
description: t("totpFailSubtitle"),
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
title: t("totpSuccessTitle"),
|
||||
message: t("totpSuccessSubtitle"),
|
||||
color: "green",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.replace(`/continue?redirect_uri=${redirectUri}`);
|
||||
}, 500);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Title ta="center">{title}</Title>
|
||||
<Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
|
||||
<Text size="lg" fw={500} mb="md" ta="center">
|
||||
{t("totpTitle")}
|
||||
</Text>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("totpTitle")}</CardTitle>
|
||||
<CardDescription>{t("totpSubtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center">
|
||||
<TotpForm
|
||||
isPending={totpMutation.isPending}
|
||||
formId={formId}
|
||||
onSubmit={(values) => totpMutation.mutate(values)}
|
||||
loading={totpMutation.isPending}
|
||||
/>
|
||||
</Paper>
|
||||
</Layout>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col items-stretch">
|
||||
<Button form={formId} type="submit" loading={totpMutation.isPending}>
|
||||
{t("continueTitle")}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,98 +1,62 @@
|
||||
import { Button, Code, Paper, Text } from "@mantine/core";
|
||||
import { Layout } from "../components/layouts/layout";
|
||||
import { Navigate } from "react-router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import React, { useEffect } from "react";
|
||||
import { isValidQuery } from "../utils/utils";
|
||||
import { useIsMounted } from "../lib/hooks/use-is-mounted";
|
||||
import { Navigate, useLocation, useNavigate } from "react-router";
|
||||
|
||||
export const UnauthorizedPage = () => {
|
||||
const queryString = window.location.search;
|
||||
const params = new URLSearchParams(queryString);
|
||||
const username = params.get("username") ?? "";
|
||||
const groupErr = params.get("groupErr") ?? "";
|
||||
const resource = params.get("resource") ?? "";
|
||||
const { search } = useLocation();
|
||||
|
||||
const [isGroupErr, setIsGroupErr] = React.useState(false);
|
||||
const searchParams = new URLSearchParams(search);
|
||||
const username = searchParams.get("username");
|
||||
const resource = searchParams.get("resource");
|
||||
const groupErr = searchParams.get("groupErr");
|
||||
|
||||
const useMounted = useIsMounted();
|
||||
|
||||
useEffect(() => {
|
||||
if (useMounted()) {
|
||||
if (isValidQuery(groupErr)) {
|
||||
if (groupErr === "true") {
|
||||
setIsGroupErr(true);
|
||||
return;
|
||||
}
|
||||
setIsGroupErr(false);
|
||||
return;
|
||||
}
|
||||
setIsGroupErr(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!isValidQuery(username)) {
|
||||
if (!username) {
|
||||
return <Navigate to="/" />;
|
||||
}
|
||||
|
||||
if (isValidQuery(resource) && !isGroupErr) {
|
||||
return (
|
||||
<UnauthorizedLayout>
|
||||
<Trans
|
||||
i18nKey="unauthorizedResourceSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
values={{ resource, username }}
|
||||
/>
|
||||
</UnauthorizedLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (isGroupErr && isValidQuery(resource)) {
|
||||
return (
|
||||
<UnauthorizedLayout>
|
||||
<Trans
|
||||
i18nKey="unauthorizedGroupsSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
values={{ username, resource }}
|
||||
/>
|
||||
</UnauthorizedLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<UnauthorizedLayout>
|
||||
<Trans
|
||||
i18nKey="unauthorizedLoginSubtitle"
|
||||
t={t}
|
||||
components={{ Code: <Code /> }}
|
||||
values={{ username }}
|
||||
/>
|
||||
</UnauthorizedLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const UnauthorizedLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
let i18nKey = "unauthorizedLoginSubtitle";
|
||||
|
||||
if (resource) {
|
||||
i18nKey = "unauthorizedResourceSubtitle";
|
||||
}
|
||||
|
||||
if (groupErr === "true") {
|
||||
i18nKey = "unauthorizedGroupsSubtitle";
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
|
||||
<Text size="xl" fw={700}>
|
||||
{t("Unauthorized")}
|
||||
</Text>
|
||||
<Text>{children}</Text>
|
||||
<Button
|
||||
fullWidth
|
||||
mt="xl"
|
||||
onClick={() => window.location.replace("/login")}
|
||||
>
|
||||
<Card className="min-w-xs sm:min-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">{t("unauthorizedTitle")}</CardTitle>
|
||||
<CardDescription>
|
||||
<Trans
|
||||
i18nKey={i18nKey}
|
||||
t={t}
|
||||
components={{
|
||||
code: <code />,
|
||||
}}
|
||||
values={{
|
||||
username,
|
||||
resource,
|
||||
}}
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-stretch">
|
||||
<Button onClick={() => navigate("/login")}>
|
||||
{t("unauthorizedButton")}
|
||||
</Button>
|
||||
</Paper>
|
||||
</Layout>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ export const appContextSchema = z.object({
|
||||
domain: z.string(),
|
||||
forgotPasswordMessage: z.string(),
|
||||
oauthAutoRedirect: z.enum(["none", "github", "google", "generic"]),
|
||||
backgroundImage: z.string(),
|
||||
});
|
||||
|
||||
export type AppContextSchemaType = z.infer<typeof appContextSchema>;
|
||||
export type AppContextSchema = z.infer<typeof appContextSchema>;
|
||||
|
||||
@@ -5,4 +5,4 @@ export const loginSchema = z.object({
|
||||
password: z.string(),
|
||||
});
|
||||
|
||||
export type LoginFormValues = z.infer<typeof loginSchema>;
|
||||
export type LoginSchema = z.infer<typeof loginSchema>;
|
||||
|
||||
7
frontend/src/schemas/totp-schema.ts
Normal file
7
frontend/src/schemas/totp-schema.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const totpSchema = z.object({
|
||||
code: z.string(),
|
||||
});
|
||||
|
||||
export type TotpSchema = z.infer<typeof totpSchema>;
|
||||
@@ -5,9 +5,9 @@ export const userContextSchema = z.object({
|
||||
username: z.string(),
|
||||
name: z.string(),
|
||||
email: z.string(),
|
||||
oauth: z.boolean(),
|
||||
provider: z.string(),
|
||||
oauth: z.boolean(),
|
||||
totpPending: z.boolean(),
|
||||
});
|
||||
|
||||
export type UserContextSchemaType = z.infer<typeof userContextSchema>;
|
||||
export type UserContextSchema = z.infer<typeof userContextSchema>;
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
|
||||
export const escapeRegex = (value: string) => value.replace(/[-\/\\^$.*+?()[\]{}|]/g, "\\$&");
|
||||
export const isValidQuery = (query: string) => query && query.trim() !== "";
|
||||
|
||||
export const isValidRedirectUri = (value: string) => {
|
||||
if (!isValidQuery(value)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
new URL(value);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
// Resolve paths
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
|
||||
@@ -3,5 +3,11 @@
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
proxy: {
|
||||
@@ -14,5 +21,5 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
allowedHosts: true,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user