Merge pull request #1726 from SUNET/dev-2024-4

Update reset password, signup

src/apis/eduidSignup.ts

@@ -140,6 +140,8 @@ export const acceptToURequest = createAsyncThunk<
 
 export interface RegisterEmailRequest {
   email: string;
+  given_name: string;
+  surname: string;
 }
 
 /**
@@ -154,6 +156,8 @@ export const registerEmailRequest = createAsyncThunk<
 >("signup/registerEmailRequest", async (args, thunkAPI) => {
   const body: KeyValues = {
     email: args.email,
+    surname: args.surname,
+    given_name: args.given_name,
   };
 
   return makeSignupRequest<SignupStatusResponse>(thunkAPI, "register-email", body)

src/components/Common/EmailInput.tsx

@@ -9,7 +9,7 @@ export const emailPlaceHolder = "[email protected]";
 
 interface EmailInputProps {
   required: boolean;
-  autoFocus: boolean;
+  autoFocus?: boolean;
   name: string;
   autoComplete?: "username";
   helpBlock?: React.ReactNode; // help text shown above input

src/components/Common/InputWrapper.tsx

@@ -40,8 +40,7 @@ function RenderLabelAndHelpText(props: InputWrapperProps): JSX.Element {
 function RenderErrorMessage(props: InputWrapperProps): JSX.Element | null {
   const intl = useIntl();
   const { meta } = props;
-
-  if (!meta.error && !meta.submitError) {
+  if ((!meta.error && !meta.submitError) || (!meta.touched && !meta.dirty)) {
     // no error, no message
     return null;
   }

src/components/Common/NewPasswordForm.tsx

@@ -0,0 +1,73 @@
+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";
+
+const newPasswordFormId = "new-password-form";
+
+export interface NewPasswordFormData {
+  newPassword?: string;
+}
+
+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 submitButtonText: React.ReactChild;
+}
+
+export function NewPasswordForm(props: NewPasswordFormProps): JSX.Element {
+  function validateNewPassword(values: NewPasswordFormData) {
+    const newPassword = values.newPassword;
+    const errors: NewPasswordFormData = {};
+
+    if (!newPassword || emptyStringPattern.test(newPassword)) {
+      errors.newPassword = "required";
+    } else if (newPassword?.replace(/\s/g, "") !== props.suggested_password?.replace(/\s/g, "")) {
+      // Remove whitespace from both passwords before comparing
+      errors.newPassword = "chpass.different-repeat";
+    }
+    return errors;
+  }
+
+  return (
+    <FinalForm<NewPasswordFormData>
+      onSubmit={props.submitNewPasswordForm}
+      validate={validateNewPassword}
+      render={(formProps) => {
+        return (
+          <form id={newPasswordFormId} onSubmit={formProps.handleSubmit}>
+            <FinalField
+              id="new-password"
+              type="text"
+              name="newPassword"
+              component={CustomInput}
+              required={true}
+              label={<FormattedMessage defaultMessage="Repeat new password" description="Set new password" />}
+              placeholder="xxxx xxxx xxxx"
+              autoFocus={true}
+            />
+
+            <div className="buttons">
+              {props.extra_security && Object.keys(props.extra_security).length > 0 && (
+                <GoBackButton onClickHandler={props.goBack} />
+              )}
+              <EduIDButton buttonstyle="primary" id="new-password-button" disabled={formProps.invalid}>
+                {props.submitButtonText}
+              </EduIDButton>
+            </div>
+          </form>
+        );
+      }}
+    />
+  );
+}

src/components/Common/NinDisplay.tsx

@@ -55,10 +55,10 @@ function RenderShowHideNin(props: NinDisplayProps): JSX.Element | null {
 
 export function NinDisplay(props: NinDisplayProps) {
   return (
-    <div className="profile-grid-cell x-adjust">
+    <div className="profile-grid-cell">
       <span aria-label="id number">
         <strong>
-          <FormattedMessage description="nin label" defaultMessage="Id number" />
+          <FormattedMessage description="nin label" defaultMessage="National ID number" />
         </strong>
       </span>
       {!props.nin ? (

src/components/Dashboard/Emails.tsx

@@ -37,7 +37,7 @@ function Emails() {
 
   const modalPlaceholder = intl.formatMessage({
     id: "emails.confirm_email_placeholder",
-    defaultMessage: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+    defaultMessage: "enter code",
     description: "Placeholder for email code input",
   });
 
@@ -181,8 +181,7 @@ function Emails() {
             values={{ email: selectedEmail }}
           />
         }
-        //TODO: Add short code placeholder and helpBlock - and switch to shortcode validation pattern when the time is right
-        placeholder=""
+        placeholder={modalPlaceholder}
         showModal={Boolean(selectedEmail)}
         closeModal={handleStopConfirmation}
         handleConfirm={handleConfirm}
@@ -191,9 +190,9 @@ function Emails() {
         validationPattern={shortCodePattern}
         resendMarkup={
           <div className="resend-code-container">
-            <a href="#" onClick={handleResend}>
+            <EduIDButton buttonstyle="link" className="normal-case" onClick={handleResend}>
               <FormattedMessage description="resend code" defaultMessage={`Send a new code`} />
-            </a>
+            </EduIDButton>
           </div>
         }
       />

src/components/Dashboard/LetterProofing.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from "eduid-hooks";
 import { Fragment, useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { shortCodePattern } from "../../helperFunctions/validation/regexPatterns";
+import AddNin from "./AddNin";
 
 export interface LetterProofingProps {
   disabled: boolean;
@@ -136,19 +137,27 @@ export default function LetterProofing(props: LetterProofingProps): JSX.Element
   // placeholder can't be an Element, we need to get the actual translated string here
   const placeholder = intl.formatMessage({
     id: "letter.placeholder",
-    defaultMessage: "Code",
+    defaultMessage: "enter code",
     description: "Placeholder for letter proofing text input",
   });
 
   return (
     <Fragment>
+      {/* <h4>
+        <FormattedMessage description="verify identity add nin heading" defaultMessage="Add your id number" />
+      </h4> */}
+
       <p className="proofing-btn-help">
         <FormattedMessage
           description="letter initialize proofing help text"
           defaultMessage={`You will receive a letter which contains a code that for security reasons expires in two weeks.`}
         />
       </p>
 
