JWT auth plugin and necessary updates

src-web/components/core/Editor/Editor.tsx

@@ -7,7 +7,7 @@ import { emacs } from '@replit/codemirror-emacs';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import type { EditorKeymap, EnvironmentVariable } from '@yaakapp-internal/models';
-import type { TemplateFunction } from '@yaakapp-internal/plugins';
+import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';
@@ -51,16 +51,7 @@ export interface EditorProps {
   type?: 'text' | 'password';
   className?: string;
   heightMode?: 'auto' | 'full';
-  language?:
-    | 'javascript'
-    | 'json'
-    | 'html'
-    | 'xml'
-    | 'graphql'
-    | 'url'
-    | 'pairs'
-    | 'text'
-    | 'markdown';
+  language?: EditorLanguage | 'pairs';
   forceUpdateKey?: string | number;
   autoFocus?: boolean;
   autoSelect?: boolean;
@@ -90,10 +81,6 @@ const stateFields = { history: historyField, folds: foldState };
 const emptyVariables: EnvironmentVariable[] = [];
 const emptyExtension: Extension = [];
 
-// NOTE: For some reason, the cursor doesn't appear if the field is empty and there is no
-//  placeholder. So we set it to a space to force it to show.
-const emptyPlaceholder = ' ';
-
 export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   {
     readOnly,
@@ -178,11 +165,11 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   useEffect(
     function configurePlaceholder() {
       if (cm.current === null) return;
-      const ext = placeholderExt(placeholderElFromText(placeholder || emptyPlaceholder));
+      const ext = placeholderExt(placeholderElFromText(placeholder ?? '', type));
       const effect = placeholderCompartment.current.reconfigure(ext);
       cm.current?.view.dispatch({ effects: effect });
     },
-    [placeholder],
+    [placeholder, type],
   );
 
   // Update vim
@@ -354,7 +341,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         const extensions = [
           languageCompartment.of(langExt),
           placeholderCompartment.current.of(
-            placeholderExt(placeholderElFromText(placeholder || emptyPlaceholder)),
+            placeholderExt(placeholderElFromText(placeholder ?? '', type)),
           ),
           wrapLinesCompartment.current.of(wrapLines ? EditorView.lineWrapping : []),
           keymapCompartment.current.of(
@@ -592,18 +579,21 @@ function getExtensions({
   ];
 }
 
-const placeholderElFromText = (text: string) => {
+const placeholderElFromText = (text: string, type: EditorProps['type']) => {
   const el = document.createElement('div');
-  el.innerHTML = text.replaceAll('\n', '<br/>');
+  if (type === 'password') {
+    // Will be obscured (dots) so just needs to be something to take up space
+    el.innerHTML = 'aaaaaaaaaa';
+    el.setAttribute('aria-hidden', 'true');
+  } else {
+    el.innerHTML = text ? text.replaceAll('\n', '<br/>') : ' ';
+  }
   return el;
 };
 
 function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
   if (!stateKey || state == null) return;
-  sessionStorage.setItem(
-    computeFullStateKey(stateKey),
-    JSON.stringify(state.toJSON(stateFields)),
-  );
+  sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(state.toJSON(stateFields)));
 }
 
 function getCachedEditorState(doc: string, stateKey: string | null) {

src-web/components/core/Input.tsx

@@ -3,6 +3,7 @@ import type { EditorView } from 'codemirror';
 import type { ReactNode } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
+import { generateId } from '../../lib/generateId';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/Editor';
 import { IconButton } from './IconButton';
@@ -94,7 +95,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
     onBlur?.();
   }, [onBlur]);
 
-  const id = `input-${label}`;
+  const id = useRef(`input-${generateId()}`);
   const editorClassName = classNames(
     className,
     '!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
@@ -140,7 +141,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id} className={classNames(labelClassName, hideLabel && 'sr-only')}>
+      <Label htmlFor={id.current} className={classNames(labelClassName, hideLabel && 'sr-only')}>
         {label}
       </Label>
       <HStack
@@ -168,7 +169,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
         >
           <Editor
             ref={editorRef}
-            id={id}
+            id={id.current}
             singleLine
             stateKey={stateKey}
             wrapLines={wrapLines}

src-web/components/core/RadioDropdown.tsx

@@ -38,7 +38,6 @@ export function RadioDropdown<T = string | null>({
           return {
             key: item.value,
             label: item.label,
-            shortLabel: item.shortLabel,
             rightSlot: item.rightSlot,
             onSelect: () => onChange(item.value),
             leftSlot: <Icon icon={value === item.value ? 'check' : 'empty'} />,

src-web/components/core/Tabs/Tabs.tsx

@@ -114,7 +114,7 @@ export function Tabs({
                     }
                     className={btnClassName}
                   >
-                    {option && 'shortLabel' in option
+                    {option && 'shortLabel' in option && option.shortLabel
                       ? option.shortLabel
                       : (option?.label ?? 'Unknown')}
                     {t.rightSlot}