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

components/account/changepassword.js

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useRouter } from "next/router";
@@ -9,17 +10,6 @@ import {
     getFormSubmitErrors,
 } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
-import {
-    Textfield,
-    DateField,
-    DateFieldPicker,
-    YesNofield,
-    PickList,
-    MultiLinefield,
-    NumericField,
-    ReadOnlyfield,
-    DecimalField,
-} from "../elements";
 
 const RenderTextfield = ({
     id,
@@ -69,7 +59,14 @@ const RenderTextfield = ({
 };
 
 const ChangePassword = (props) => {
-    const { footerLinks, pages, handleSubmit, value } = props;
+    const {
+        footerLinks,
+        pages,
+        handleSubmit,
+        value,
+        setPasswordUpdated,
+        passwordUpdated,
+    } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -78,74 +75,65 @@ const ChangePassword = (props) => {
     let errorsobj = {};
 
     const onHandleSubmit = (values) => {
-        console.log(values);
+        setPasswordUpdated(true);
     };
 
     const required = (value) => (value ? undefined : "Is required");
 
-    const matchInput = (input, allInputs) => {
-        return input === allInputs.password
-            ? undefined
-            : "Passwords do not match";
-    };
+    const passwordsMustMatch = (value, allValues) =>
+        value !== allValues.newpassword ? "Passwords do not match" : undefined;
 
-    const email = (value) =>
-        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
-            ? "Invalid email address"
-            : 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"
+    const minLength = (min) => (value) =>
+        value && value.length < min
+            ? `Must be at least ${min} characters`
             : undefined;
 
     const [hasErrors, setHasErrors] = useState("");
 
     return (
         <>
-            {/* {hasErrors == true ? (
-                <ShowErrorHeader
-                    hasErrors={hasErrors}
-                    props={props.props.form}
-                    formXML={formXML}
-                />
-            ) : (
-                ""
-            )} */}
-            <form onSubmit={handleSubmit(onHandleSubmit)}>
-                <fieldset className="govuk-fieldset">
-                    <Field
-                        name="newpassword"
-                        id="newpassword"
-                        component={RenderTextfield}
-                        type="password"
-                        className="govuk-input govuk-input--width-20"
-                        validate={[required]}
-                        label="New password"
-                    />
-                    <Field
-                        name="confirmpassword"
-                        id="confirmpassword"
-                        component={RenderTextfield}
-                        type="password"
-                        className="govuk-input govuk-input--width-20"
-                        validate={[matchInput]}
-                        label="Confirm new password"
-                    />
-                </fieldset>
+            {passwordUpdated != true ? (
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <fieldset className="govuk-fieldset">
+                        <Field
+                            name="newpassword"
+                            id="newpassword"
+                            component={RenderTextfield}
+                            type="password"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required, minLength(6)]}
+                            label="New password"
+                        />
+                        <Field
+                            name="confirmpassword"
+                            id="confirmpassword"
+                            component={RenderTextfield}
+                            type="password"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required, passwordsMustMatch]}
+                            label="Confirm new password"
+                        />
+                    </fieldset>
 
-                <div className="govuk-button-group">
-                    <button
-                        type="submit"
-                        className="govuk-button"
-                        data-module="govuk-button"
-                    >
-                        Continue
-                    </button>
-                </div>
-            </form>
+                    <div className="govuk-button-group">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                        >
+                            Continue
+                        </button>
+                    </div>
+                </form>
+            ) : (
+                <>
+                    <p className="govuk-body">
+                        <Link href="/myportal">
+                            <a className="govuk-link">Go to My Portal</a>
+                        </Link>
+                    </p>
+                </>
+            )}
         </>
     );
 };