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

added update password and check/complete patterns for register and personal details

Browse Source
This commit is contained in:
robbond
2021-07-27 15:00:07 +01:00
parent 367ed19a70
commit d55b42a5ab
11 changed files with 1024 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/account/changepassword.js
+56 -68
View File
@@ -1,3 +1,4 @@
import Link from "next/link";
import _ from "lodash"; import _ from "lodash";
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@@ -9,17 +10,6 @@ import {
getFormSubmitErrors, getFormSubmitErrors,
} from "redux-form"; } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux"; import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
Textfield,
DateField,
DateFieldPicker,
YesNofield,
PickList,
MultiLinefield,
NumericField,
ReadOnlyfield,
DecimalField,
} from "../elements";
const RenderTextfield = ({ const RenderTextfield = ({
id, id,
@@ -69,7 +59,14 @@ const RenderTextfield = ({
}; };
const ChangePassword = (props) => { const ChangePassword = (props) => {
const { footerLinks, pages, handleSubmit, value } = props; const {
footerLinks,
pages,
handleSubmit,
value,
setPasswordUpdated,
passwordUpdated,
} = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -78,74 +75,65 @@ const ChangePassword = (props) => {
let errorsobj = {}; let errorsobj = {};
const onHandleSubmit = (values) => { const onHandleSubmit = (values) => {
console.log(values); setPasswordUpdated(true);
}; };
const required = (value) => (value ? undefined : "Is required"); const required = (value) => (value ? undefined : "Is required");
const matchInput = (input, allInputs) => { const passwordsMustMatch = (value, allValues) =>
return input === allInputs.password value !== allValues.newpassword ? "Passwords do not match" : undefined;
? undefined
: "Passwords do not match";
};
const email = (value) => const minLength = (min) => (value) =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) value && value.length < min
? "Invalid email address" ? `Must be at least ${min} characters`
: undefined;
const phoneNumber = (value) =>
value &&
!/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
value
)
? "Invalid phone number"
: undefined; : undefined;
const [hasErrors, setHasErrors] = useState(""); const [hasErrors, setHasErrors] = useState("");
return ( return (
<> <>
{/* {hasErrors == true ? ( {passwordUpdated != true ? (
<ShowErrorHeader <form onSubmit={handleSubmit(onHandleSubmit)}>
hasErrors={hasErrors} <fieldset className="govuk-fieldset">
props={props.props.form} <Field
formXML={formXML} name="newpassword"
/> id="newpassword"
) : ( component={RenderTextfield}
"" type="password"
)} */} className="govuk-input govuk-input--width-20"
<form onSubmit={handleSubmit(onHandleSubmit)}> validate={[required, minLength(6)]}
<fieldset className="govuk-fieldset"> label="New password"
<Field />
name="newpassword" <Field
id="newpassword" name="confirmpassword"
component={RenderTextfield} id="confirmpassword"
type="password" component={RenderTextfield}
className="govuk-input govuk-input--width-20" type="password"
validate={[required]} className="govuk-input govuk-input--width-20"
label="New password" validate={[required, passwordsMustMatch]}
/> label="Confirm new password"
<Field />
name="confirmpassword" </fieldset>
id="confirmpassword"
component={RenderTextfield}
type="password"
className="govuk-input govuk-input--width-20"
validate={[matchInput]}
label="Confirm new password"
/>
</fieldset>
<div className="govuk-button-group"> <div className="govuk-button-group">
<button <button
type="submit" type="submit"
className="govuk-button" className="govuk-button"
data-module="govuk-button" data-module="govuk-button"
> >
Continue Continue
</button> </button>
</div> </div>
</form> </form>
) : (
<>
<p className="govuk-body">
<Link href="/myportal">
<a className="govuk-link">Go to My Portal</a>
</Link>
</p>
</>
)}
</> </>
); );
}; };
components/account/personaldetails.js
+162 -189
View File
@@ -10,18 +10,9 @@ import {
getFormSubmitErrors, getFormSubmitErrors,
} from "redux-form"; } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux"; import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
Textfield,
DateField,
DateFieldPicker,
YesNofield,
PickList,
MultiLinefield,
NumericField,
ReadOnlyfield,
DecimalField,
} from "../elements";
import BuildCheckPersonalDetails from "./personaldetailsCheck"; import BuildCheckPersonalDetails from "./personaldetailsCheck";
import PersonalDetailsComplete from "./personaldetailsComplete";
const RenderTextfield = ({ const RenderTextfield = ({
id, id,
@@ -71,7 +62,12 @@ const RenderTextfield = ({
}; };
const PersonalDetails = (props) => { const PersonalDetails = (props) => {
const { footerLinks, pages, handleSubmit, value } = props; const {
handleSubmit,
value,
setPersonalDetailsComplete,
setAccountUpdatedComplete,
} = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -79,10 +75,6 @@ const PersonalDetails = (props) => {
let errorsobj = {}; let errorsobj = {};
const onHandleSubmit = (values) => {
console.log(values);
};
const required = (value) => (value ? undefined : "Is required"); const required = (value) => (value ? undefined : "Is required");
const email = (value) => const email = (value) =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
@@ -98,178 +90,155 @@ const PersonalDetails = (props) => {
const [hasErrors, setHasErrors] = useState(""); const [hasErrors, setHasErrors] = useState("");
const [personalDetailsComplete, setPersonalDetailsComplete] = const onHandleSubmit = (values) => {
useState(false); setPersonalDetailsComplete(true);
};
return ( return (
<> <>
{/* {hasErrors == true ? ( {props.accountUpdatedComplete != true ? (
<ShowErrorHeader props.personalDetailsComplete == false ? (
hasErrors={hasErrors} <form onSubmit={handleSubmit(onHandleSubmit)}>
props={props.props.form} <fieldset className="govuk-fieldset">
formXML={formXML} <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
/> <h2 className="govuk-fieldset__heading">
) : ( About you
"" </h2>
)} */} </legend>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="First name"
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="Last name"
errorMsg="Is required"
/>
<Field
name="email"
id="email"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label="Email address"
/>
<Field
name="telephone"
id="telephone"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label="Telephone"
/>
{personalDetailsComplete == false ? ( <Field
<form onSubmit={handleSubmit(onHandleSubmit)}> name="companygroup"
<fieldset className="govuk-fieldset"> id="companygroup"
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> component={RenderTextfield}
<h2 className="govuk-fieldset__heading"> type="text"
About you className="govuk-input govuk-input--width-20"
</h2> label="Company/Group"
</legend> errorMsg="Is required"
<Field />
name="firstname" </fieldset>
id="firstname" <fieldset className="govuk-fieldset">
component={RenderTextfield} <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
type="text" <h2 className="govuk-fieldset__heading">
className="govuk-input govuk-input--width-20" What is your address?
validate={[required]} </h2>
label="First name" </legend>
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="Last name"
errorMsg="Is required"
/>
<Field
name="email"
id="email"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label="Email address"
/>
<Field
name="telephone"
id="telephone"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label="Telephone"
/>
<Field <Field
name="companygroup" name="addressline1"
id="companygroup" id="addressline1"
component={RenderTextfield} component={RenderTextfield}
type="text" type="text"
className="govuk-input govuk-input--width-20" className="govuk-input govuk-input--width-20"
label="Company/Group" label="Address line 1"
errorMsg="Is required" validate={[required]}
/> errorMsg="Is required"
</fieldset> />
<fieldset className="govuk-fieldset"> <Field
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> name="addressline2"
<h2 className="govuk-fieldset__heading"> id="addressline2"
What is your address? component={RenderTextfield}
</h2> type="text"
</legend> className="govuk-input govuk-input--width-20"
label="Address line 2"
<Field errorMsg="Is required"
name="addressline1" />
id="addressline1" <Field
component={RenderTextfield} name="towncity"
type="text" id="towncity"
className="govuk-input govuk-input--width-20" component={RenderTextfield}
label="Address line 1" type="text"
validate={[required]} className="govuk-input govuk-input--width-10"
errorMsg="Is required" label="Town/City"
/> validate={[required]}
<Field errorMsg="Is required"
name="addressline2" />
id="addressline2" <Field
component={RenderTextfield} name="county"
type="text" id="county"
className="govuk-input govuk-input--width-20" component={RenderTextfield}
label="Address line 2" type="text"
errorMsg="Is required" className="govuk-input govuk-input--width-10"
/> label="County"
<Field validate={[required]}
name="towncity" errorMsg="Is required"
id="towncity" />
component={RenderTextfield} <Field
type="text" name="postcode"
className="govuk-input govuk-input--width-10" id="postcode"
label="Town/City" component={RenderTextfield}
validate={[required]} type="text"
errorMsg="Is required" className="govuk-input govuk-input--width-5"
/> label="Postcode"
<Field validate={[required]}
name="county" errorMsg="Is required"
id="county" />
component={RenderTextfield} </fieldset>
type="text" <div className="govuk-button-group">
className="govuk-input govuk-input--width-10" <button
label="County" type="submit"
validate={[required]} className="govuk-button"
errorMsg="Is required" data-module="govuk-button"
/>
<Field
name="postcode"
id="postcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label="Postcode"
validate={[required]}
errorMsg="Is required"
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setPersonalDetailsComplete(true);
}}
>
Continue
</button>
</div>
</form>
) : (
<>
<BuildCheckPersonalDetails
props={props}
setPersonalDetailsComplete={setPersonalDetailsComplete}
/>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setPersonalDetailsComplete(false);
}}
>
Continue
</button>
<Link href="">
<a
onClick={() => { onClick={() => {
setPersonalDetailsComplete(false); setPersonalDetailsComplete(true);
}} }}
className="govuk-link"
> >
Go back Continue
</a> </button>
</Link> </div>
</div> </form>
</> ) : (
<>
<BuildCheckPersonalDetails
props={props}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</>
)
) : (
<PersonalDetailsComplete />
)} )}
</> </>
); );
@@ -296,16 +265,20 @@ const mapDispatchToProps = (dispatch) => {
const selector = formValueSelector("personalDetailsForm"); // <-- same as form name const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
export default connect(mapStateToProps, mapDispatchToProps, (state) => ({ export default connect(
initialValues: state.accountDetails.accountDetails.data, mapStateToProps,
search: state.search, mapDispatchToProps
searchResultsObj: state.searchResultsObj, //, (state) => ({
formData: state.formData, // initialValues: state.accountDetails.accountDetails.data,
appealType: state.appealType, // // search: state.search,
accountDetails: state.accountDetails, // searchResultsObj: state.searchResultsObj,
form: state.form, // formData: state.formData,
// appealType: state.appealType,
// accountDetails: state.accountDetails,
// form: state.form,
// pull initial values from account reducer // pull initial values from account reducer
}))( //})
)(
reduxForm({ reduxForm({
form: "personalDetailsForm", form: "personalDetailsForm",
enableReinitialize: true, // this is needed!! enableReinitialize: true, // this is needed!!
components/account/personaldetailsCheck.js
+53 -52
View File
@@ -17,6 +17,7 @@ const BuildCheckPersonalDetails = (props) => {
handleSubmit, handleSubmit,
value, value,
setPersonalDetailsComplete, setPersonalDetailsComplete,
setAccountUpdatedComplete,
} = props; } = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
@@ -30,11 +31,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">First name</dt> <dt className="govuk-summary-list__key">First name</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .firstname
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -54,11 +54,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Last name</dt> <dt className="govuk-summary-list__key">Last name</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .lastname
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -79,11 +78,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Email address</dt> <dt className="govuk-summary-list__key">Email address</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .email
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -104,11 +102,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Telephone</dt> <dt className="govuk-summary-list__key">Telephone</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .telephone
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -128,11 +125,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Company/Group</dt> <dt className="govuk-summary-list__key">Company/Group</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .companygroup
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -157,11 +153,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Address Line 1</dt> <dt className="govuk-summary-list__key">Address Line 1</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .addressline1
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -182,11 +177,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Address line 2</dt> <dt className="govuk-summary-list__key">Address line 2</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .addressline2
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -207,11 +201,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Town/City</dt> <dt className="govuk-summary-list__key">Town/City</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .towncity
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -232,11 +225,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">County</dt> <dt className="govuk-summary-list__key">County</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .county
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -257,11 +249,10 @@ const BuildCheckPersonalDetails = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Postcode</dt> <dt className="govuk-summary-list__key">Postcode</dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{/* {console.log( {
props.props.form["personalDetailsForm"].values[ props.props.props.form.personalDetailsForm.values
"firstname" .postcode
] }
)} */}
</dd> </dd>
<dd className="govuk-summary-list__actions"> <dd className="govuk-summary-list__actions">
<a <a
@@ -280,6 +271,18 @@ const BuildCheckPersonalDetails = (props) => {
</dd> </dd>
</div> </div>
</dl> </dl>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setAccountUpdatedComplete(true);
}}
>
Continue
</button>
</div>
</> </>
); );
}; };
@@ -303,8 +306,6 @@ const mapDispatchToProps = (dispatch) => {
}; };
}; };
const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
components/account/personaldetailsComplete.js
+74
View File
@@ -0,0 +1,74 @@
import _ from "lodash";
import Link from "next/link";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
Field,
reduxForm,
formValueSelector,
getFormSubmitErrors,
} from "redux-form";
import {
useDispatch,
useSelector,
shallowEqual,
connect,
setRegisterFormComplete,
setAccountCreatedComplete,
} from "react-redux";
const PersonalDetailsComplete = (props) => {
const {
handleSubmit,
value,
setRegisterFormComplete,
setAccountCreatedComplete,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<p className="govuk-body">Your details have been updated</p>
<p className="govuk-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a
metus non quam mollis egestas. Integer ac leo cursus, laoreet
nulla sed, tempus tellus. Mauris condimentum erat arcu.
</p>
<p className="govuk-body">
<Link href="/myportal">
<a className="govuk-link">Return to My Portal</a>
</Link>
</p>
</>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
accountDetails: state.accountDetails,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(PersonalDetailsComplete);
components/account/registerCheck.js
+310
View File
@@ -0,0 +1,310 @@
import _ from "lodash";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
Field,
reduxForm,
formValueSelector,
getFormSubmitErrors,
} from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
const RegisterFormCheck = (props) => {
const {
footerLinks,
pages,
handleSubmit,
value,
setRegisterFormComplete,
setAccountCreatedComplete,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<p>Check that the details you entered are correct.</p>
<h2 className="govuk-heading-m">About you</h2>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">First name</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.firstname
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
first name
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Last name</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.lastname
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
last name
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Email address</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.email
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
email address
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Telephone</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.telephone
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
telephone
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Company/Group</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.companygroup
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
company/group
</span>
</a>
</dd>
</div>
</dl>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<h2 className="govuk-heading-m">Your address</h2>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Address Line 1</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline1
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
address line 1
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Address line 2</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline2
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
address line 2
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Town/City</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.towncity
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
town/city
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">County</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.county
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
county
</span>
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Postcode</dt>
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.postcode
}
</dd>
<dd className="govuk-summary-list__actions">
<a
className="govuk-link"
href="#"
onClick={() => {
setRegisterFormComplete(false);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
postcode
</span>
</a>
</dd>
</div>
</dl>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setAccountCreatedComplete(true);
}}
>
Continue
</button>
</div>
</>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
accountDetails: state.accountDetails,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RegisterFormCheck);
components/account/registerComplete.js
+82
View File
@@ -0,0 +1,82 @@
import _ from "lodash";
import Link from "next/link";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
Field,
reduxForm,
formValueSelector,
getFormSubmitErrors,
} from "redux-form";
import {
useDispatch,
useSelector,
shallowEqual,
connect,
setRegisterFormComplete,
setAccountCreatedComplete,
} from "react-redux";
const RegisterComplete = (props) => {
const {
footerLinks,
pages,
handleSubmit,
value,
setRegisterFormComplete,
setAccountCreatedComplete,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<p className="govuk-body">We have sent you a confirmation email.</p>
<h2 className="govuk-heading-m">What happens next</h2>
<p className="govuk-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a
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>
</p>
</>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
accountDetails: state.accountDetails,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RegisterComplete);
components/account/registerform.js
+148 -146
View File
@@ -9,17 +9,9 @@ import {
getFormSubmitErrors, getFormSubmitErrors,
} from "redux-form"; } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux"; import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
Textfield, import RegisterFormCheck from "./registerCheck";
DateField, import RegisterComplete from "./registerComplete";
DateFieldPicker,
YesNofield,
PickList,
MultiLinefield,
NumericField,
ReadOnlyfield,
DecimalField,
} from "../elements";
const RenderTextfield = ({ const RenderTextfield = ({
id, id,
@@ -69,7 +61,12 @@ const RenderTextfield = ({
}; };
const RegisterForm = (props) => { const RegisterForm = (props) => {
const { footerLinks, pages, handleSubmit, value } = props; const {
handleSubmit,
value,
setRegisterFormComplete,
setAccountCreatedComplete,
} = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -77,10 +74,6 @@ const RegisterForm = (props) => {
let errorsobj = {}; let errorsobj = {};
const onHandleSubmit = (values) => {
console.log(values);
};
const required = (value) => (value ? undefined : "Is required"); const required = (value) => (value ? undefined : "Is required");
const email = (value) => const email = (value) =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
@@ -96,139 +89,148 @@ const RegisterForm = (props) => {
const [hasErrors, setHasErrors] = useState(""); const [hasErrors, setHasErrors] = useState("");
const onHandleSubmit = (values) => {
setRegisterFormComplete(true);
};
return ( return (
<> <>
{/* {hasErrors == true ? ( {props.accountCreatedComplete != true ? (
<ShowErrorHeader props.registerFormComplete == false ? (
hasErrors={hasErrors} <form onSubmit={handleSubmit(onHandleSubmit)}>
props={props.props.form} <fieldset className="govuk-fieldset">
formXML={formXML} <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
/> <h2 className="govuk-fieldset__heading">
About you
</h2>
</legend>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="First name"
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="Last name"
errorMsg="Is required"
/>
<Field
name="email"
id="email"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label="Email address"
/>
<Field
name="telephone"
id="telephone"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label="Telephone"
/>
<Field
name="companygroup"
id="companygroup"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Company/Group"
errorMsg="Is required"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
What is your address?
</h2>
</legend>
<Field
name="addressline1"
id="addressline1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Address line 1"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="addressline2"
id="addressline2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Address line 2"
errorMsg="Is required"
/>
<Field
name="towncity"
id="towncity"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label="Town/City"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="county"
id="county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label="County"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="postcode"
id="postcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label="Postcode"
validate={[required]}
errorMsg="Is required"
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
</div>
</form>
) : (
<RegisterFormCheck
props={props}
setRegisterFormComplete={setRegisterFormComplete}
setAccountCreatedComplete={setAccountCreatedComplete}
/>
)
) : ( ) : (
"" <RegisterComplete />
)} */} )}
<form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">About you</h2>
</legend>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="First name"
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label="Last name"
errorMsg="Is required"
/>
<Field
name="email"
id="email"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label="Email address"
/>
<Field
name="telephone"
id="telephone"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label="Telephone"
/>
<Field
name="companygroup"
id="companygroup"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Company/Group"
errorMsg="Is required"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
What is your address?
</h2>
</legend>
<Field
name="addressline1"
id="addressline1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Address line 1"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="addressline2"
id="addressline2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label="Address line 2"
errorMsg="Is required"
/>
<Field
name="towncity"
id="towncity"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label="Town/City"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="county"
id="county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label="County"
validate={[required]}
errorMsg="Is required"
/>
<Field
name="postcode"
id="postcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label="Postcode"
validate={[required]}
errorMsg="Is required"
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
</div>
</form>
</> </>
); );
}; };
components/breadcrumbs.js
+9
View File
@@ -182,6 +182,15 @@ const Breadcrumbs = (props) => {
) : ( ) : (
"" ""
)} )}
{router.pathname == "/account/register" ? (
<>
<li className="govuk-breadcrumbs__list-item">
Register your account
</li>
</>
) : (
""
)}
{router.pathname == "/account/changepassword" ? ( {router.pathname == "/account/changepassword" ? (
<> <>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
pages/account/changepassword.js
+15 -2
View File
@@ -37,6 +37,7 @@ const Home = (props) => {
const { appealtypes } = router.query; const { appealtypes } = router.query;
const { appealType, LPAData } = props; const { appealType, LPAData } = props;
const [passwordUpdated, setPasswordUpdated] = useState(false);
return ( return (
<div> <div>
@@ -61,8 +62,20 @@ const Home = (props) => {
> >
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds">
<h1>Change password</h1> {passwordUpdated == true ? (
<ChangePassword props={props} /> <h1>
Your password has been changed
</h1>
) : (
<h1>Change password</h1>
)}
<ChangePassword
props={props}
setPasswordUpdated={
setPasswordUpdated
}
passwordUpdated={passwordUpdated}
/>
</div> </div>
</div> </div>
</main> </main>
pages/account/personaldetails.js
+26 -12
View File
@@ -17,10 +17,8 @@ import jsonpath from "jsonpath";
import { reduxForm, formValueSelector } from "redux-form"; import { reduxForm, formValueSelector } from "redux-form";
import PersonalDetails from "../../components/account/personaldetails"; import PersonalDetails from "../../components/account/personaldetails";
import xpath from "xpath";
import { setAccountDetails } from "../../store/accountDetails/action"; import { setAccountDetails } from "../../store/accountDetails/action";
import { getPersonalAccount } from "../../actions"; import { getPersonalAccount } from "../../actions";
import { setLPA } from "../../store/lpa/action";
const Home = (props) => { const Home = (props) => {
const { footerLinks, formData } = props; const { footerLinks, formData } = props;
@@ -30,7 +28,9 @@ const Home = (props) => {
const { locale } = router; const { locale } = router;
const { appealtypes } = router.query; const { appealtypes } = router.query;
const { appealType, LPAData } = props; const [personalDetailsComplete, setPersonalDetailsComplete] =
useState(false);
const [accountUpdatedComplete, setAccountUpdatedComplete] = useState(false);
return ( return (
<div> <div>
@@ -56,7 +56,21 @@ const Home = (props) => {
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds">
<h1>Your account</h1> <h1>Your account</h1>
<PersonalDetails props={props} /> <PersonalDetails
props={props}
accountUpdatedComplete={
accountUpdatedComplete
}
personalDetailsComplete={
personalDetailsComplete
}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</div> </div>
</div> </div>
</main> </main>
@@ -70,14 +84,14 @@ const Home = (props) => {
); );
}; };
export const getServerSideProps = wrapper.getServerSideProps( // export const getServerSideProps = wrapper.getServerSideProps(
(store) => // (store) =>
async ({ query, req, res }) => { // async ({ query, req, res }) => {
const accountDetails = await getPersonalAccount(); // const accountDetails = await getPersonalAccount();
console.log("perosnal: ", accountDetails); // console.log("perosnal: ", accountDetails);
store.dispatch(setAccountDetails(accountDetails)); // store.dispatch(setAccountDetails(accountDetails));
} // }
); // );
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
pages/account/register.js
+89 -69
View File
@@ -17,26 +17,17 @@ import jsonpath from "jsonpath";
import { reduxForm, formValueSelector } from "redux-form"; import { reduxForm, formValueSelector } from "redux-form";
import RegisterForm from "../../components/account/registerform"; import RegisterForm from "../../components/account/registerform";
import xpath from "xpath";
import {
setAppealType,
setAppealTypeTitle,
setAppealTypeID,
setAppealLPA,
getAppealTypeObj,
} from "../../store/appealType/action";
import { getAppealsTypes, getLPA } from "../../actions";
import { setLPA } from "../../store/lpa/action";
const Home = (props) => { const Home = (props) => {
const { footerLinks, pages, formData } = props; const { footerLinks, formData } = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const { appealtypes } = router.query; const { appealtypes } = router.query;
const { appealType, LPAData } = props; const [registerFormComplete, setRegisterFormComplete] = useState(false);
const [accountCreatedComplete, setAccountCreatedComplete] = useState(false);
return ( return (
<div> <div>
@@ -61,59 +52,87 @@ const Home = (props) => {
> >
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds">
<h1>Create a new account</h1> {registerFormComplete != true ||
<RegisterForm props={props} /> accountCreatedComplete != true ? (
<h1>Create a new account</h1>
) : (
<h1>
Your account has been created
</h1>
)}
<RegisterForm
props={props}
accountCreatedComplete={
accountCreatedComplete
}
registerFormComplete={
registerFormComplete
}
setRegisterFormComplete={
setRegisterFormComplete
}
setAccountCreatedComplete={
setAccountCreatedComplete
}
/>
</div> </div>
{registerFormComplete != true ||
accountCreatedComplete != true ? (
<div className="govuk-grid-column-one-third">
<h2 className="govuk-heading-m">
Help
</h2>
<div className="govuk-grid-column-one-third"> <h3>
<h2 className="govuk-heading-m"> Companies or submissions by more
Help than one individual (groups)
</h2> </h3>
<h3> <p className="govuk-body">
Companies or submissions by more If you are submitting an appeal
than one individual (groups) or representation from a company
</h3> e.g. &quot;Acme Inc&quot; or a
group of people e.g.
&quot;Residents of 1-10 High
street&quot;, you should enter
the name of the company or group
in the Company/Group field. You
will be deemed as acting as
their representative.
</p>
<p className="govuk-body"> <h3>
If you are submitting an appeal or Enforcement appeals by
representation from a company e.g. married/civil partnership
&quot;Acme Inc&quot; or a group of couples
people e.g. &quot;Residents of 1-10 </h3>
High street&quot;, you should enter
the name of the company or group in
the Company/Group field. You will be
deemed as acting as their
representative.
</p>
<h3> <p className="govuk-body">
Enforcement appeals by married/civil You should not enter a group
partnership couples name. You need only enter your
</h3> partner&apos;s name on the
appeal form itself as an
additional appellant.
</p>
<p className="govuk-body"> <h3>
You should not enter a group name. Other appeals by married/civil
You need only enter your partnership couples
partner&apos;s name on the appeal </h3>
form itself as an additional
appellant.
</p>
<h3> <p className="govuk-body">
Other appeals by married/civil For any other type of appeal,
partnership couples for example a planning appeal,
</h3> you should enter a group name
when creating your account e.g.
<p className="govuk-body"> &quot;Mr and Mrs Smith&quot;, if
For any other type of appeal, for that is the name on the
example a planning appeal, you application.
should enter a group name when </p>
creating your account e.g. &quot;Mr </div>
and Mrs Smith&quot;, if that is the ) : (
name on the application. ""
</p> )}
</div>
</div> </div>
</main> </main>
</div> </div>
@@ -126,17 +145,17 @@ const Home = (props) => {
); );
}; };
export const getServerSideProps = wrapper.getServerSideProps( // export const getServerSideProps = wrapper.getServerSideProps(
(store) => // (store) =>
async ({ query, req, res }) => { // async ({ query, req, res }) => {
const appealTypeData = await getAppealsTypes(); // const appealTypeData = await getAppealsTypes();
const lpaData = await getLPA(); // const lpaData = await getLPA();
console.log("appeal types", appealTypeData); // console.log("appeal types", appealTypeData);
console.log("lpa typeswwwww", lpaData); // console.log("lpa typeswwwww", lpaData);
store.dispatch(setAppealType(appealTypeData)); // store.dispatch(setAppealType(appealTypeData));
store.dispatch(setLPA(lpaData)); // store.dispatch(setLPA(lpaData));
} // }
); // );
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
@@ -146,6 +165,7 @@ const mapStateToProps = (state) => {
appealType: state.appealType, appealType: state.appealType,
LPAData: state.LPAData, LPAData: state.LPAData,
form: state.form, form: state.form,
accountDetails: state.accountDetails,
}; };
}; };