260 lines
12 KiB
JavaScript
260 lines
12 KiB
JavaScript
import { getCsrfToken } from "next-auth/react";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import Head from "next/head";
|
|
import { useState } from "react";
|
|
import Breadcrumbs from "../../components/breadcrumbs";
|
|
import CookieBanner from "../../components/cookieBanner";
|
|
import Footer from "../../components/footer";
|
|
import Header from "../../components/header";
|
|
import ServiceBanner from "../../components/servicebanner";
|
|
import { setCookie } from "nookies";
|
|
|
|
const SignIn = (props) => {
|
|
let { t, lang } = useTranslation();
|
|
const { footerLinks, pages, csrfToken, callbackUrl } = props;
|
|
|
|
const [buttonDisabled, setButtonDisabled] = useState(false);
|
|
const [emailError, setEmailError] = useState("");
|
|
|
|
const emailRegex =
|
|
/^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
const email = String(event.target.email.value || "").trim();
|
|
|
|
if (!emailRegex.test(email)) {
|
|
setEmailError(t("account:invalid-email-address-errormsg"));
|
|
setButtonDisabled(false);
|
|
return;
|
|
}
|
|
|
|
setEmailError("");
|
|
setButtonDisabled(true);
|
|
|
|
try {
|
|
const currentLocale = lang === "cy" ? "cy" : "en";
|
|
|
|
const response = await fetch("/api/auth/resolve-locale", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
email,
|
|
locale: currentLocale
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
const resolvedLocale =
|
|
data?.locale === "cy" || data?.locale === "en"
|
|
? data.locale
|
|
: currentLocale;
|
|
|
|
const url = new URL(event.target.callbackUrl.value);
|
|
url.searchParams.set("locale", resolvedLocale);
|
|
|
|
setCookie(null, "pedw_locale", resolvedLocale, {
|
|
path: "/"
|
|
});
|
|
|
|
event.target.callbackUrl.value = url.toString();
|
|
event.target.locale.value = resolvedLocale;
|
|
event.target.submit();
|
|
} catch (error) {
|
|
const fallbackLocale = lang === "cy" ? "cy" : "en";
|
|
const url = new URL(event.target.callbackUrl.value);
|
|
url.searchParams.set("locale", fallbackLocale);
|
|
|
|
setCookie(null, "pedw_locale", fallbackLocale, {
|
|
path: "/"
|
|
});
|
|
|
|
event.target.callbackUrl.value = url.toString();
|
|
event.target.locale.value = fallbackLocale;
|
|
event.target.submit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>
|
|
{t("auth:auth-page-title")} - {t("common:service-name")}
|
|
</title>
|
|
</Head>
|
|
<div id="page_wrapper">
|
|
<CookieBanner />
|
|
<Header />
|
|
<div className="govuk-width-container govuk-!-padding-bottom-9">
|
|
<Breadcrumbs />
|
|
<ServiceBanner noSignin={true} />
|
|
<main
|
|
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing "
|
|
id="signin"
|
|
role="main"
|
|
>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<div className="govuk-body-m">
|
|
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
|
<h1 className="govuk-fieldset__heading govuk-heading-m">
|
|
{t(
|
|
"auth:auth-page-title"
|
|
)}{" "}
|
|
</h1>
|
|
</legend>
|
|
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-two-thirds ">
|
|
<form
|
|
method="post"
|
|
action="/api/auth/signin/email"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div
|
|
className={`govuk-form-group${emailError ? " govuk-form-group--error" : ""}`}
|
|
>
|
|
<input
|
|
className="govuk-input"
|
|
name="csrfToken"
|
|
type="hidden"
|
|
defaultValue={
|
|
csrfToken
|
|
}
|
|
/>
|
|
<input
|
|
name="callbackUrl"
|
|
type="hidden"
|
|
defaultValue={
|
|
callbackUrl
|
|
}
|
|
/>
|
|
<input
|
|
name="locale"
|
|
type="hidden"
|
|
defaultValue={
|
|
lang ===
|
|
"cy"
|
|
? "cy"
|
|
: "en"
|
|
}
|
|
/>
|
|
<label
|
|
className="govuk-label"
|
|
htmlFor="email"
|
|
>
|
|
{t(
|
|
"auth:auth-email-label"
|
|
)}
|
|
</label>
|
|
{emailError ? (
|
|
<span
|
|
id="email-error"
|
|
className="govuk-error-message"
|
|
>
|
|
<span className="govuk-visually-hidden">
|
|
Error:
|
|
</span>{" "}
|
|
{emailError}
|
|
</span>
|
|
) : null}
|
|
|
|
<input
|
|
className={`govuk-input govuk-!-width-three-quarters${emailError ? " govuk-input--error" : ""}`}
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
aria-describedby={
|
|
emailError
|
|
? "email-error"
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="govuk-form-group">
|
|
<button
|
|
type="submit"
|
|
className="govuk-button"
|
|
disabled={
|
|
buttonDisabled
|
|
}
|
|
>
|
|
{t(
|
|
"auth:auth-signin-button-label"
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<Footer footerLinks={footerLinks} ticketnumber={props} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export async function getServerSideProps(context) {
|
|
if (process.env.SHOWLOGIN === "false" || process.env.SHOWLOGIN === false) {
|
|
return {
|
|
redirect: {
|
|
destination: "/status",
|
|
permanent: false
|
|
}
|
|
};
|
|
}
|
|
|
|
const csrfToken = await getCsrfToken(context);
|
|
|
|
let formURL = context.req.headers.host;
|
|
formURL = typeof formURL == "undefined" ? null : formURL;
|
|
|
|
let protocol = "http";
|
|
if (context.req.headers["x-forwarded-proto"]) {
|
|
protocol = context.req.headers["x-forwarded-proto"];
|
|
} else if (context.req.connection.encrypted) {
|
|
protocol = "https";
|
|
}
|
|
|
|
formURL = protocol + "://" + formURL;
|
|
|
|
const appendParamsAndPathToNewUrl = (fromUrl, toUrl) => {
|
|
const fromUrlObj = new URL(fromUrl);
|
|
const params = fromUrlObj.searchParams;
|
|
|
|
const toUrlObj = new URL(toUrl);
|
|
toUrlObj.pathname = fromUrlObj.pathname;
|
|
|
|
params.forEach((value, key) =>
|
|
toUrlObj.searchParams.append(key, value)
|
|
);
|
|
|
|
return toUrlObj.toString();
|
|
};
|
|
|
|
typeof context.query.callbackUrl != "undefined" &&
|
|
(formURL = appendParamsAndPathToNewUrl(
|
|
context.query.callbackUrl,
|
|
formURL
|
|
));
|
|
|
|
const url = new URL(formURL);
|
|
url.searchParams.set("locale", context.locale || "en");
|
|
|
|
return {
|
|
props: { csrfToken, callbackUrl: url.toString() }
|
|
};
|
|
}
|
|
|
|
export default SignIn;
|