feat: two factor authentication segment in preferences with mocked st…

…ate (#600)

app/assets/javascripts/app.ts

@@ -65,7 +65,7 @@ import { NotesContextMenuDirective } from './components/NotesContextMenu';
 import { NotesOptionsPanelDirective } from './components/NotesOptionsPanel';
 import { IconDirective } from './components/Icon';
 import { NoteTagsContainerDirective } from './components/NoteTagsContainer';
-import { PreferencesDirective } from './components/preferences';
+import { PreferencesDirective } from './preferences';
 
 function reloadHiddenFirefoxTab(): boolean {
   /**

app/assets/javascripts/components/DecoratedInput.tsx

@@ -0,0 +1,42 @@
+import { FunctionalComponent, ComponentChild } from 'preact';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+  left?: ComponentChild[];
+  right?: ComponentChild[];
+  text?: string;
+}
+
+/**
+ * Input that can be decorated on the left and right side
+ */
+export const DecoratedInput: FunctionalComponent<Props> = ({
+  className = '',
+  disabled = false,
+  left,
+  right,
+  text,
+}) => {
+  const base =
+    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center gap-4';
+  const stateClasses = disabled
+    ? 'no-border bg-grey-5'
+    : 'border-solid border-1 border-gray-300';
+  const classes = `${base} ${stateClasses} ${className}`;
+
+  return (
+    <div className={classes}>
+      {left}
+      <div className="flex-grow">
+        <input
+          type="text"
+          className="w-full no-border color-black"
+          disabled={disabled}
+          value={text}
+        />
+      </div>
+      {right}
+    </div>
+  );
+};

app/assets/javascripts/components/Icon.tsx

@@ -23,6 +23,8 @@ import SettingsIcon from '../../icons/ic-settings.svg';
 import StarIcon from '../../icons/ic-star.svg';
 import ThemesIcon from '../../icons/ic-themes.svg';
 import UserIcon from '../../icons/ic-user.svg';
+import CopyIcon from '../../icons/ic-copy.svg';
+import DownloadIcon from '../../icons/ic-download.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -52,6 +54,8 @@ const ICONS = {
   star: StarIcon,
   themes: ThemesIcon,
   user: UserIcon,
+  copy: CopyIcon,
+  download: DownloadIcon,
 };
 
 export type IconType = keyof typeof ICONS;
@@ -61,7 +65,7 @@ type Props = {
   className?: string;
 };
 
-export const Icon: FunctionalComponent<Props> = ({ type, className }) => {
+export const Icon: FunctionalComponent<Props> = ({ type, className = '' }) => {
   const IconComponent = ICONS[type];
   return <IconComponent className={`sn-icon ${className}`} />;
 };

app/assets/javascripts/components/IconButton.tsx

@@ -1,53 +1,38 @@
 import { FunctionComponent } from 'preact';
 import { Icon, IconType } from './Icon';
 
-const ICON_BUTTON_TYPES: {
-  [type: string]: { className: string };
-} = {
-  normal: {
-    className: '',
-  },
-  primary: {
-    className: 'info',
-  },
-};
-
-export type IconButtonType = keyof typeof ICON_BUTTON_TYPES;
-
-interface IconButtonProps {
+interface Props {
   /**
    * onClick - preventDefault is handled within the component
    */
   onClick: () => void;
 
-  type: IconButtonType;
-
   className?: string;
 
-  iconType: IconType;
+  icon: IconType;
 }
 
 /**
- * CircleButton component with an icon for SPA
+ * IconButton component with an icon
  * preventDefault is already handled within the component
  */
-export const IconButton: FunctionComponent<IconButtonProps> = ({
+export const IconButton: FunctionComponent<Props> = ({
   onClick,
-  type,
   className,
-  iconType,
+  icon,
 }) => {
   const click = (e: MouseEvent) => {
     e.preventDefault();
     onClick();
   };
-  const typeProps = ICON_BUTTON_TYPES[type];
   return (
     <button
-      className={`sn-icon-button ${typeProps.className} ${className ?? ''}`}
+      className={`no-border bg-transparent hover:brightness-130 p-0 ${
+        className ?? ''
+      }`}
       onClick={click}
     >
-      <Icon type={iconType} />
+      <Icon type={icon} />
     </button>
   );
 };

app/assets/javascripts/components/Input.tsx

@@ -0,0 +1,22 @@
+import { FunctionalComponent } from 'preact';
+
+interface Props {
+  text?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Input: FunctionalComponent<Props> = ({
+  className = '',
+  disabled = false,
+  text,
+}) => {
+  const base = `rounded py-1.5 px-3 text-input my-1 h-8`;
+  const stateClasses = disabled
+    ? 'no-border bg-grey-5'
+    : 'border-solid border-1 border-gray-300';
+  const classes = `${base} ${stateClasses} ${className}`;
+  return (
+    <input type="text" className={classes} disabled={disabled} value={text} />
+  );
+};

app/assets/javascripts/components/RoundIconButton.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent } from 'preact';
+import { Icon, IconType } from './Icon';
+
+type ButtonType = 'normal' | 'primary';
+
+interface Props {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void;
+
+  type: ButtonType;
+
+  className?: string;
+
+  icon: IconType;
+}
+
+/**
+ * IconButton component with an icon
+ * preventDefault is already handled within the component
+ */
+export const RoundIconButton: FunctionComponent<Props> = ({
+  onClick,
+  type,
+  className,
+  icon: iconType,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault();
+    onClick();
+  };
+  const classes = type === 'primary' ? 'info ' : '';
+  return (
+    <button
+      className={`sn-icon-button ${classes} ${className ?? ''}`}
+      onClick={click}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};

app/assets/javascripts/components/Switch.tsx

@@ -12,7 +12,7 @@ export type SwitchProps = HTMLProps<HTMLInputElement> & {
   checked?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
-  children: ComponentChildren;
+  children?: ComponentChildren;
 };
 
 export const Switch: FunctionalComponent<SwitchProps> = (
@@ -22,7 +22,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
   const checked = props.checked ?? checkedState;
   const className = props.className ?? '';
   return (
-    <label className={`sn-component flex justify-between items-center cursor-pointer hover:bg-contrast px-3 ${className}`}>
+    <label
+      className={`sn-component flex justify-between items-center cursor-pointer hover:bg-contrast px-3 ${className}`}
+    >
       {props.children}
       <CustomCheckboxContainer
         checked={checked}