+      <AddNin />
+
+      <hr className="border-line border-line-lesser" />
+
       {description}
 
       <EduIDButton disabled={disabled} buttonstyle="primary" size="sm" onClick={() => handleModal()}>

src/components/Dashboard/LookupMobileProofing.tsx

@@ -7,6 +7,7 @@ import { Fragment, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { HashLink } from "react-router-hash-link";
 import { clearNotifications } from "slices/Notifications";
+import AddNin from "./AddNin";
 
 interface LookupMobileProofingProps {
   disabled: boolean;
@@ -25,7 +26,7 @@ function ExplanationText(): JSX.Element {
   if (!nin) {
     return (
       <FormattedMessage
-        defaultMessage="Start by adding your ID number above"
+        defaultMessage="Start by adding your ID number above."
         description="verify identity vetting explanation add nin"
       />
     );
@@ -93,6 +94,11 @@ function LookupMobileProofing(props: LookupMobileProofingProps): JSX.Element {
           />
         }
       </p>
+
+      <AddNin />
+
+      <hr className="border-line border-line-lesser" />
+
       <p>
         <ExplanationText />
       </p>

src/components/Dashboard/NinForm.tsx

@@ -73,14 +73,9 @@ function NinForm(): JSX.Element {
                 componentClass="input"
                 type="text"
                 name="nin"
-                label={<FormattedMessage description="nin label" defaultMessage="Id number" />}
+                label={<FormattedMessage description="nin label" defaultMessage="ID number" />}
                 placeholder={placeholder}
-                helpBlock={
-                  <FormattedMessage
-                    description="nins input help text"
-                    defaultMessage="National identity number with 12 digits"
-                  />
-                }
+                helpBlock={<FormattedMessage description="nins input help text" defaultMessage="12 digits" />}
                 validate={validateNin}
               />
             </fieldset>

src/components/Dashboard/Phones.tsx

@@ -170,7 +170,7 @@ function Phones() {
 
   const modalPlaceholder = intl.formatMessage({
     id: "mobile.confirm_mobile_placeholder",
-    defaultMessage: "Code",
+    defaultMessage: "enter code",
     description: "placeholder text for phone code input",
   });