update change pw

src/apis/eduidSecurity.ts

@@ -174,14 +174,13 @@ export const fetchSuggestedPassword = createAsyncThunk<
   undefined,
   { dispatch: EduIDAppDispatch; state: EduIDAppRootState }
 >("chpass/fetchSuggestedPassword", async (args, thunkAPI) => {
-  return makeSecurityRequest<SuggestedPasswordResponse>(thunkAPI, "suggested-password")
+  return makeSecurityRequest<SuggestedPasswordResponse>(thunkAPI, "change-password/suggested-password")
     .then((response) => response.payload.suggested_password)
     .catch((err) => thunkAPI.rejectWithValue(err));
 });
 
 /*********************************************************************************************************************/
 export interface ChangePasswordPayload {
-  old_password: string;
   new_password: string;
 }
 
@@ -199,7 +198,7 @@ export const changePassword = createAsyncThunk<
   ChangePasswordPayload,
   { dispatch: EduIDAppDispatch; state: EduIDAppRootState }
 >("chpass/changePassword", async (args, thunkAPI) => {
-  return makeSecurityRequest<ChangePasswordResponse>(thunkAPI, "change-password", args)
+  return makeSecurityRequest<ChangePasswordResponse>(thunkAPI, "change-password/set-password", args)
     .then((response) => response.payload)
     .catch((err) => thunkAPI.rejectWithValue(err));
 });

src/components/Common/ConfirmUserInfo.tsx

@@ -0,0 +1,49 @@
+import { idUserEmail, idUserPassword } from "components/Signup/SignupUserCreated";
+import { FormattedMessage } from "react-intl";
+
+interface EmailProps {
+  email?: string;
+}
+
+interface ConfirmUserInfoProps {
+  readonly email_address: string;
+  readonly new_password: string;
+}
+
+export const EmailFieldset = ({ email }: EmailProps): JSX.Element => {
+  return (
+    <fieldset>
+      <label htmlFor={idUserEmail}>
+        <FormattedMessage defaultMessage="Email address" description="Email label" />
+      </label>
+      <div className="display-data">
+        <output id={idUserEmail}>{email}</output>
+      </div>
+    </fieldset>
+  );
+};
+
+export function ConfirmUserInfo(props: ConfirmUserInfoProps) {
+  return (
+    <div id="email-display">
+      <EmailFieldset email={props.email_address} />
+      <fieldset>
+        <label htmlFor={idUserPassword}>
+          <FormattedMessage defaultMessage="Password" description="Password label" />
+        </label>
+        <div className="display-data">
+          <mark className="force-select-all">
+            <output id={idUserPassword}>{props.new_password}</output>
+          </mark>
+        </div>
+        <input
+          autoComplete="new-password"
+          type="password"
+          name="display-none-new-password"
+          id="display-none-new-password"
+          defaultValue={props.new_password ? props.new_password : ""}
+        />
+      </fieldset>
+    </div>
+  );
+}

src/components/Common/CustomInput.tsx

@@ -2,6 +2,8 @@ import { FieldRenderProps } from "react-final-form";
 import { Input } from "reactstrap";
 import { InputWrapper } from "./InputWrapper";
 
