This commit is contained in:
2022-04-11 11:07:29 +01:00
parent 412b7c15b6
commit 67102497f0
8 changed files with 4266 additions and 2584 deletions
+186 -147
View File
@@ -9,6 +9,8 @@ import { getLogin } from "../../actions";
import { setLoggedInUserId } from "../../store/accountDetails/action";
import { parseCookies, setCookie, destroyCookie } from "nookies";
import { useSession, signIn, signOut } from "next-auth/react";
const required = (errorMsg) => (value) =>
value || typeof value === "number" ? undefined : errorMsg;
@@ -118,6 +120,8 @@ let Login = (props) => {
GG_REDIRECT_URI,
} = props;
const { session, status } = useSession();
const router = useRouter();
const { locale } = router;
@@ -201,163 +205,198 @@ let Login = (props) => {
router.replace(ggUrl);
};
if (session === "loading") {
return <h1>loading...</h1>;
}
if (session) {
<>
<div>Signed in as {session.user?.email}</div>
<br />
<button type="button" onClick={() => signOut()}>
Signout
</button>
</>;
}
return (
<div className="card" id="login-card">
<div className="card-body active">
<h3 className="heading-small card-heading">
{t("home:login-card-title")}
</h3>{" "}
<form onSubmit={handleSubmit(onHandleSubmit)}>
{validLoginID == false && (
<div className="govuk-error-message govuk-form-group--error">
Incorrect username or password
</div>
)}
<Field
// validate={[
// required(
// t("home:casesearch-search-validation-required")
// ),
// minLength(
// t("home:casesearch-search-validation-minlength")
// ),
// ]}
className="govuk-input"
component={RenderTextfield}
id="loginUserID"
name="loginUserID"
type="text"
aria-describedby="basicSearch-hint"
hint1={t("home:login-card-id-label")}
label={t("home:login-card-id-hint")}
/>
<Field
// validate={[
// required(
// t("home:casesearch-search-validation-required")
// ),
// minLength(
// t("home:casesearch-search-validation-minlength")
// ),
// ]}
className="govuk-input"
component={RenderPasswordfield}
id="loginUserPassword"
name="loginUserPassword"
type="password"
label="Password"
/>
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("home:login-card-button")}
<>
<div className="card" id="login-card">
<div className="card-body active">
<h3 className="heading-small card-heading">
{t("home:login-card-title")}
</h3>{" "}
<div className="govuk-form-group govuk-!-margin-top-4">
{" "}
Not Signed in
<br />
<button
className="govuk-button"
type="button"
onClick={() => signIn()}
>
Magic Link Sign in
</button>
</div>
</form>
<div className="govuk-form-group govuk-!-margin-top-4">
<p className="govuk-body-xs">
<a
onClick={() => {
govGatwayLoginRedirect();
}}
className="govuk-button withChevron govuk-button-cta"
>
{t("home:login-via-gov-gateway-label")}
</a>
</p>
<p className="govuk-body-s">
{t("home:login-card-register-label")}{" "}
<a
href={
router.locale == "cy"
? "https://www.ete.access.service.gov.uk/login/create-account?lang=cy"
: "https://www.ete.access.service.gov.uk/login/create-account"
}
className="govuk-link--no-underline"
>
{t("home:login-card-register-link")}
</a>
</p>
<p className="govuk-body-s">
<a
onClick={() => {
govGatwayForgottenLink();
}}
className="govuk-link--no-underline"
>
{t("home:login-card-forgotten-label")}{" "}
</a>
</p>
<hr className="govuk-!-margin-bottom-4" />
<p className="govuk-body-s">
{t("home:login-comingsoon-temp-2")}
</p>
<ul>
<li>
<a
className="govuk-link--no-underline"
target="_blank"
href={t("home:login-comingsoon-forms-link-1")}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-1")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t("home:login-comingsoon-forms-link-2")}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-2")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t("home:login-comingsoon-forms-link-3")}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-3")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t("home:login-comingsoon-forms-link-4")}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-4")}
</a>
</li>
</ul>
<br />
<form onSubmit={handleSubmit(onHandleSubmit)}>
{validLoginID == false && (
<div className="govuk-error-message govuk-form-group--error">
Incorrect username or password
</div>
)}
<Field
// validate={[
// required(
// t("home:casesearch-search-validation-required")
// ),
// minLength(
// t("home:casesearch-search-validation-minlength")
// ),
// ]}
className="govuk-input"
component={RenderTextfield}
id="loginUserID"
name="loginUserID"
type="text"
aria-describedby="basicSearch-hint"
hint1={t("home:login-card-id-label")}
label={t("home:login-card-id-hint")}
/>
<p className="govuk-body-s">
{t("home:login-comingsoon-email-link-label")}{" "}
<a
href={"mailto:" + t("home:login-contact-email")}
className="govuk-link--no-underline"
>
{t("home:login-contact-email")}
</a>
</p>
<Field
// validate={[
// required(
// t("home:casesearch-search-validation-required")
// ),
// minLength(
// t("home:casesearch-search-validation-minlength")
// ),
// ]}
className="govuk-input"
component={RenderPasswordfield}
id="loginUserPassword"
name="loginUserPassword"
type="password"
label="Password"
/>
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("home:login-card-button")}
</button>
</div>
</form>
<div className="govuk-form-group govuk-!-margin-top-4">
<p className="govuk-body-xs">
<a
onClick={() => {
govGatwayLoginRedirect();
}}
className="govuk-button withChevron govuk-button-cta"
>
{t("home:login-via-gov-gateway-label")}
</a>
</p>
<p className="govuk-body-s">
{t("home:login-card-register-label")}{" "}
<a
href={
router.locale == "cy"
? "https://www.ete.access.service.gov.uk/login/create-account?lang=cy"
: "https://www.ete.access.service.gov.uk/login/create-account"
}
className="govuk-link--no-underline"
>
{t("home:login-card-register-link")}
</a>
</p>
<p className="govuk-body-s">
<a
onClick={() => {
govGatwayForgottenLink();
}}
className="govuk-link--no-underline"
>
{t("home:login-card-forgotten-label")}{" "}
</a>
</p>
<hr className="govuk-!-margin-bottom-4" />
<p className="govuk-body-s">
{t("home:login-comingsoon-temp-2")}
</p>
<ul>
<li>
<a
className="govuk-link--no-underline"
target="_blank"
href={t(
"home:login-comingsoon-forms-link-1"
)}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-1")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t(
"home:login-comingsoon-forms-link-2"
)}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-2")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t(
"home:login-comingsoon-forms-link-3"
)}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-3")}
</a>
</li>
<li>
{" "}
<a
className="govuk-link--no-underline"
target="_blank"
href={t(
"home:login-comingsoon-forms-link-4"
)}
rel="noreferrer"
>
{t("home:login-comingsoon-forms-label-4")}
</a>
</li>
</ul>
<br />
<p className="govuk-body-s">
{t("home:login-comingsoon-email-link-label")}{" "}
<a
href={"mailto:" + t("home:login-contact-email")}
className="govuk-link--no-underline"
>
{t("home:login-contact-email")}
</a>
</p>
</div>
</div>
</div>
{/* <LoadingOverlay
{/* <LoadingOverlay
active={showSpinnerState}
spinner
text="Logging in"
/> */}
</div>
</div>
</>
);
};