From e2d047fcf0e80371101e2623f0b9a93316eb2d63 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Tue, 10 Dec 2024 09:10:06 +0100
Subject: [PATCH 1/7] Remove extra div inside article

---
 .../Dashboard/ChangePasswordDisplay.tsx       | 36 +++++++++----------
 src/components/Dashboard/Language.tsx         | 10 +++---
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/Dashboard/ChangePasswordDisplay.tsx b/src/components/Dashboard/ChangePasswordDisplay.tsx
index a83cd9e4d..01361c958 100644
--- a/src/components/Dashboard/ChangePasswordDisplay.tsx
+++ b/src/components/Dashboard/ChangePasswordDisplay.tsx
@@ -16,25 +16,23 @@ function ChangePasswordDisplay() {
   }
   return (
     <article>
-      <div id="change-password-container">
-        <h2>
-          <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
-        </h2>
-        <p>
-          <FormattedMessage
-            defaultMessage="Click the link to change your eduID password."
-            description="Dashboard change password link description text"
-          />
-        </p>
-        <EduIDButton
-          id="security-change-button"
-          buttonstyle="link"
-          className="lowercase"
-          onClick={handleSuggestedPassword}
-        >
-          <FormattedMessage defaultMessage="Change password" description="Dashboard change password button text" />
-        </EduIDButton>
-      </div>
+      <h2>
+        <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
+      </h2>
+      <p>
+        <FormattedMessage
+          defaultMessage="Click the link to change your eduID password."
+          description="Dashboard change password link description text"
+        />
+      </p>
+      <EduIDButton
+        id="security-change-button"
+        buttonstyle="link"
+        className="lowercase"
+        onClick={handleSuggestedPassword}
+      >
+        <FormattedMessage defaultMessage="Change password" description="Dashboard change password button text" />
+      </EduIDButton>
     </article>
   );
 }
