custom next auth pages

2022-04-19 12:24:34 +01:00
parent c8a2988556
commit 511a5ed98d
4 changed files with 322 additions and 9 deletions
@@ -0,0 +1,82 @@
+import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
+import Link from "next/link";
+import CookieBanner from "../../components/cookieBanner";
+import Footer from "../../components/footer";
+import Header from "../../components/header";
+import Breadcrumbs from "../../components/breadcrumbs";
+import { getCsrfToken } from "next-auth/react";
+
+const SignIn = (props) => {
+    let { t, lang } = useTranslation();
+    const { footerLinks, pages, csrfToken } = props;
+
+    return (
+        <div>
+            <Head>
+                <title>Sign in - {t("common:service-name")}</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container govuk-!-padding-bottom-9">
+                    <Breadcrumbs />
+                    <main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
+                        <div className="govuk-grid-row ">
+                            <div className="govuk-grid-column-two-thirds ">
+                                <h1>Sign in</h1>
+                            </div>
+                        </div>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds ">
+                                <form
+                                    method="post"
+                                    action="/api/auth/signin/email"
+                                >
+                                    <div className="govuk-form-group">
+                                        <input
+                                            className="govuk-input"
+                                            name="csrfToken"
+                                            type="hidden"
+                                            defaultValue={csrfToken}
+                                        />
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="email"
+                                        >
+                                            Email address{" "}
+                                        </label>
+                                        <input
+                                            className="govuk-input  govuk-!-width-three-quarters"
+                                            type="email"
+                                            id="email"
+                                            name="email"
+                                        />
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <button
+                                            type="submit"
+                                            className="govuk-button"
+                                        >
+                                            Sign in with your email
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export async function getServerSideProps(context) {
+    const csrfToken = await getCsrfToken(context);
+    return {
+        props: { csrfToken },
+    };
+}
+
+export default SignIn;