robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 1183: validation and duplicate submission check

Browse Source 
validation and duplicate submission check

Related work items: #8456
This commit is contained in:
Robert Bond
2024-06-09 20:25:42 +00:00
parent 6f6262fefa 6e0e44567a
commit a2d3d8352c
1 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/signin.js
+49 -1
View File
@@ -7,6 +7,9 @@ import Header from "../../components/header";
import Breadcrumbs from "../../components/breadcrumbs"; import Breadcrumbs from "../../components/breadcrumbs";
import { getCsrfToken } from "next-auth/react"; import { getCsrfToken } from "next-auth/react";
import { parseCookies, setCookie, destroyCookie } from "nookies"; import { parseCookies, setCookie, destroyCookie } from "nookies";
import { useState } from "react";
import { tr } from "date-fns/locale";
import { Router, useRouter } from "next/router";
const SignIn = (props) => { const SignIn = (props) => {
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
@@ -20,6 +23,21 @@ const SignIn = (props) => {
new URL(window.location.href).port + new URL(window.location.href).port +
"/api/auth/signin/email"; "/api/auth/signin/email";
const [buttonDisabled, setButtonDisabled] = useState(false);
const [hasError, setHasError] = useState(false);
const emailRegex =
/(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?: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-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
const handleSubmit = async (event) => {
event.preventDefault();
//!emailRegex.test(event.currentTarget[2].value) && setHasError(true);
!emailRegex.test(event.currentTarget[2].value)
? (setHasError(true), setButtonDisabled(true))
: (setButtonDisabled(true), event.target.submit());
};
return ( return (
<div> <div>
<Head> <Head>
@@ -47,8 +65,15 @@ const SignIn = (props) => {
<form <form
method="post" method="post"
action="/api/auth/signin/email" action="/api/auth/signin/email"
onSubmit={handleSubmit}
> >
<div className="govuk-form-group"> <div
className={
hasError
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<input <input
className="govuk-input" className="govuk-input"
name="csrfToken" name="csrfToken"
@@ -61,23 +86,46 @@ const SignIn = (props) => {
type="hidden" type="hidden"
defaultValue={callbackUrl} defaultValue={callbackUrl}
/> />
<label <label
className="govuk-label" className="govuk-label"
htmlFor="email" htmlFor="email"
> >
{t("auth:auth-email-label")} {t("auth:auth-email-label")}
</label> </label>
{hasError && (
<span
id={"email-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
Enter a valid email address
</span>
)}
<input <input
className="govuk-input govuk-!-width-three-quarters" className="govuk-input govuk-!-width-three-quarters"
type="email" type="email"
id="email" id="email"
name="email" name="email"
onBlur={(e) => {
!emailRegex.test(
e.currentTarget.value
)
? (setHasError(true),
setButtonDisabled(true))
: (setHasError(false),
setButtonDisabled(false));
}}
/> />
</div> </div>
<div className="govuk-form-group"> <div className="govuk-form-group">
<button <button
type="submit" type="submit"
className="govuk-button" className="govuk-button"
disabled={buttonDisabled}
> >
{t("auth:auth-signin-button-label")} {t("auth:auth-signin-button-label")}
</button> </button>