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] 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>
   );
 }