added create contact flow for registration

This commit is contained in:
2021-10-13 07:40:36 +01:00
parent 7238a79895
commit b34c56145d
22 changed files with 663 additions and 307 deletions
+15 -10
View File
@@ -9,6 +9,7 @@ import {
getFormSubmitErrors,
} from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setAccCr } from "../../store/accountDetails/action";
const RegisterFormCheck = (props) => {
const {
@@ -18,6 +19,7 @@ const RegisterFormCheck = (props) => {
value,
setRegisterFormComplete,
setAccountCreatedComplete,
setAccCr,
} = props;
let { t, lang } = useTranslation();
@@ -70,7 +72,6 @@ const RegisterFormCheck = (props) => {
>
Change
<span className="govuk-visually-hidden">
{" "}
last name
</span>
</a>
@@ -81,7 +82,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.email
.emailaddress1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -105,7 +106,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.telephone
.telephone1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -123,7 +124,7 @@ const RegisterFormCheck = (props) => {
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
{/* <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Company/Group</dt>
<dd className="govuk-summary-list__value">
{
@@ -146,7 +147,7 @@ const RegisterFormCheck = (props) => {
</span>
</a>
</dd>
</div>
</div> */}
</dl>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<h2 className="govuk-heading-m">Your address</h2>
@@ -156,7 +157,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline1
.address1_line1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -180,7 +181,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline2
.address1_line2
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -204,7 +205,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.towncity
.address1_city
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -228,7 +229,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.county
.address1_county
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -252,7 +253,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.postcode
.address1_postalcode
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -278,6 +279,7 @@ const RegisterFormCheck = (props) => {
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setAccCr(false);
setAccountCreatedComplete(true);
}}
>
@@ -304,6 +306,9 @@ const mapDispatchToProps = (dispatch) => {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
setAccCr: (accState) => {
dispatch(setAccCr(accState));
},
};
};
+77 -14
View File
@@ -1,8 +1,10 @@
import _ from "lodash";
import Link from "next/link";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import {
Field,
reduxForm,
@@ -18,6 +20,10 @@ import {
setAccountCreatedComplete,
} from "react-redux";
import { setAccCr, setLogout } from "../../store/accountDetails/action";
import { getEmailAccountCheck, createAccount } from "../../actions";
const RegisterComplete = (props) => {
const {
footerLinks,
@@ -26,13 +32,50 @@ const RegisterComplete = (props) => {
value,
setRegisterFormComplete,
setAccountCreatedComplete,
setAccCr,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
const [accountCreated, setAccountCreated] = useState(false);
useEffect(() => {
let accountBody = props.props.props.form.accountRegisterForm.values;
let emailAddress =
props.props.props.form.accountRegisterForm.values.emailaddress1;
Object.assign(accountBody, {
"pinswg_typeofinvolvement": 846040001,
});
accountBody = _.omit(accountBody, ["custom_password_check"]);
let checkEmailObj = {};
switch (props.accountDetails.accCr) {
case "created":
case "exists":
break;
default:
let emailExists = getEmailAccountCheck(
accountBody.emailaddress1
).then((data) => {
data["@odata.count"] > 0
? setAccCr("exists")
: (checkEmailObj = createAccount(accountBody).then(
(data) => {
//console.log(data);
setAccCr("created");
}
));
});
break;
}
});
return props.accountDetails.accCr == "created" ? (
<>
<p className="govuk-body">We have sent you a confirmation email.</p>
@@ -43,18 +86,35 @@ const RegisterComplete = (props) => {
metus non quam mollis egestas. Integer ac leo cursus, laoreet
nulla sed, tempus tellus. Mauris condimentum erat arcu.
</p>
<p className="govuk-body">
Sed imperdiet dignissim ipsum. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. In id leo
in turpis aliquam venenatis ut non erat. Ut est arcu, luctus sit
amet pretium sed, iaculis non purus. Etiam dictum tortor commodo
luctus rhoncus.
</p>
<p className="govuk-body">
<Link href="/">
<a className="govuk-link">Login to My Portal</a>
</Link>
<a
href="/"
className="govuk-link"
onClick={() => {
setLogout(), window.localStorage.clear();
}}
>
Login to My Portal
</a>
</p>
</>
) : (
<>
<h2 className="govuk-heading-m">
Please try again with a different email address
</h2>
<p className="govuk-body">
<a
onClick={() => {
setRegisterFormComplete(false),
setAccountCreatedComplete(false),
setAccCr("false");
}}
className="govuk-link"
>
Try registering again
</a>
</p>
</>
);
@@ -73,8 +133,11 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
setAccCr: (accountCreated) => {
dispatch(setAccCr(accountCreated));
},
setLogout: () => {
dispatch(setLogout());
},
};
};
+50 -19
View File
@@ -87,9 +87,21 @@ const RegisterForm = (props) => {
? "Invalid phone number"
: undefined;
const passwordsMatch = (value, allValues) =>
value !== allValues.pinswg_custom_password
? "Passwords don't match"
: undefined;
const minLength = (min) => (value) =>
value && value.length < min
? `Must be ${min} characters or more`
: undefined;
const minLength5 = minLength(5);
const [hasErrors, setHasErrors] = useState("");
const onHandleSubmit = (values) => {
//console.log(values);
setRegisterFormComplete(true);
};
@@ -125,8 +137,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="email"
id="email"
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
@@ -134,8 +146,8 @@ const RegisterForm = (props) => {
label="Email address"
/>
<Field
name="telephone"
id="telephone"
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
@@ -144,14 +156,29 @@ const RegisterForm = (props) => {
/>
<Field
name="companygroup"
id="companygroup"
name="pinswg_custom_password"
id="pinswg_custom_password"
component={RenderTextfield}
type="text"
type="password"
className="govuk-input govuk-input--width-20"
label="Company/Group"
label="Password"
validate={[required, minLength5]}
errorMsg="Is required"
/>
<Field
name="custom_password_check"
id="custom_password_check"
component={RenderTextfield}
type="password"
className="govuk-input govuk-input--width-20"
label="Confirm password"
validate={[
required,
passwordsMatch,
minLength5,
]}
errorMsg="Passwords do not match"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -161,8 +188,8 @@ const RegisterForm = (props) => {
</legend>
<Field
name="addressline1"
id="addressline1"
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
@@ -171,8 +198,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="addressline2"
id="addressline2"
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
@@ -180,8 +207,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="towncity"
id="towncity"
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
@@ -190,8 +217,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="county"
id="county"
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
@@ -200,8 +227,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="postcode"
id="postcode"
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
@@ -229,7 +256,11 @@ const RegisterForm = (props) => {
/>
)
) : (
<RegisterComplete />
<RegisterComplete
props={props}
setRegisterFormComplete={setRegisterFormComplete}
setAccountCreatedComplete={setAccountCreatedComplete}
/>
)}
</>
);
+9 -10
View File
@@ -27,6 +27,7 @@ const Header = (props) => {
"/dnsapplications",
"/dnsdetails",
"/404",
"/account/register",
];
const hasContactLink = [
"/dns",
@@ -112,22 +113,20 @@ const Header = (props) => {
""
) : (
<li>
<Link
<a
href={
router.locale == "cy"
? "/allgofnodi"
: "/logout"
}
>
<a
onClick={() => {
onClick={() => {
setLogout(),
window.localStorage.clear();
}}
className="govuk-header__link "
>
{t("common:signout-label")}
</a>
</Link>
}}
className="govuk-header__link "
>
{t("common:signout-label")}
</a>
</li>
)}
+229 -67
View File
@@ -1,66 +1,187 @@
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import LoadingOverlay from "react-loading-overlay";
import { getLogin } from "../../actions";
import { setLoggedInUserId } from "../../store/accountDetails/action";
import Cookies from "cookies";
export default function Login() {
const required = (errorMsg) => (value) =>
value || typeof value === "number" ? undefined : errorMsg;
export const minLength = (errorMsg) => (value) =>
value && value.length < 4
? errorMsg //`Must be ${min} characters or more`
: undefined;
const RenderTextfield = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
hint1,
hint2,
meta: { touched, error },
...custom
}) => {
return (
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<div id="basicSearch-hint" className="govuk-hint ">
<span className="govuk-body-m">{hint1}</span>
<br />
<span className="govuk-body-s">{hint2}</span>
</div>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
{label}
</label>
{touched && error && (
<span id={id + "-error"} className="govuk-error-message">
<span className="govuk-visually-hidden">Error:</span>{" "}
{error}
</span>
)}
<input {...input} className={className} name={name} id={id} />
</div>
</>
);
};
const RenderPasswordfield = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
hint1,
hint2,
meta: { touched, error },
...custom
}) => {
return (
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<div id="basicSearch-hint" className="govuk-hint ">
<span className="govuk-body-m">{hint1}</span>
</div>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
{label}
</label>
{touched && error && (
<span id={id + "-error"} className="govuk-error-message">
<span className="govuk-visually-hidden">Error:</span>{" "}
{error}
</span>
)}
<input
{...input}
type="password"
className={className}
name={name}
id={id}
/>
</div>
</>
);
};
let Login = (props) => {
let { t } = useTranslation();
const { handleSubmit, pristine, reset, submitting, setLoggedInUserId } =
props;
const router = useRouter();
const { locale } = router;
const [showSpinnerState, setShowSpinnerState] = useState(false);
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const onHandleSubmit = (values) => {
spinnerState();
getLogin(values.loginUserID, values.loginUserPassword).then((data) => {
setLoggedInUserId(data.value[0].contactid);
spinnerState();
router.replace({
pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
query: { q: data.value[0].contactid },
shallow: true,
});
});
};
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)}>
<div className="card-body active">
<h3 className="heading-small card-heading">
{t("home:login-card-title")}
</h3>
<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")}
hint2={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"
/>
<form action="/myportal" method="POST" id="loginForm">
<div className="govuk-form-group">
{" "}
<label
htmlFor="user_id"
className="govuk-label"
aria-describedby="user_id-hint"
>
{t("home:login-card-id-label")}
</label>
<div className="govuk-hint" id="user_id-hint">
{t("home:login-card-id-hint")}
</div>
<input
type="text"
name="user_id"
id="user_id"
className="govuk-input govuk-!-width-one-half"
maxLength="22"
aria-describedby="user_id-hint"
autoComplete="username"
/>
</div>
<div className="govuk-form-group">
{" "}
<label htmlFor="password" className="govuk-label">
{t("home:login-card-password-label")}
</label>
<input
type="password"
name="password"
id="password"
className="govuk-input govuk-!-width-three-quarters"
autoComplete="current-password"
/>
</div>
<div className="govuk-form-group">
{/* <button
type="submit"
className="govuk-button"
data-module="govuk-button"
id="continue"
formnovalidate=""
>
{t("home:login-card-button")}
</button> */}
<Link
{/* <Link
href={
router.locale == "cy"
? "/fymhorth"
@@ -70,23 +191,64 @@ export default function Login() {
<a className="govuk-button">
{t("home:login-card-button")}
</a>
</Link>
</Link> */}
<button type="submit" className="govuk-button">
{t("home:login-card-button")}
</button>
</div>
<div className="govuk-form-group govuk-!-margin-top-4">
<p className="govuk-body-s">
{t("home:login-card-register-label")}{" "}
<Link href="/account/register">
<a>{t("home:login-card-register-link")}</a>
</Link>
</p>
<p className="govuk-body-s">
<Link href="/">
<a>{t("home:login-card-forgotten-label")} </a>
</Link>
</p>
</div>
</form>
<div className="govuk-form-group govuk-!-margin-top-4">
<p className="govuk-body-s">
{t("home:login-card-register-label")}{" "}
<Link href="/account/register">
<a>{t("home:login-card-register-link")}</a>
</Link>
</p>
<p className="govuk-body-s">
<Link href="/">
<a>{t("home:login-card-forgotten-label")} </a>
</Link>
</p>
</div>
</div>
</form>
<LoadingOverlay
active={showSpinnerState}
spinner
text="Logging in"
/>
</div>
);
}
};
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
//form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setLoggedInUserId: (userID) => {
dispatch(setLoggedInUserId(userID));
},
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "loginForm",
destroyOnUnmount: false,
})(Login)
);
+8 -5
View File
@@ -1,19 +1,20 @@
import Head from "next/head";
import Banner from "../components/banner";
import Footer from "../components/footer";
import Header from "../components/header";
import useTranslation from "next-translate/useTranslation";
export default function SkipLink(props) {
let { t } = useTranslation();
return (
<div>
<Head>
<title>Appeals Casework Portal</title>
<title>{t("common:service-name")}</title>
</Head>
<div className="">
<Header courseName="Planning Casework Portal" />
<div className="govuk-width-container">
<Banner />
<main
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
id="main-content"
@@ -23,10 +24,12 @@ export default function SkipLink(props) {
<div className="govuk-grid-column-two-thirds">
<noscript>
<h1 className="govuk-heading-l">
Please enable javascript
{t("common:enable-js-label")}
</h1>
</noscript>
<h1 className="govuk-heading-m">Loading...</h1>
<h1 className="govuk-heading-m">
{t("common:loading-label")}...
</h1>
</div>
</div>
</main>
+1 -1
View File
@@ -19,7 +19,7 @@ export default function YourAccount() {
<div>
<Link href="/account/personaldetails">
<a className="govuk-button-secondary">
Edit your account details
View your account details
</a>
</Link>
</div>
+1
View File
@@ -55,6 +55,7 @@ const SearchResults = (props) => {
return (
<div className="govuk-summary-list__row" key={key}>
<dd className="govuk-summary-list__value govuk-!-font-size-16 ">
{router.pathname.indexOf("myportal")}
<Link
href={
router.locale == "cy"