add checkbox and localstorage functionality for enabling/disabling autofocus

Author: javiert-okta

src/features/decoder/components/jwt-input.component.tsx

@@ -14,6 +14,7 @@ import { CardToolbarComponent } from "@/features/common/components/card-toolbar/
 import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component";
 import { CardToolbarClearButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component";
 import styles from "./jwt-input.module.scss";
+import { CheckboxComponent } from "@/features/common/components/checkbox/checkbox.component";
 
 type JwtInputComponentProps = {
   languageCode: string;
@@ -24,14 +25,18 @@ export const JwtInputComponent: React.FC<JwtInputComponentProps> = ({
   languageCode,
   dictionary,
 }) => {
+  const [autoFocusEnabled, setAutofocusEnabled] = useState(() => {
+    const saved = localStorage.getItem("autofocus-enabled");
+    return saved ? !!JSON.parse(saved) : false
+  });
   const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
   const jwt$ = useDecoderStore((state) => state.jwt);
   const decodeErrors$ = useDecoderStore((state) => state.decodingErrors);
 
   const decoderInputs$ = useDebuggerStore((state) => state.decoderInputs$);
 
   const [token, setToken] = useState<string>(
-    decoderInputs$.jwt || DEFAULT_JWT.token,
+    decoderInputs$.jwt || DEFAULT_JWT.token
   );
 
   const clearValue = async () => {
@@ -46,13 +51,23 @@ export const JwtInputComponent: React.FC<JwtInputComponentProps> = ({
     handleJwtChange$(cleanValue);
   };
 
+  const handleCheckboxChange = (selected: boolean) => {
+    localStorage.setItem("autofocus-enabled", JSON.stringify(selected))
+    setAutofocusEnabled(selected)
+  }
+
   useEffect(() => {
     setToken(jwt$);
   }, [jwt$]);
 
   return (
     <>
-      <span className={styles.headline}>{dictionary.headline}</span>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <span className={styles.headline}>{dictionary.headline}</span>
+        <CheckboxComponent isSelected={autoFocusEnabled} onChange={e => handleCheckboxChange(e)}>
+          <span className={styles.checkbox__label}>Enable auto-focus</span>
+        </CheckboxComponent>
+      </div>
       <CardComponent
         id={dataTestidDictionary.decoder.jwtEditor.id}
         languageCode={languageCode}
@@ -84,7 +99,7 @@ export const JwtInputComponent: React.FC<JwtInputComponentProps> = ({
           ),
         }}
       >
-        <JwtEditorComponent token={token} handleJwtChange={handleJwtChange} />
+        <JwtEditorComponent token={token} handleJwtChange={handleJwtChange} autoFocus={autoFocusEnabled}/>
       </CardComponent>
     </>
   );