Merge pull request #862 from jsonwebtoken/auto-focus-token-input

Add autofocus for jwt token input

Author: javiert-okta

src/features/common/components/checkbox/checkbox.component.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, type CheckboxProps } from "react-aria-components";
+import styles from './checkbox.module.scss'
+
+export function CheckboxComponent({
+  children,
+  ...props
+}: Omit<CheckboxProps, "children"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <Checkbox {...props} className={styles.checkbox__component}>
+      {({ isIndeterminate }) => (
+        <>
+          <div className={styles.checkbox}>
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              {isIndeterminate ? (
+                <rect x={1} y={7.5} width={15} height={3} />
+              ) : (
+                <polyline points="1 9 7 14 15 4" />
+              )}
+            </svg>
+          </div>
+          {children}
+        </>
+      )}
+    </Checkbox>
+  );
+}

src/features/common/components/checkbox/checkbox.module.scss

@@ -0,0 +1,66 @@
+.checkbox__component {
+  --selected-color: var(--color_bg_state_success);
+  --selected-color-pressed: var(--color_fg_on_state_success_subtle);
+  --checkmark-color: var(--color_border_state_success);
+
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: 1.143rem;
+  color: white;
+  forced-color-adjust: none;
+
+  .checkbox {
+    width: 1.143rem;
+    height: 1.143rem;
+    border: 2px solid var(--color_fg_default);
+    border-radius: 4px;
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--functional-gray-0);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--color_fg_selected);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }
+  }
+}

src/features/common/components/code-editor/editor.component.tsx

@@ -18,6 +18,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
   textareaId?: string;
   textareaClassName?: string;
   autoFocus?: boolean;
+  focusOnWindowFocus?: boolean;
   disabled?: boolean;
   form?: string;
   maxLength?: number;
@@ -87,6 +88,21 @@ export class EditorComponent extends React.Component<Props, State> {
 
   componentDidMount() {
     this._recordCurrentState();
+    if (this.props.focusOnWindowFocus) {
+      window.addEventListener("focus", this._focusInput);
+    }
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (prevProps.focusOnWindowFocus !== this.props.focusOnWindowFocus) {
+      this.props.focusOnWindowFocus
+        ? window.addEventListener("focus", this._focusInput)
+        : window.removeEventListener("focus", this._focusInput);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("focus", this._focusInput);
   }
 
   private _recordCurrentState = () => {
@@ -161,6 +177,13 @@ export class EditorComponent extends React.Component<Props, State> {
     this._history.offset++;
   };
 
+  private _focusInput = () => {
+    const input = this._input;
+
+    if (!input) return;
+    input.focus();
+  };
+
   private _updateInput = (record: Record) => {
     const input = this._input;
 
@@ -466,7 +489,7 @@ export class EditorComponent extends React.Component<Props, State> {
         selectionStart,
         selectionEnd,
       },
-      true,
+      true
     );
 
     this.props.onValueChange(value);
@@ -516,6 +539,7 @@ export class EditorComponent extends React.Component<Props, State> {
       insertSpaces,
       ignoreTabKey,
       preClassName,
+      focusOnWindowFocus,
       ...rest
     } = this.props;
 

src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import styles from "./debugger-toolbar.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
 import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
@@ -18,9 +18,22 @@ interface DebuggerToolbarComponentProps {
 export const DebuggerToolbarComponent: React.FC<
   DebuggerToolbarComponentProps
 > = ({ decoderDictionary, encoderDictionary, mode }) => {
+  const tabRefs = useRef<Array<HTMLLIElement | null>>([]);
   const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
-
   const setActiveWidget$ = useDebuggerStore((state) => state.setActiveWidget$);
+  const isDecoder = activeWidget$ === DebuggerWidgetValues.DECODER;
+  
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    const { key } = e;
+
+    if (key == "ArrowRight" || key == "ArrowLeft") {
+      setActiveWidget$(
+        isDecoder ? DebuggerWidgetValues.ENCODER : DebuggerWidgetValues.DECODER
+      );
+      e.preventDefault();
+    }
+    tabRefs.current[isDecoder ? 0 : 1]?.focus();
+  };
 
   if (mode === DebuggerModeValues.UNIFIED) {
     return (
@@ -40,8 +53,15 @@ export const DebuggerToolbarComponent: React.FC<
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.DECODER);
               }}
+              onKeyDown={handleKeyDown}
               data-active={activeWidget$ === DebuggerWidgetValues.DECODER}
               data-testid={dataTestidDictionary.debugger.decoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.DECODER}
+              aria-controls={`${DebuggerWidgetValues.DECODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[0] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.DECODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {decoderDictionary.compactTitle}
@@ -53,11 +73,18 @@ export const DebuggerToolbarComponent: React.FC<
             <li
               role="tab"
               className={styles.titleTab}
+              onKeyDown={handleKeyDown}
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.ENCODER);
               }}
               data-active={activeWidget$ === DebuggerWidgetValues.ENCODER}
               data-testid={dataTestidDictionary.debugger.encoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.ENCODER}
+              aria-controls={`${DebuggerWidgetValues.ENCODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[1] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.ENCODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {encoderDictionary.compactTitle}

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

@@ -4,16 +4,20 @@ import { EditorComponent } from "@/features/common/components/code-editor/editor
 interface JwtEditorComponentProps {
   token: string;
   handleJwtChange: (value: string) => void;
+  autoFocus: boolean
 }
 
 export const JwtEditorComponent: React.FC<JwtEditorComponentProps> = ({
   token,
+  autoFocus,
   handleJwtChange,
 }) => {
   return (
     <EditorComponent
       aria-label="JWT editor input"
       value={token}
+      autoFocus={autoFocus}
+      focusOnWindowFocus={autoFocus}
       onValueChange={(code) => handleJwtChange(code)}
       highlight={(code) => {
         if (!code) {

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>
     </>
   );

src/features/decoder/components/jwt-input.module.scss

@@ -10,3 +10,11 @@
   font-weight: 500;
   letter-spacing: 0.24px;
 }
+
+.checkbox__label {
+  color: var(--color_fg_default);
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-weight: 500;
+  letter-spacing: 0.24px;
+}