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

validation and duplicate submission check

Browse Source
This commit is contained in:
robbond
2024-06-09 21:20:04 +01:00
parent 6f6262fefa
commit 6e0e44567a
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 { getCsrfToken } from "next-auth/react";
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) => {
let { t, lang } = useTranslation();
@@ -20,6 +23,21 @@ const SignIn = (props) => {
new URL(window.location.href).port +
"/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 (
<div>
<Head>
@@ -47,8 +65,15 @@ const SignIn = (props) => {
<form
method="post"
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
className="govuk-input"
name="csrfToken"
@@ -61,23 +86,46 @@ const SignIn = (props) => {
type="hidden"
defaultValue={callbackUrl}
/>
<label
className="govuk-label"
htmlFor="email"
>
{t("auth:auth-email-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
className="govuk-input govuk-!-width-three-quarters"
type="email"
id="email"
name="email"
onBlur={(e) => {
!emailRegex.test(
e.currentTarget.value
)
? (setHasError(true),
setButtonDisabled(true))
: (setHasError(false),
setButtonDisabled(false));
}}
/>
</div>
<div className="govuk-form-group">
<button
type="submit"
className="govuk-button"
disabled={buttonDisabled}
>
{t("auth:auth-signin-button-label")}
</button>