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/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}