+type InputType = "text" | "password" | "email";
+
 export default function CustomInput(props: FieldRenderProps<string>): JSX.Element {
   // the InputWrapper renders it's children plus a label, helpBlock and any error message from the field validation
   return (
@@ -16,7 +18,7 @@ const InputElement = (props: FieldRenderProps<string>): JSX.Element => {
     <Input
       {...props.input}
       id={props.input.name}
-      type={props.type}
+      type={props.input.type as InputType}
       placeholder={props.placeholder}
       aria-required={props.input.required}
       valid={props.meta.valid}

src/components/Common/InputWrapper.tsx

@@ -40,8 +40,9 @@ function RenderLabelAndHelpText(props: InputWrapperProps): JSX.Element {
 function RenderErrorMessage(props: InputWrapperProps): JSX.Element | null {
   const intl = useIntl();
   const { meta } = props;
-  if ((!meta.error && !meta.submitError) || (!meta.touched && !meta.dirty)) {
-    // no error, no message
+
+  if ((!meta.error && !meta.submitError && !props.passwordStrengthMeter) || (!meta.touched && !meta.dirty)) {
+    // no error, no message only for !props.passwordStrengthMeter
     return null;
   }
 
@@ -56,6 +57,7 @@ function RenderErrorMessage(props: InputWrapperProps): JSX.Element | null {
       <span role="alert" aria-invalid="true" tabIndex={0} className="input-validate-error">
         {errorMsg || submitErrorMsg}
       </span>
+      {props.passwordStrengthMeter ? props.passwordStrengthMeter : null}
     </FormText>
   );
 }

src/components/Common/NewPasswordForm.tsx

@@ -2,7 +2,6 @@ import { ExtraSecurityAlternatives } from "apis/eduidResetPassword";
 import CustomInput from "components/Common/CustomInput";
 import EduIDButton from "components/Common/EduIDButton";
 import { GoBackButton } from "components/ResetPassword/GoBackButton";
-import { FormApi, SubmissionErrors } from "final-form";
 import { emptyStringPattern } from "helperFunctions/validation/regexPatterns";
 import { Field as FinalField, Form as FinalForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
@@ -17,12 +16,14 @@ interface NewPasswordFormProps {
   readonly goBack?: () => void;
   readonly extra_security?: ExtraSecurityAlternatives;
   readonly suggested_password: string | undefined;
-  readonly submitNewPasswordForm: (
-    values: NewPasswordFormData,
-    form: FormApi<NewPasswordFormData, Partial<NewPasswordFormData>>,
-    callback?: ((errors?: SubmissionErrors) => void) | undefined
-  ) => void | Promise<void>;
+  readonly submitNewPasswordForm: any;
+  // submitNewPasswordForm: (
+  //   values: NewPasswordFormData,
+  //   form: FormApi<NewPasswordFormData, Partial<NewPasswordFormData>>,
+  //   callback?: ((errors?: SubmissionErrors) => void) | undefined
+  // ) => void | Promise<void>;
   readonly submitButtonText: React.ReactChild;
+  readonly handleCancel?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 export function NewPasswordForm(props: NewPasswordFormProps): JSX.Element {
@@ -61,6 +62,11 @@ export function NewPasswordForm(props: NewPasswordFormProps): JSX.Element {
               {props.extra_security && Object.keys(props.extra_security).length > 0 && (
                 <GoBackButton onClickHandler={props.goBack} />
               )}
+              {props.handleCancel && (
+                <EduIDButton buttonstyle="secondary" onClick={props.handleCancel}>
+                  <FormattedMessage defaultMessage="cancel" description="button cancel" />
+                </EduIDButton>
+              )}
               <EduIDButton buttonstyle="primary" id="new-password-button" disabled={formProps.invalid}>
                 {props.submitButtonText}
               </EduIDButton>

src/components/Common/NewPasswordInput.tsx

@@ -0,0 +1,12 @@
+import { FieldRenderProps } from "react-final-form";
+import { InputWrapper } from "./InputWrapper";
+import { PasswordInputElement } from "./PasswordInput";
+
+export default function NewPasswordInput(props: FieldRenderProps<string>): JSX.Element {
+  // the InputWrapper renders it's children plus a label, helpBlock and any error message from the field validation
+  return (
+    <InputWrapper {...props}>
+      <PasswordInputElement {...props} />
+    </InputWrapper>
+  );
+}

src/components/Common/PasswordInput.tsx

@@ -50,7 +50,7 @@ export function WrappedPasswordInput(props: FieldRenderProps<string>): JSX.Eleme
  * @param props
  * @returns
  */
-function PasswordInputElement(props: InputProps): JSX.Element {
+export function PasswordInputElement(props: InputProps): JSX.Element {
   const [showPassword, setShowPassword] = useState(false);
 
   function toggleShowPassword() {

src/components/Common/PasswordStrengthMeter.tsx

@@ -21,7 +21,6 @@ function PasswordStrengthMeter(props: PasswordStrengthMeterProps) {
   const emails = useAppSelector((state) => state.emails.emails);
   const [pwScore, setPwScore] = useState(0);
   const intl = useIntl();
-
   const pwStrengthMessages = ["pwfield.terrible", "pwfield.bad", "pwfield.weak", "pwfield.good", "pwfield.strong"];
 
   useEffect(() => {
@@ -53,10 +52,10 @@ function PasswordStrengthMeter(props: PasswordStrengthMeterProps) {
 
   return (
     <React.Fragment>
-      <meter max="4" value={pwScore} id="password-strength-meter" key="0" />
       <div className="form-field-error-area" key="1">
-        <FormText>{intl.formatMessage({ id: pwStrengthMessages[pwScore] })}</FormText>
+        {props.password !== undefined && <FormText>{intl.formatMessage({ id: pwStrengthMessages[pwScore] })}</FormText>}
       </div>
+      <meter max="4" value={pwScore} id="password-strength-meter" key="0" />
     </React.Fragment>
   );
 }

src/components/Dashboard/ChangePassword.tsx

@@ -1,17 +1,40 @@
-import { fetchSuggestedPassword } from "apis/eduidSecurity";
+import { changePassword, fetchSuggestedPassword } from "apis/eduidSecurity";
+import Splash from "components/Common/Splash";
 import { useAppDispatch, useAppSelector } from "eduid-hooks";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { Form as FinalForm, FormRenderProps } from "react-final-form";
 import { FormattedMessage, useIntl } from "react-intl";
-import ChangePasswordForm from "./ChangePasswordForm";
+import { useNavigate } from "react-router-dom";
+import ChangePasswordCustomForm from "./ChangePasswordCustom";
+import ChangePasswordSuggestedForm from "./ChangePasswordSuggested";
+import { ChangePasswordSwitchToggle } from "./ChangePasswordSwitchToggle";
 
 // exported for use in tests
 export const finish_url = "/profile/security";
 
-function ChangePassword() {
+export interface ChangePasswordFormProps {
+  finish_url: string; // URL to direct browser to when user cancels password change, or completes it
+}
+
+export interface ChangePasswordChildFormProps {
+  formProps: FormRenderProps<ChangePasswordFormData>;
+  handleCancel?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+interface ChangePasswordFormData {
+  custom?: string; // used with custom password
+  score?: number; // used with custom password
+  suggested?: string; // used with suggested password
+}
+
+export function ChangePassword() {
   const suggested_password = useAppSelector((state) => state.chpass.suggested_password);
   const is_app_loaded = useAppSelector((state) => state.config.is_app_loaded);
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const suggested = useAppSelector((state) => state.chpass.suggested_password);
+  const [renderSuggested, setRenderSuggested] = useState(true); // toggle display of custom or suggested password forms
+  const navigate = useNavigate();
 
   useEffect(() => {
     document.title = intl.formatMessage({
@@ -22,21 +45,101 @@ function ChangePassword() {
 
   useEffect(() => {
     if (is_app_loaded && suggested_password === undefined) {
-      // call fetchSuggestedPassword once state.config.security_service_url is initialised
-      dispatch(fetchSuggestedPassword());
+      handleSuggestedPassword();
     }
   }, [suggested_password, is_app_loaded]);
 
+  async function handleSuggestedPassword() {
+    const response = await dispatch(fetchSuggestedPassword());
+    if (fetchSuggestedPassword.rejected.match(response)) {
+      navigate(finish_url);
+    }
+  }
+
+  async function handleSubmitPasswords(values: ChangePasswordFormData) {
+    // Use the right form field for the currently displayed password mode
+    const newPassword = renderSuggested ? values.suggested : values.custom;
+
+    // Callback from sub-component when the user clicks on the button to change password
+    if (newPassword) {
+      const response = await dispatch(changePassword({ new_password: newPassword }));
+      if (changePassword.fulfilled.match(response)) {
+        navigate("/profile/chpass/success", {
+          state: newPassword,
+        });
+      }
+    }
+  }
+
+  function handleCancel(event: React.MouseEvent<HTMLElement>) {
+    // Callback from sub-component when the user clicks on the button to abort changing password
+    event.preventDefault();
+
+    navigate(finish_url);
+  }
+
+  const initialValues = { suggested };
+
+  function handleSwitchChange() {
+    setRenderSuggested(!renderSuggested);
+  }
+
   return (
-    <React.Fragment>
-      <h4>
-        <FormattedMessage defaultMessage="Change your current password" description="Dashboard change password" />
-      </h4>
-      <div id="changePasswordDialog">
-        <ChangePasswordForm finish_url={finish_url} />
-      </div>
-    </React.Fragment>
+    <FinalForm<ChangePasswordFormData>
+      onSubmit={handleSubmitPasswords}
+      initialValues={initialValues}
+      render={(formProps) => {
+        const child_props: ChangePasswordChildFormProps = { formProps };
+
+        return (
+          <Splash showChildren={Boolean(suggested_password)}>
+            {renderSuggested ? (
+              <section className="intro">
+                <h1>
+                  <FormattedMessage
+                    description="Change password - headline"
+                    defaultMessage="Change password: Suggested password"
+                  />
+                </h1>
+                <div className="lead">
+                  <p>
+                    <FormattedMessage
+                      description="Change password - lead"
+                      defaultMessage={`A strong password has been generated for you. To proceed you will need to copy 
+                    the password in to the Repeat new password field and click Accept Password and save it for 
+                    future use.`}
+                    />
+                  </p>
+                </div>
+              </section>
+            ) : (
+              <section className="intro">
+                <h1>
+                  <FormattedMessage
+                    description="Change password - headline"
+                    defaultMessage="Change password: Custom password"
+                  />
+                </h1>
+                <div className="lead">
+                  <p>
+                    <FormattedMessage
+                      description="Change password - lead"
+                      defaultMessage={`When creating your own password. make sure it's strong enough to keep your 
+                        accounts safe.`}
+                    />
+                  </p>
+                </div>
+              </section>
+            )}
+            <ChangePasswordSwitchToggle handleSwitchChange={handleSwitchChange} renderSuggested={renderSuggested} />
+            {renderSuggested ? (
+              <ChangePasswordSuggestedForm {...child_props} handleCancel={handleCancel} />
+            ) : (
+              <ChangePasswordCustomForm {...child_props} handleCancel={handleCancel} />
+            )}
+          </Splash>
+        );
+      }}
+    />
   );
 }
-
-export const ChangePasswordContainer = ChangePassword;