Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x | import { alpha, Box, styled, Typography, useMediaQuery } from "@mui/material";
import Alert from "components/Alert";
import HtmlMeta from "components/HtmlMeta";
import StyledLink from "components/StyledLink";
import AntibotNote from "features/antibot/AntibotNote";
import LanguagePickerSelect from "features/translate/LanguagePickerSelect";
import { Trans, useTranslation } from "i18n";
import { AUTH, GLOBAL, LANDING } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useEffect } from "react";
import CouchersTextLogo from "resources/CouchersTextLogo";
import { dashboardRoute, signupRoute } from "routes";
import { theme } from "theme";
import stringOrFirstString from "utils/stringOrFirstString";
import { useAuthContext } from "../AuthProvider";
import LoginForm from "./LoginForm";
const StyledContent = styled("div")(({ theme }) => ({
width: "100%",
height: "100%",
padding: theme.spacing(0, 2),
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}));
const StyledFormWrapper = styled("div")(({ theme }) => ({
backgroundColor: alpha(theme.palette.primary.light, 0.1),
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(2),
width: "100%",
maxWidth: "600px",
border: `1px solid ${theme.palette.divider}`,
marginTop: theme.spacing(2),
}));
export default function Login() {
const { t } = useTranslation([AUTH, GLOBAL, LANDING]);
const { authState } = useAuthContext();
const authenticated = authState.authenticated;
const error = authState.error;
const router = useRouter();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const from = stringOrFirstString(router.query.from) ?? dashboardRoute;
const redirectTo = from === "/" || from === "%2F" ? dashboardRoute : from;
useEffect(() => {
Iif (authenticated) {
// Get the NEXT_LOCALE cookie to use the user's preferred language
const nextLocale =
typeof document !== "undefined"
? document.cookie
.split("; ")
.find((row) => row.startsWith("NEXT_LOCALE="))
?.split("=")[1]
: null;
const targetLocale = nextLocale || router.locale || "en";
// Navigate to destination with user's preferred locale
router.push(redirectTo, undefined, { locale: targetLocale });
}
}, [authenticated, router, redirectTo]);
return (
<>
<HtmlMeta title={t("auth:login_page.title")} />
<StyledContent>
<CouchersTextLogo />
<StyledFormWrapper>
<Typography
gutterBottom
sx={{ fontSize: "1.4rem", fontWeight: "bold" }}
>
{t("auth:login_page.header")}
</Typography>
{error && error !== "logged_out_message" && (
<Alert severity="error" sx={{ width: "100%" }}>
{error}
</Alert>
)}
<LoginForm />
<Typography sx={{ marginTop: 2 }}>
<Trans t={t} i18nKey="auth:login_page.no_account_prompt">
No account yet?{" "}
<StyledLink href={signupRoute}>Sign up</StyledLink>
</Trans>
</Typography>
<Typography variant="caption">
{" "}
<AntibotNote />
</Typography>
</StyledFormWrapper>
{isMobile && (
<Box
sx={{
display: "flex",
justifyContent: "center",
marginTop: theme.spacing(2),
}}
>
<LanguagePickerSelect />
</Box>
)}
</StyledContent>
</>
);
}
|