Merge pull request #1937 from SUNET/eunju-unify-html-stucture

unify html structure
SUNET · Dec 17, 2024 · 967cb00 · 967cb00
2 parents 3f9954a + afdb66c
commit 967cb00
Show file tree

Hide file tree

Showing 22 changed files with 163 additions and 189 deletions.
diff --git 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/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
@@ -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 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/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/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/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/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/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
@@ -109,7 +109,7 @@ function Emails() {
   }
 
   return (
-    <article className="emails-view-form-container">
+    <article>
       <h2>
         <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
       </h2>
@@ -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/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
@@ -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/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"

diff --git 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" />

diff --git 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>
@@ -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}