mirror of
https://github.com/steveiliop56/tinyauth.git
synced 2025-10-31 22:25:43 +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,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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user