Change the place of the <fieldset> and <form>

SUNET · Dec 13, 2024 · afdb66c · afdb66c
1 parent 80439f7
commit afdb66c
Showing 1 changed file with 22 additions and 24 deletions.
diff --git 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>
   );
 }