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
+27 -39
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,42 +75,24 @@ 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
hasErrors={hasErrors}
props={props.props.form}
formXML={formXML}
/>
) : (
""
)} */}
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset"> <fieldset className="govuk-fieldset">
<Field <Field
@@ -122,7 +101,7 @@ const ChangePassword = (props) => {
component={RenderTextfield} component={RenderTextfield}
type="password" type="password"
className="govuk-input govuk-input--width-20" className="govuk-input govuk-input--width-20"
validate={[required]} validate={[required, minLength(6)]}
label="New password" label="New password"
/> />
<Field <Field
@@ -131,7 +110,7 @@ const ChangePassword = (props) => {
component={RenderTextfield} component={RenderTextfield}
type="password" type="password"
className="govuk-input govuk-input--width-20" className="govuk-input govuk-input--width-20"
validate={[matchInput]} validate={[required, passwordsMustMatch]}
label="Confirm new password" label="Confirm new password"
/> />
</fieldset> </fieldset>
@@ -146,6 +125,15 @@ const ChangePassword = (props) => {
</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
+35 -62
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,22 +90,14 @@ 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}
props={props.props.form}
formXML={formXML}
/>
) : (
""
)} */}
{personalDetailsComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset"> <fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -244,32 +228,17 @@ const PersonalDetails = (props) => {
<> <>
<BuildCheckPersonalDetails <BuildCheckPersonalDetails
props={props} props={props}
setPersonalDetailsComplete={setPersonalDetailsComplete} setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/> />
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setPersonalDetailsComplete(false);
}}
>
Continue
</button>
<Link href="">
<a
onClick={() => {
setPersonalDetailsComplete(false);
}}
className="govuk-link"
>
Go back
</a>
</Link>
</div>
</> </>
)
) : (
<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
+28 -26
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,21 +89,20 @@ 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}
props={props.props.form}
formXML={formXML}
/>
) : (
""
)} */}
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset"> <fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">About you</h2> <h2 className="govuk-fieldset__heading">
About you
</h2>
</legend> </legend>
<Field <Field
name="firstname" name="firstname"
@@ -229,6 +221,16 @@ const RegisterForm = (props) => {
</button> </button>
</div> </div>
</form> </form>
) : (
<RegisterFormCheck
props={props}
setRegisterFormComplete={setRegisterFormComplete}
setAccountCreatedComplete={setAccountCreatedComplete}
/>
)
) : (
<RegisterComplete />
)}
</> </>
); );
}; };
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
+14 -1
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">
{passwordUpdated == true ? (
<h1>
Your password has been changed
</h1>
) : (
<h1>Change password</h1> <h1>Change password</h1>
<ChangePassword props={props} /> )}
<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
+67 -47
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,10 +52,32 @@ 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">
{registerFormComplete != true ||
accountCreatedComplete != true ? (
<h1>Create a new account</h1> <h1>Create a new account</h1>
<RegisterForm props={props} /> ) : (
<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"> <div className="govuk-grid-column-one-third">
<h2 className="govuk-heading-m"> <h2 className="govuk-heading-m">
Help Help
@@ -76,28 +89,30 @@ const Home = (props) => {
</h3> </h3>
<p className="govuk-body"> <p className="govuk-body">
If you are submitting an appeal or If you are submitting an appeal
representation from a company e.g. or representation from a company
&quot;Acme Inc&quot; or a group of e.g. &quot;Acme Inc&quot; or a
people e.g. &quot;Residents of 1-10 group of people e.g.
High street&quot;, you should enter &quot;Residents of 1-10 High
the name of the company or group in street&quot;, you should enter
the Company/Group field. You will be the name of the company or group
deemed as acting as their in the Company/Group field. You
representative. will be deemed as acting as
their representative.
</p> </p>
<h3> <h3>
Enforcement appeals by married/civil Enforcement appeals by
partnership couples married/civil partnership
couples
</h3> </h3>
<p className="govuk-body"> <p className="govuk-body">
You should not enter a group name. You should not enter a group
You need only enter your name. You need only enter your
partner&apos;s name on the appeal partner&apos;s name on the
form itself as an additional appeal form itself as an
appellant. additional appellant.
</p> </p>
<h3> <h3>
@@ -106,14 +121,18 @@ const Home = (props) => {
</h3> </h3>
<p className="govuk-body"> <p className="govuk-body">
For any other type of appeal, for For any other type of appeal,
example a planning appeal, you for example a planning appeal,
should enter a group name when you should enter a group name
creating your account e.g. &quot;Mr when creating your account e.g.
and Mrs Smith&quot;, if that is the &quot;Mr and Mrs Smith&quot;, if
name on the application. that is the name on the
application.
</p> </p>
</div> </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,
}; };
}; };