diff --git a/src/components/Dashboard/Language.tsx b/src/components/Dashboard/Language.tsx
index e0ebd951f..e662b7517 100644
--- a/src/components/Dashboard/Language.tsx
+++ b/src/components/Dashboard/Language.tsx
@@ -36,12 +36,10 @@ export function LanguagePreference() {
   }
 
   return (
-    <article className="personal-data">
-      <div className="heading">
-        <h2>
-          <FormattedMessage description="pd main title" defaultMessage={`Language`} />
-        </h2>
-      </div>
+    <article>
+      <h2>
+        <FormattedMessage description="pd main title" defaultMessage={`Language`} />
+      </h2>
       <p>
         <FormattedMessage
           description="pd long description"

From f1d2fa7c24aaff3f57f4099cb8870646306f0e12 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Tue, 10 Dec 2024 09:39:38 +0100
Subject: [PATCH 2/7] Remove ID for article

---
 .../Common/MultiFactorAuthentication.tsx      | 141 +++++++++---------
 src/components/Dashboard/AccountLinking.tsx   |   2 +-
 src/components/Dashboard/DeleteAccount.tsx    |   2 +-
 src/components/Dashboard/Emails.tsx           |   2 +-
 src/components/Dashboard/Phones.tsx           |   2 +-
 src/components/Login/NewDevice.tsx            |  42 +++---
 6 files changed, 94 insertions(+), 97 deletions(-)

diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
index 70d481481..0373ea978 100644
--- a/src/components/Common/MultiFactorAuthentication.tsx
+++ b/src/components/Common/MultiFactorAuthentication.tsx
@@ -164,85 +164,84 @@ export function MultiFactorAuthentication(): React.ReactElement | null {
 
   if (!isPlatformAuthLoaded) return null;
   return (
-    <article id="security-container">
-      <div id="register-security-key-container">
-        <h2>
-          <FormattedMessage description="security key title" defaultMessage="Two-factor Authentication (2FA)" />
-        </h2>
-        <p>
-          <FormattedMessage
-            description="security second factor"
-            defaultMessage={`Add a token as a second factor of authentication, beyond username and password,
+    <article>
+      <h2>
+        <FormattedMessage description="security key title" defaultMessage="Two-factor Authentication (2FA)" />
+      </h2>
+      <p>
+        <FormattedMessage
+          description="security second factor"
+          defaultMessage={`Add a token as a second factor of authentication, beyond username and password,
                   to prove you are the owner of your eduID. For example a token can be a security key or your device.`}
-          />
-        </p>
-        <p className="help-text">
-          <FormattedMessage
-            description="security second factor help info"
-            defaultMessage={`You can read more about security keys in the Help section: {HelpSecurityKeys}.`}
-            values={{
-              HelpSecurityKeys: (
-                <Link className="text-link" to={`../../../help`} target="_blank">
-                  <FormattedMessage
-                    description="about security key - handle"
-                    defaultMessage="Improving the security level of eduID"
-                  />
-                </Link>
-              ),
-            }}
-          />
-        </p>
+        />
+      </p>
+      <p className="help-text">
+        <FormattedMessage
+          description="security second factor help info"
+          defaultMessage={`You can read more about security keys in the Help section: {HelpSecurityKeys}.`}
+          values={{
+            HelpSecurityKeys: (
+              <Link className="text-link" to={`../../../help`} target="_blank">
+                <FormattedMessage
+                  description="about security key - handle"
+                  defaultMessage="Improving the security level of eduID"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
 
-        <div id="register-webauthn-tokens-area" className="table-responsive">
-          {Boolean(tokens.length) && <UseSecurityKeyToggle />}
-          <SecurityKeyTable />
-          {!tokens.length && <br />}
-          <span aria-label="select extra webauthn">
-            <strong>
-              <FormattedMessage description="select extra webauthn" defaultMessage="Add a new security key:" />
-            </strong>
-          </span>
-          <div className="buttons">
-            <div>
-              <EduIDButton
-                id="security-webauthn-platform-button"
-                buttonstyle="primary"
-                onClick={() => handleRegisterWebauthn("platform")}
-                disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator}
-              >
-                <FormattedMessage description="add webauthn token device" defaultMessage="this device" />
-              </EduIDButton>
-              <p className="help-text">
+      <div id="register-webauthn-tokens-area" className="table-responsive">
+        {Boolean(tokens.length) && <UseSecurityKeyToggle />}
+        <SecurityKeyTable />
+        {!tokens.length && <br />}
+        <span aria-label="select extra webauthn">
+          <strong>
+            <FormattedMessage description="select extra webauthn" defaultMessage="Add a new security key:" />
+          </strong>
+        </span>
+        <div className="buttons">
+          <div>
+            <EduIDButton
+              id="security-webauthn-platform-button"
+              buttonstyle="primary"
+              onClick={() => handleRegisterWebauthn("platform")}
+              disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator}
+            >
+              <FormattedMessage description="add webauthn token device" defaultMessage="this device" />
+            </EduIDButton>
+            <p className="help-text">
+              <FormattedMessage
+                description="platform authn device help text"
+                defaultMessage="The device you are currently using"
+              />
+            </p>
+            {!isPlatformAuthenticatorAvailable && (
+              <p className="help-text black">
                 <FormattedMessage
-                  description="platform authn device help text"
-                  defaultMessage="The device you are currently using"
+                  description="platform authn device error text"
+                  defaultMessage="*Your device is not compatible."
                 />
               </p>
-              {!isPlatformAuthenticatorAvailable && (
-                <p className="help-text black">
-                  <FormattedMessage
-                    description="platform authn device error text"
-                    defaultMessage="*Your device is not compatible."
-                  />
-                </p>
-              )}
-            </div>
-            <div>
-              <EduIDButton
-                id="security-webauthn-button"
-                buttonstyle="primary"
-                onClick={() => handleRegisterWebauthn("cross-platform")}
-                disabled={isRegisteringAuthenticator}
-              >
-                <FormattedMessage description="add webauthn token key" defaultMessage="external security key" />
-              </EduIDButton>
-              <p className="help-text">
-                <FormattedMessage description="platform authn key help text" defaultMessage="USB Security Key." />
-              </p>
-            </div>
+            )}
+          </div>
+          <div>
+            <EduIDButton
+              id="security-webauthn-button"
+              buttonstyle="primary"
+              onClick={() => handleRegisterWebauthn("cross-platform")}
+              disabled={isRegisteringAuthenticator}
+            >
+              <FormattedMessage description="add webauthn token key" defaultMessage="external security key" />
+            </EduIDButton>
+            <p className="help-text">
+              <FormattedMessage description="platform authn key help text" defaultMessage="USB Security Key." />
+            </p>
           </div>
         </div>
       </div>
+
       <ConfirmModal
         id="describe-webauthn-token-modal"
         title={
diff --git a/src/components/Dashboard/AccountLinking.tsx b/src/components/Dashboard/AccountLinking.tsx
index decf63687..b4361381c 100644
--- a/src/components/Dashboard/AccountLinking.tsx
+++ b/src/components/Dashboard/AccountLinking.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 
 export function AccountLinking() {
   return (
-    <article id="orcid-connect-container">
+    <article>
       <h2>
         <FormattedMessage defaultMessage="ORCID account" description="Dashboard AccountLinking" />
       </h2>
diff --git a/src/components/Dashboard/DeleteAccount.tsx b/src/components/Dashboard/DeleteAccount.tsx
index 3cbf68c72..ca0da1c5d 100644
--- a/src/components/Dashboard/DeleteAccount.tsx
+++ b/src/components/Dashboard/DeleteAccount.tsx
@@ -18,7 +18,7 @@ export default function DeleteAccount(): JSX.Element | null {
   }
 
   return (
-    <article id="delete-account-container">
+    <article>
       <h2>
         <FormattedMessage defaultMessage="Delete eduID" description="DeleteAccount" />
       </h2>
diff --git a/src/components/Dashboard/Emails.tsx b/src/components/Dashboard/Emails.tsx
index 92e172bf4..f07706b26 100644
--- a/src/components/Dashboard/Emails.tsx
+++ b/src/components/Dashboard/Emails.tsx
@@ -109,7 +109,7 @@ function Emails() {
   }
 
   return (
-    <article className="emails-view-form-container">
+    <article>
       <h2>
         <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
       </h2>
diff --git a/src/components/Dashboard/Phones.tsx b/src/components/Dashboard/Phones.tsx
index 642c7d2b3..ec0fda4cb 100644
--- a/src/components/Dashboard/Phones.tsx
+++ b/src/components/Dashboard/Phones.tsx
@@ -193,7 +193,7 @@ function Phones() {
   }
 
   return (
-    <article className="phone-view-form-container" id="phone">
+    <article>
       <h2>
         <FormattedMessage defaultMessage="Mobile phone numbers" description="Phones main title" />
       </h2>
diff --git a/src/components/Login/NewDevice.tsx b/src/components/Login/NewDevice.tsx
index 78a139e34..64f73de06 100644
--- a/src/components/Login/NewDevice.tsx
+++ b/src/components/Login/NewDevice.tsx
@@ -89,29 +89,27 @@ export function RememberMeCheckbox(): JSX.Element | null {
 
   return (
     <React.Fragment>
-      <fieldset>
-        <label className="toggle flex-between" htmlFor="remember-me">
-          <legend>
-            <FormattedMessage defaultMessage="Remember me on this device" description="Login remember user device" />
-          </legend>
-          <input
-            onChange={handleSwitchChange}
-            className="toggle-checkbox"
-            type="checkbox"
-            checked={switchChecked}
-            id="remember-me"
+      <label className="toggle flex-between" htmlFor="remember-me">
+        <legend>
+          <FormattedMessage defaultMessage="Remember me on this device" description="Login remember user device" />
+        </legend>
+        <input
+          onChange={handleSwitchChange}
+          className="toggle-checkbox"
+          type="checkbox"
+          checked={switchChecked}
+          id="remember-me"
+        />
+        <div className="toggle-switch"></div>
+      </label>
+      {!switchChecked && (
+        <p className="help-text">
+          <FormattedMessage
+            defaultMessage="Allowing eduID to remember you on this device makes logging in easier and more secure"
+            description="Login remember user device"
           />
-          <div className="toggle-switch"></div>
-        </label>
-        {!switchChecked && (
-          <p className="help-text">
-            <FormattedMessage
-              defaultMessage="Allowing eduID to remember you on this device makes logging in easier and more secure"
-              description="Login remember user device"
-            />
-          </p>
-        )}
-      </fieldset>
+        </p>
+      )}
     </React.Fragment>
   );
 }

From 6dbec76913188dbc33087da75255cb0b41a0aed1 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Tue, 10 Dec 2024 09:48:10 +0100
Subject: [PATCH 3/7] Clean up

---
 src/styles/_Emails.scss | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/styles/_Emails.scss b/src/styles/_Emails.scss
index f201ee6b8..c3ba7a06a 100644
--- a/src/styles/_Emails.scss
+++ b/src/styles/_Emails.scss
@@ -1,13 +1,3 @@
-// #uniqueId-container {
-//   margin-top: 1rem;
-// }
-
-// .phoneview-form-container,
-// #delete-account-container,
-// #change-password-container {
-//   margin-top: 2rem;
-// }
-
 #suggested-password {
   display: table;
   padding: 0.125rem 0.5rem;

From 7a3e306d10fb448471e98134e94b78449764aed9 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Tue, 10 Dec 2024 10:00:32 +0100
Subject: [PATCH 4/7] Remove ID

---
 src/components/Common/HeaderNav.tsx                 | 2 +-
 src/components/Common/MultiFactorAuthentication.tsx | 2 +-
 src/components/Common/NinDisplay.tsx                | 2 +-
 src/components/Dashboard/Identity.tsx               | 6 +++---
 src/components/Dashboard/Ladok.tsx                  | 2 +-
 src/components/ResetPassword/EmailLinkSent.tsx      | 2 +-
 src/styles/_Nins.scss                               | 5 -----
 7 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index c6972c96f..88ee72ae7 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -71,7 +71,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
 
   useCloseMenuClickOutside(wrapperRef, () => setOpenMenu(false));
   return (
-    <nav id="header-nav" className="header-nav" ref={wrapperRef}>
+    <nav className="header-nav" ref={wrapperRef}>
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
         <EduIDButton buttonstyle="close" size="sm" onClick={() => setOpenMenu(false)}></EduIDButton>
diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
index 0373ea978..8545ca6a6 100644
--- a/src/components/Common/MultiFactorAuthentication.tsx
+++ b/src/components/Common/MultiFactorAuthentication.tsx
@@ -192,7 +192,7 @@ export function MultiFactorAuthentication(): React.ReactElement | null {
         />
       </p>
 
-      <div id="register-webauthn-tokens-area" className="table-responsive">
+      <div className="table-responsive">
         {Boolean(tokens.length) && <UseSecurityKeyToggle />}
         <SecurityKeyTable />
         {!tokens.length && <br />}
diff --git a/src/components/Common/NinDisplay.tsx b/src/components/Common/NinDisplay.tsx
index 65a317762..8e9f1e0f1 100644
--- a/src/components/Common/NinDisplay.tsx
+++ b/src/components/Common/NinDisplay.tsx
@@ -30,7 +30,7 @@ function RenderShowHideNin(props: NinDisplayProps): JSX.Element | null {
 
   return (
     <div data-ninnumber={props.nin.number} className="display-nin-show-hide">
-      <div id="nin-number" className={`display-data ${props.nin.verified ? "verified" : "unverified"}`}>
+      <div className={`display-data ${props.nin.verified ? "verified" : "unverified"}`}>
         {showFullNin ? props.nin.number : props.nin.number.replace(/.{4}$/, "****")}
       </div>
       <EduIDButton
diff --git a/src/components/Dashboard/Identity.tsx b/src/components/Dashboard/Identity.tsx
index 24edf45e9..b9cad1920 100644
--- a/src/components/Dashboard/Identity.tsx
+++ b/src/components/Dashboard/Identity.tsx
@@ -202,7 +202,7 @@ function VerifiedIdentitiesTable(): JSX.Element {
           </div>
           <NinDisplay nin={identities?.nin} allowDelete={true} />
           <EduIDButton
-            id="remove-webauthn"
+            id="remove-identity-nin"
             buttonstyle="remove"
             size="sm"
             onClick={() => handleConfirmDeleteModal("nin")}
@@ -226,7 +226,7 @@ function VerifiedIdentitiesTable(): JSX.Element {
           </div>
           {identities.eidas.country_code}&nbsp;{identities.eidas.date_of_birth}
           <EduIDButton
-            id="remove-webauthn"
+            id="remove-identity-eidas"
             buttonstyle="remove"
             size="sm"
             onClick={() => handleConfirmDeleteModal("eidas")}
@@ -250,7 +250,7 @@ function VerifiedIdentitiesTable(): JSX.Element {
           </div>
           {regionNames.of(identities.freja.country_code)}&nbsp;{identities.freja.date_of_birth}
           <EduIDButton
-            id="remove-webauthn"
+            id="remove-identity-freja"
             buttonstyle="remove"
             size="sm"
             onClick={() => handleConfirmDeleteModal("freja")}
diff --git a/src/components/Dashboard/Ladok.tsx b/src/components/Dashboard/Ladok.tsx
index 811242614..4f0800850 100644
--- a/src/components/Dashboard/Ladok.tsx
+++ b/src/components/Dashboard/Ladok.tsx
@@ -29,7 +29,7 @@ const LadokContainer = (): JSX.Element => {
   useEffect(() => setSwitchChecked(isLinked), [isLinked]);
 
   return (
-    <article id="ladok-container" className="ladok">
+    <article className="ladok">
       <h2>
         <FormattedMessage defaultMessage="Ladok information" description="Ladok account linking" />
       </h2>
diff --git a/src/components/ResetPassword/EmailLinkSent.tsx b/src/components/ResetPassword/EmailLinkSent.tsx
index 02dd9d0a6..0e1c0d71b 100644
--- a/src/components/ResetPassword/EmailLinkSent.tsx
+++ b/src/components/ResetPassword/EmailLinkSent.tsx
@@ -64,7 +64,7 @@ export function EmailLinkSent(): JSX.Element | null {
               description="Reset Password email link sent"
               values={{
                 email: (
-                  <span id="email_address">
+                  <span>
                     <output data-testid="email-address">
                       <strong>{response?.email}</strong>.
                     </output>
diff --git a/src/styles/_Nins.scss b/src/styles/_Nins.scss
index 656128afa..0259cafbe 100644
--- a/src/styles/_Nins.scss
+++ b/src/styles/_Nins.scss
@@ -138,11 +138,6 @@
       padding: 0;
     }
   }
-
-  // #nin-number {
-  //   font-size: 2rem;
-  //   line-height: 1.2;
-  // }
 }
 
 @media (max-width: $bp-sm) {

From 7f463d5108698a4fa805a7c821fe524ff0593acb Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Tue, 10 Dec 2024 10:48:21 +0100
Subject: [PATCH 5/7] Id -> className

---
 src/components/Common/EmailInUse.tsx               | 2 +-
 src/components/Dashboard/ChangePasswordSuccess.tsx | 2 +-
 src/components/Dashboard/Emails.tsx                | 2 +-
 src/components/Dashboard/Phones.tsx                | 2 +-
 src/components/ResetPassword/SetNewPassword.tsx    | 2 +-
 src/components/Signup/SignupUserCreated.tsx        | 2 +-
 src/styles/_tables.scss                            | 6 +++---
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/EmailInUse.tsx b/src/components/Common/EmailInUse.tsx
index 379191810..8157a7c01 100644
--- a/src/components/Common/EmailInUse.tsx
+++ b/src/components/Common/EmailInUse.tsx
@@ -21,7 +21,7 @@ export default function EmailInUse(): JSX.Element {
             values={{ email: email }}
           />
         </h3>
-        <div id="email-display">
+        <div className="email-display">
           <p>
             <FormattedMessage
               defaultMessage="If this is your eduID, you can reset your password to log back in."
diff --git a/src/components/Dashboard/ChangePasswordSuccess.tsx b/src/components/Dashboard/ChangePasswordSuccess.tsx
index 3d068017a..45956cd73 100644
--- a/src/components/Dashboard/ChangePasswordSuccess.tsx
+++ b/src/components/Dashboard/ChangePasswordSuccess.tsx
@@ -38,7 +38,7 @@ export function ChangePasswordSuccess(): JSX.Element {
         </section>
 
         {!isSuggested ? (
-          <div id="email-display">
+          <div className="email-display">
             <EmailFieldset email={email} />
           </div>
         ) : (
diff --git a/src/components/Dashboard/Emails.tsx b/src/components/Dashboard/Emails.tsx
index f07706b26..857c36377 100644
--- a/src/components/Dashboard/Emails.tsx
+++ b/src/components/Dashboard/Emails.tsx
@@ -120,7 +120,7 @@ function Emails() {
           description="Add emails description"
         />
       </p>
-      <div id="email-display">
+      <div className="email-display">
         <DataTable
           data={emails.emails}
           handleStartConfirmation={handleStartConfirmation}
diff --git a/src/components/Dashboard/Phones.tsx b/src/components/Dashboard/Phones.tsx
index ec0fda4cb..8bd8cbf04 100644
--- a/src/components/Dashboard/Phones.tsx
+++ b/src/components/Dashboard/Phones.tsx
@@ -209,7 +209,7 @@ function Phones() {
           description="Phones long description"
         />
       </p>
-      <div id="phone-display">
+      <div className="phone-display">
         <DataTable
           data={phones.phones}
           handleStartConfirmation={handleStartConfirmation}
diff --git a/src/components/ResetPassword/SetNewPassword.tsx b/src/components/ResetPassword/SetNewPassword.tsx
index 61915aafb..7c00db699 100644
--- a/src/components/ResetPassword/SetNewPassword.tsx
+++ b/src/components/ResetPassword/SetNewPassword.tsx
@@ -181,7 +181,7 @@ export function ResetPasswordSuccess(): JSX.Element {
         </div>
       </section>
       {!suggested ? (
-        <div id="email-display">
+        <div className="email-display">
           <EmailFieldset email={email_address} />
         </div>
       ) : (
diff --git a/src/components/Signup/SignupUserCreated.tsx b/src/components/Signup/SignupUserCreated.tsx
index 04f686964..25c75310e 100644
--- a/src/components/Signup/SignupUserCreated.tsx
+++ b/src/components/Signup/SignupUserCreated.tsx
@@ -146,7 +146,7 @@ export function SignupUserCreated(): JSX.Element {
         </p>
       </div>
       {signupState?.credentials.custom_password ? (
-        <div id="email-display">
+        <div className="email-display">
           <EmailFieldset email={signupState?.email.address} />
         </div>
       ) : (
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
index ef593e537..b4c3b619a 100644
--- a/src/styles/_tables.scss
+++ b/src/styles/_tables.scss
@@ -129,8 +129,8 @@ table {
   }
 
   .progress-summary &,
-  #phone-display &,
-  #email-display & {
+  .phone-display &,
+  .email-display & {
     tr.display-none {
       display: none;
     }
@@ -149,7 +149,7 @@ table {
   }
 }
 
-div#phone-display {
+div.phone-display {
   margin-top: 1rem;
 }
 

From 80439f74924052000132584c7012d8315059d7d5 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 13 Dec 2024 13:23:55 +0100
Subject: [PATCH 6/7] Remove fieldset

---
 src/components/Dashboard/NinForm.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Dashboard/NinForm.tsx b/src/components/Dashboard/NinForm.tsx
index 594d1fd2c..175dfc418 100644
--- a/src/components/Dashboard/NinForm.tsx
+++ b/src/components/Dashboard/NinForm.tsx
@@ -67,18 +67,16 @@ function NinForm(): JSX.Element {
       render={({ handleSubmit, pristine, invalid }) => {
         return (
           <form onSubmit={handleSubmit} className="single-input-form x-adjust">
-            <fieldset id="nins-form" className="tab-pane">
-              <FinalField
-                component={CustomInput}
-                componentClass="input"
-                type="text"
-                name="nin"
-                label={<FormattedMessage description="nin label" defaultMessage="ID number" />}
-                placeholder={placeholder}
-                helpBlock={<FormattedMessage description="nins input help text" defaultMessage="12 digits" />}
-                validate={validateNin}
-              />
-            </fieldset>
+            <FinalField
+              component={CustomInput}
+              componentClass="input"
+              type="text"
+              name="nin"
+              label={<FormattedMessage description="nin label" defaultMessage="ID number" />}
+              placeholder={placeholder}
+              helpBlock={<FormattedMessage description="nins input help text" defaultMessage="12 digits" />}
+              validate={validateNin}
+            />
             <div className="buttons">
               <EduIDButton id="add-nin-button" buttonstyle="primary" disabled={pristine || invalid} type="submit">
                 <FormattedMessage description="button_add" defaultMessage="Add" />

From afdb66c02c2ed399558ba082bb36c80c3e1d508c Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 13 Dec 2024 13:25:20 +0100
Subject: [PATCH 7/7] Change the place of the <fieldset> and <form>

---
 .../Dashboard/UseSecurityKeyToggle.tsx        | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/Dashboard/UseSecurityKeyToggle.tsx b/src/components/Dashboard/UseSecurityKeyToggle.tsx
index ccaf34b98..ecccf2f37 100644
--- a/src/components/Dashboard/UseSecurityKeyToggle.tsx
+++ b/src/components/Dashboard/UseSecurityKeyToggle.tsx
@@ -35,34 +35,32 @@ export default function UseSecurityKeyToggle(): JSX.Element | null {
   }
 
   return (
-    <>
+    <form>
       {/* always_use_security_key toggle button */}
       <fieldset>
-        <form>
-          <label className="toggle flex-between border-toggle-area" htmlFor="security-key-mfa">
-            <legend className="legend-2fa">
+        <label className="toggle flex-between border-toggle-area" htmlFor="security-key-mfa">
+          <legend className="legend-2fa">
+            <FormattedMessage
+              defaultMessage={`Always use a second factor (2FA) to log in`}
+              description="Security key toggle"
+            />
+            <p className="help-text">
               <FormattedMessage
-                defaultMessage={`Always use a second factor (2FA) to log in`}
-                description="Security key toggle"
+                description="help text toggle 2FA"
+                defaultMessage="If a second factor is required by external services for authentication, it will be always requested during the login even if this option is off."
               />
-              <p className="help-text">
-                <FormattedMessage
-                  description="help text toggle 2FA"
-                  defaultMessage="If a second factor is required by external services for authentication, it will be always requested during the login even if this option is off."
-                />
-              </p>
-            </legend>
-            <input
-              onChange={handleSwitchChange}
-              className="toggle-checkbox"
-              type="checkbox"
-              checked={switchChecked}
-              id="security-key-mfa"
-            />
-            <div className="toggle-switch"></div>
-          </label>
-        </form>
+            </p>
+          </legend>
+          <input
+            onChange={handleSwitchChange}
+            className="toggle-checkbox"
+            type="checkbox"
+            checked={switchChecked}
+            id="security-key-mfa"
+          />
+          <div className="toggle-switch"></div>
+        </label>
       </fieldset>
-    </>
+    </form>
   );
 }