custom next auth pages
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
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 { useRouter } from "next/router";
|
||||
|
||||
import { getCsrfToken } from "next-auth/react";
|
||||
|
||||
const Error = (props) => {
|
||||
let { t, lang } = useTranslation();
|
||||
const { footerLinks, pages, csrfToken } = props;
|
||||
|
||||
const { error } = useRouter().query;
|
||||
|
||||
const errors = {
|
||||
Signin: "Try signing with a different account.",
|
||||
OAuthSignin: "Try signing with a different account.",
|
||||
OAuthCallback: "Try signing with a different account.",
|
||||
OAuthCreateAccount: "Try signing with a different account.",
|
||||
EmailCreateAccount: "Try signing with a different account.",
|
||||
Callback: "Try signing with a different account.",
|
||||
OAuthAccountNotLinked:
|
||||
"To confirm your identity, sign in with the same account you used originally.",
|
||||
EmailSignin: "Check your email address.",
|
||||
CredentialsSignin:
|
||||
"Sign in failed. Check the details you provided are correct.",
|
||||
Verification:
|
||||
"Unable to sign in. The sign in link is no longer valid.It may have been used already or it may have expired. ",
|
||||
default: "Unable to sign in.",
|
||||
};
|
||||
|
||||
const errorMessage = error && (errors[error] ?? errors.default);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Sign in Error - {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>There has been an error </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||
{errorMessage}
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||
{" "}
|
||||
<Link href="/">Return to Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const csrfToken = await getCsrfToken(context);
|
||||
return {
|
||||
props: { csrfToken },
|
||||
};
|
||||
}
|
||||
|
||||
export default Error;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,59 @@
|
||||
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>Check your email</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||
A link has been sent to your email so you can
|
||||
continue
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||
{" "}
|
||||
<Link href="/">Return to Home</Link>
|
||||
</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;
|
||||
Reference in New Issue
Block a user