Merge pull request #1710 from SUNET/cat-move-nin

Cat move nin
SUNET · Apr 23, 2024 · 23f8989 · 23f8989
2 parents 00dd095 + 0d836a5
commit 23f8989
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 116 deletions.
diff --git a/src/components/Common/NinDisplay.tsx b/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 ? (

diff --git a/src/components/Dashboard/LetterProofing.tsx b/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;
@@ -142,13 +143,21 @@ export default function LetterProofing(props: LetterProofingProps): JSX.Element
 
   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()}>

diff --git a/src/components/Dashboard/LookupMobileProofing.tsx b/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>

diff --git a/src/components/Dashboard/NinForm.tsx b/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>

diff --git a/src/components/Dashboard/VerifyIdentity.tsx b/src/components/Dashboard/VerifyIdentity.tsx
@@ -20,7 +20,7 @@ import AccordionItemTemplate from "../Common/AccordionItemTemplate";
 
 import EduIDButton from "components/Common/EduIDButton";
 import NinDisplay from "components/Common/NinDisplay";
-import AddNin from "./AddNin";
+
 import BankID from "./BankID";
 import { DashboardBreadcrumbs } from "./DashboardBreadcrumbs";
 
@@ -126,7 +126,7 @@ function VerifyIdentityIntro(): JSX.Element {
             <FormattedMessage
               description="verify identity unverified description"
               defaultMessage={`Some services need to know your real life identity. Connect your identity to your eduID
-            to get the most benefit from `}
+            to get the most benefit from it.`}
             />
           </p>
         </div>
@@ -286,82 +286,75 @@ function AccordionItemSwedish(): JSX.Element | null {
       }
       uuid="swedish"
     >
-      <ol className="listed-steps">
-        <li>
-          <h4>
-            <FormattedMessage description="verify identity add nin heading" defaultMessage="Add your id number" />
-          </h4>
-          <AddNin />
-        </li>
-        <li>
-          <h4>
-            <FormattedMessage description="verify identity connect nin" defaultMessage="Verify your id number" />
-          </h4>
-          <p className="x-adjust">
+      {/* <h4>
+        <FormattedMessage
+          description="verify identity connect nin"
+          defaultMessage="Verify that you have access to your id or coordination number"
+        />
+      </h4> */}
+      <p>
+        <FormattedMessage
+          description="verify-identity.connect-nin_description"
+          defaultMessage={`Verify that you have access to your ID- or coordination number.`}
+        />
+      </p>
+
+      <Accordion allowMultipleExpanded allowZeroExpanded className="accordion accordion-nested">
+        <AccordionItemTemplate
+          icon={<img height="35" className="circle-icon bankid-icon" alt="BankID" src={BankIdFlag} />}
+          title={<FormattedMessage description="BankID vetting button" defaultMessage={`with a BankID`} />}
+          additionalInfo={
             <FormattedMessage
-              description="verify-identity.connect-nin_description"
-              defaultMessage={`Choose a suitable method to verify that you have access to the added id number.`}
+              description="verify identity vetting BankID tagline"
+              defaultMessage={`For you able to use BankID`}
             />
-          </p>
-
-          <Accordion allowMultipleExpanded allowZeroExpanded className="accordion accordion-nested x-adjust">
-            <AccordionItemTemplate
-              icon={<img height="35" className="circle-icon bankid-icon" alt="BankID" src={BankIdFlag} />}
-              title={<FormattedMessage description="BankID vetting button" defaultMessage={`with a BankID`} />}
-              additionalInfo={
-                <FormattedMessage
-                  description="verify identity vetting BankID tagline"
-                  defaultMessage={`For you able to use BankID`}
-                />
-              }
-              uuid="se-bankID"
-            >
-              <BankID />
-            </AccordionItemTemplate>
-            <AccordionItemTemplate
-              icon={<img height="35" className="circle-icon" alt="Freja+ eID" src={FrejaFlag} />}
-              title={<FormattedMessage description="eidas vetting button freja" defaultMessage={`with a Freja+`} />}
-              additionalInfo={
-                <FormattedMessage
-                  description="verify identity vetting freja tagline"
-                  defaultMessage={`For you able to create a Freja+ by using the app or visiting one of the authorised agents`}
-                />
-              }
-              uuid="se-freja"
-            >
-              <FrejaeID />
-            </AccordionItemTemplate>
-            <AccordionItemTemplate
-              icon={<FontAwesomeIcon icon={faEnvelope as IconProp} className="circle-icon" />}
-              title={<FormattedMessage defaultMessage="by post" description="explanation text for letter proofing" />}
-              additionalInfo={
-                <FormattedMessage
-                  defaultMessage="For you registered at your current address"
-                  description="explanation text for letter proofing"
-                />
-              }
-              uuid="se-letter"
-              disabled={letterProofingDisabled}
-            >
-              <LetterProofing disabled={letterProofingDisabled} />
-            </AccordionItemTemplate>
-            <AccordionItemTemplate
-              icon={<FontAwesomeIcon icon={faMobileScreen as IconProp} className="circle-icon" />}
-              title={<FormattedMessage defaultMessage="by phone" description="explanation text for vetting phone" />}
-              additionalInfo={
-                <FormattedMessage
-                  defaultMessage="For you with a phone number registered in your name"
-                  description="explanation text for vetting phone"
-                />
-              }
-              uuid="se-phone"
-              disabled={lookupMobileDisabled}
-            >
-              <LookupMobileProofing disabled={lookupMobileDisabled} />
-            </AccordionItemTemplate>
-          </Accordion>
-        </li>
-      </ol>
+          }
+          uuid="se-bankID"
+        >
+          <BankID />
+        </AccordionItemTemplate>
+        <AccordionItemTemplate
+          icon={<img height="35" className="circle-icon" alt="Freja+ eID" src={FrejaFlag} />}
+          title={<FormattedMessage description="eidas vetting button freja" defaultMessage={`with a Freja+`} />}
+          additionalInfo={
+            <FormattedMessage
+              description="verify identity vetting freja tagline"
+              defaultMessage={`For you able to create a Freja+ by using the app or visiting one of the authorised agents`}
+            />
+          }
+          uuid="se-freja"
+        >
+          <FrejaeID />
+        </AccordionItemTemplate>
+        <AccordionItemTemplate
+          icon={<FontAwesomeIcon icon={faEnvelope as IconProp} className="circle-icon" />}
+          title={<FormattedMessage defaultMessage="by post" description="explanation text for letter proofing" />}
+          additionalInfo={
+            <FormattedMessage
+              defaultMessage="For you registered at your current address"
+              description="explanation text for letter proofing"
+            />
+          }
+          uuid="se-letter"
+          //
+        >
+          <LetterProofing disabled={letterProofingDisabled} />
+        </AccordionItemTemplate>
+        <AccordionItemTemplate
+          icon={<FontAwesomeIcon icon={faMobileScreen as IconProp} className="circle-icon" />}
+          title={<FormattedMessage defaultMessage="by phone" description="explanation text for vetting phone" />}
+          additionalInfo={
+            <FormattedMessage
+              defaultMessage="For you with a phone number registered in your name"
+              description="explanation text for vetting phone"
+            />
+          }
+          uuid="se-phone"
+          //disabled={lookupMobileDisabled}
+        >
+          <LookupMobileProofing disabled={lookupMobileDisabled} />
+        </AccordionItemTemplate>
+      </Accordion>
     </AccordionItemTemplate>
   );
 }

diff --git a/src/styles/_accordion.scss b/src/styles/_accordion.scss
@@ -65,6 +65,7 @@
           }
           + div {
             flex: 1;
+            margin-right: 1.5rem;
           }
         }
 

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -100,6 +100,10 @@ hr.border-line {
   border-bottom: 2px solid $border-gray;
   border-top: none;
   opacity: unset;
+
+  &-lesser {
+    border-bottom: 1px dashed #d8d8d8;
+  }
 }
 
 // TODO: Remove after checking scrollbar in tables

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -22,7 +22,10 @@ form {
 // single input and button on a row
 .single-input-form {
   flex-direction: row;
-
+  align-items: center;
+  .buttons {
+    align-self: center;
+  }
   button {
     margin: auto 0 0.5rem 1rem;
   }

diff --git a/src/tests/VerifyIdentity-test.tsx b/src/tests/VerifyIdentity-test.tsx
@@ -17,8 +17,14 @@ test("renders verifyIdentity, non verified user", async () => {
   act(() => {
     swedishAccordion.click();
   });
+  const byPostAccordion = screen.getAllByRole("button", {
+    name: /by post/i,
+  })[0];
+  act(() => {
+    byPostAccordion.click();
+  });
   await waitFor(() => {
-    expect(screen.getByRole("heading", { name: /Add your id number/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/ID number/i)).toBeInTheDocument();
   });
   act(() => {
     eidasAccordion.click();
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,7 @@ @@
               }
               + div {
                 flex: 1;
+                margin-right: 1.5rem;
               }
             }
@@ Expand Down @@