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/preferences/components/Content.tsx

@@ -8,9 +8,10 @@ export const Subtitle: FunctionComponent = ({ children }) => (
   <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
 );
 
-export const Text: FunctionComponent = ({ children }) => (
-  <p className="text-xs">{children}</p>
-);
+export const Text: FunctionComponent<{ className?: string }> = ({
+  children,
+  className = '',
+}) => <p className={`${className} text-xs`}>{children}</p>;
 
 const buttonClasses = `block bg-default color-text rounded border-solid \
 border-1 border-gray-300 px-4 py-1.75 font-bold text-sm fit-content mt-3 \

app/assets/javascripts/preferences/components/PreferencesPane.tsx

@@ -14,14 +14,16 @@ export const PreferencesSegment: FunctionComponent = ({ children }) => (
 
 export const PreferencesGroup: FunctionComponent = ({ children }) => (
   <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col gap-2">
-    {!Array.isArray(children)
+    {Array.isArray(children)
       ? children
-      : children.map((c, i, arr) => (
-          <>
-            {c}
-            <HorizontalLine index={i} length={arr.length} />
-          </>
-        ))}
+          .filter((child) => child != undefined && child !== '')
+          .map((child, i, arr) => (
+            <>
+              {child}
+              <HorizontalLine index={i} length={arr.length} />
+            </>
+          ))
+      : children}
   </div>
 );
 

app/assets/javascripts/preferences/components/index.ts

@@ -1,3 +1,3 @@
 export * from './Content';
 export * from './MenuItem';
-export * from './Pane';
+export * from './PreferencesPane';