Source: pages/auth/verify-request.js

  1. /** @module pages/api/auth/verify-request */
  2. import { Box, Button, Card, Heading, Text } from "grommet";
  3. import Head from "next/head";
  4. import { useRouter } from "next/router";
  5. import Clouds from "../../components/clouds";
  6. import { Logo } from "../../components/logo";
  7. import { useTranslation } from "next-i18next";
  8. import { serverSideTranslations } from "next-i18next/serverSideTranslations";
  9. export default function VerifyRequest() {
  10. const { push, locale } = useRouter();
  11. const { t } = useTranslation("verify-request");
  12. return (
  13. <>
  14. <Head>
  15. <title>{t("verify-email")}</title>
  16. </Head>
  17. <Clouds />
  18. <Box
  19. pad="large"
  20. align="center"
  21. gap="medium"
  22. width="large"
  23. justify="center"
  24. style={{
  25. display: "flex",
  26. height: "90vh",
  27. margin: "auto",
  28. }}
  29. >
  30. <Card
  31. pad="large"
  32. gap="medium"
  33. align="center"
  34. background="white"
  35. style={{
  36. minWidth: "24rem",
  37. }}
  38. >
  39. <Logo />
  40. <Heading
  41. level={2}
  42. style={{
  43. marginBottom: 0,
  44. }}
  45. >
  46. {t("check-email")}
  47. </Heading>
  48. <Text
  49. style={{
  50. marginBottom: "1.5rem",
  51. }}
  52. >
  53. {t("sent")} 😉.
  54. </Text>
  55. <Button
  56. key={"back-to-site"}
  57. style={{
  58. width: "100%",
  59. }}
  60. onClick={() => push(`/${locale}`)}
  61. label={t("back")}
  62. primary
  63. />
  64. </Card>
  65. </Box>
  66. </>
  67. );
  68. }
  69. export async function getServerSideProps(context) {
  70. return {
  71. props: {
  72. ...(await serverSideTranslations(context.locale, [
  73. "verify-request",
  74. "common",
  75. ])),
  76. },
  77. };
  78. }