feat: integrate two factor authentication (#626)

* feat: integrate SNJS MFA with web

* fix: create rudimentary typings file for qrcode.react

* chore: lint fixes

* fix: address PR feedback

* fix: address PR feedback

* fix: address PR feedback 2

* fix: replace spread props on TwoFactorAuthWrapper component

* chore: change null check to undefined check

app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx

@@ -40,7 +40,6 @@ const PasscodeLock = observer(({
   const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession());
   const [hasPasscode, setHasPasscode] = useState(application.hasPasscode());
 
-
   const handleAddPassCode = () => {
     setShowPasscodeForm(true);
     setIsPasscodeFocused(true);

app/assets/javascripts/components/DecoratedInput.tsx

@@ -6,6 +6,7 @@ interface Props {
   left?: ComponentChild[];
   right?: ComponentChild[];
   text?: string;
+  onChange?: (text: string) => void;
 }
 
 /**
@@ -17,6 +18,7 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
   left,
   right,
   text,
+  onChange,
 }) => {
   const base =
     'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center gap-4';
@@ -34,6 +36,9 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
           className="w-full no-border color-black focus:shadow-none"
           disabled={disabled}
           value={text}
+          onChange={(e) =>
+            onChange && onChange((e.target as HTMLInputElement).value)
+          }
         />
       </div>
       {right}

app/assets/javascripts/components/NoteTag.tsx

@@ -54,7 +54,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
   const getTabIndex = () => {
     if (focusedTagUuid) {
       return focusedTagUuid === tag.uuid ? 0 : -1;
-    } 
+    }
     if (autocompleteInputFocused) {
       return -1;
     }

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -24,7 +24,7 @@ const NotesContextMenu = observer(({ application, appState }: Props) => {
   );
 
   useCloseOnClickOutside(
-    contextMenuRef, 
+    contextMenuRef,
     (open: boolean) => appState.notes.setContextMenuOpen(open)
   );