feat(preferences): 2FA activation dialog with mocked state (#605)

app/assets/javascripts/components/Button.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'preact';
+
+const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content cursor-pointer`;
+
+const normalClass = `${baseClass} bg-default color-text border-solid border-gray-300 border-1 \
+focus:bg-contrast hover:bg-contrast`;
+const primaryClass = `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 \
+focus:brightness-130`;
+
+export const Button: FunctionComponent<{
+  className?: string;
+  type: 'normal' | 'primary';
+  label: string;
+  onClick: () => void;
+}> = ({ type, label, className = '', onClick }) => {
+  const buttonClass = type === 'primary' ? primaryClass : normalClass;
+  return (
+    <button
+      className={`${buttonClass} ${className}`}
+      onClick={(e) => {
+        onClick();
+        e.preventDefault();
+      }}
+    >
+      {label}
+    </button>
+  );
+};

app/assets/javascripts/components/CircleProgress.tsx

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'preact';
+
+export const CircleProgress: FunctionComponent<{
+  percent: number;
+  className?: string;
+}> = ({ percent, className = '' }) => {
+  const size = 16;
+  const ratioStrokeRadius = 0.25;
+  const outerRadius = size / 2;
+
+  const radius = outerRadius * (1 - ratioStrokeRadius);
+  const stroke = outerRadius - radius;
+
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - (percent / 100) * circumference;
+
+  const transition = `transition: 0.35s stroke-dashoffset;`;
+  const transform = `transform: rotate(-90deg);`;
+  const transformOrigin = `transform-origin: 50% 50%;`;
+  const dasharray = `stroke-dasharray: ${circumference} ${circumference};`;
+  const dashoffset = `stroke-dashoffset: ${offset};`;
+  const style = `${transition} ${transform} ${transformOrigin} ${dasharray} ${dashoffset}`;
+  return (
+    <div className="h-5 w-5 min-w-5 min-h-5">
+      <svg viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          stroke="#086DD6"
+          stroke-width={stroke}
+          fill="transparent"
+          r={radius}
+          cx="50%"
+          cy="50%"
+          style={style}
+        />
+      </svg>
+    </div>
+  );
+};

app/assets/javascripts/components/CircleProgressTime.tsx

@@ -0,0 +1,27 @@
+import { FunctionalComponent } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { CircleProgress } from './CircleProgress';
+
+/**
+ * Circular progress bar which runs in a specified time interval
+ * @param time - time interval in ms
+ */
+export const CircleProgressTime: FunctionalComponent<{ time: number }> = ({
+  time,
+}) => {
+  const [percent, setPercent] = useState(0);
+  const interval = time / 100;
+  useEffect(() => {
+    const tick = setInterval(() => {
+      if (percent === 100) {
+        setPercent(0);
+      } else {
+        setPercent(percent + 1);
+      }
+    }, interval);
+    return () => {
+      clearInterval(tick);
+    };
+  });
+  return <CircleProgress percent={percent} />;
+};

app/assets/javascripts/components/DecoratedInput.tsx

@@ -26,12 +26,12 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
   const classes = `${base} ${stateClasses} ${className}`;
 
   return (
-    <div className={classes}>
+    <div className={`${classes} focus-within:ring-info`}>
       {left}
       <div className="flex-grow">
         <input
           type="text"
-          className="w-full no-border color-black"
+          className="w-full no-border color-black focus:shadow-none"
           disabled={disabled}
           value={text}
         />

app/assets/javascripts/components/Icon.tsx

@@ -25,6 +25,7 @@ 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 InfoIcon from '../../icons/ic-info.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -56,6 +57,7 @@ const ICONS = {
   user: UserIcon,
   copy: CopyIcon,
   download: DownloadIcon,
+  info: InfoIcon,
 };
 
 export type IconType = keyof typeof ICONS;

app/assets/javascripts/components/IconButton.tsx

@@ -27,7 +27,7 @@ export const IconButton: FunctionComponent<Props> = ({
   };
   return (
     <button
-      className={`no-border bg-transparent hover:brightness-130 p-0 ${
+      className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
         className ?? ''
       }`}
       onClick={click}

app/assets/javascripts/preferences/PreferencesMenuView.tsx

@@ -0,0 +1,20 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { MenuItem } from './components';
+import { PreferencesMenu } from './preferences-menu';
+
+export const PreferencesMenuView: FunctionComponent<{
+  menu: PreferencesMenu;
+}> = observer(({ menu }) => (
+  <div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
+    {menu.menuItems.map((pref) => (
+      <MenuItem
+        key={pref.id}
+        iconType={pref.icon}
+        label={pref.label}
+        selected={pref.selected}
+        onClick={() => menu.selectPane(pref.id)}
+      />
+    ))}
+  </div>
+));

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -1,28 +1,23 @@
 import { RoundIconButton } from '@/components/RoundIconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { Preferences } from './models/preferences';
-import { PreferencesMenu } from './PreferencesMenu';
-import { HelpAndFeedback } from './panes/HelpFeedback';
+import { HelpAndFeedback, Security } from './panes';
 import { observer } from 'mobx-react-lite';
-import { Security } from './panes/Security';
-
-interface PreferencesViewProps {
-  close: () => void;
-}
+import { PreferencesMenu } from './preferences-menu';
+import { PreferencesMenuView } from './PreferencesMenuView';
 
 const PaneSelector: FunctionComponent<{
-  prefs: Preferences;
-}> = observer(({ prefs }) => {
-  switch (prefs.selectedPaneId) {
+  prefs: PreferencesMenu;
+}> = observer(({ prefs: menu }) => {
+  switch (menu.selectedPaneId) {
     case 'general':
       return null;
     case 'account':
       return null;
     case 'appearance':
       return null;
     case 'security':
-      return <Security prefs={prefs} />;
+      return <Security />;
     case 'listed':
       return null;
     case 'shortcuts':
@@ -37,17 +32,18 @@ const PaneSelector: FunctionComponent<{
 });
 
 const PreferencesCanvas: FunctionComponent<{
-  preferences: Preferences;
+  preferences: PreferencesMenu;
 }> = observer(({ preferences: prefs }) => (
   <div className="flex flex-row flex-grow min-h-0 justify-between">
-    <PreferencesMenu preferences={prefs}></PreferencesMenu>
+    <PreferencesMenuView menu={prefs}></PreferencesMenuView>
     <PaneSelector prefs={prefs} />
   </div>
 ));
 
-const PreferencesView: FunctionComponent<PreferencesViewProps> = observer(
+const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
   ({ close }) => {
-    const prefs = new Preferences();
+    const prefs = new PreferencesMenu();
+
     return (
       <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
         <TitleBar className="items-center justify-between">

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

@@ -12,17 +12,15 @@ export const Text: FunctionComponent = ({ children }) => (
   <p className="text-xs">{children}</p>
 );
 
-export const Button: FunctionComponent<{ label: string; link: string }> = ({
+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 \
+focus:bg-contrast hover:bg-contrast `;
+
+export const LinkButton: FunctionComponent<{ label: string; link: string }> = ({
   label,
   link,
 }) => (
-  <a
-    target="_blank"
-    className="block bg-default color-text rounded border-solid border-1 
-    border-gray-300 px-4 py-2 font-bold text-sm fit-content mt-3
-    focus:bg-contrast hover:bg-contrast "
-    href={link}
-  >
+  <a target="_blank" className={buttonClasses} href={link}>
     {label}
   </a>
 );

app/assets/javascripts/preferences/panes/HelpFeedback.tsx

@@ -1,10 +1,9 @@
 import { FunctionComponent } from 'preact';
-import {} from '../components';
 import {
   Title,
   Subtitle,
   Text,
-  Button,
+  LinkButton,
   PreferencesGroup,
   PreferencesPane,
   PreferencesSegment,
@@ -53,7 +52,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can’t find your question here?</Subtitle>
-        <Button label="Open FAQ" link="https://standardnotes.com/help" />
+        <LinkButton label="Open FAQ" link="https://standardnotes.com/help" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
@@ -68,7 +67,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
           </a>{' '}
           before advocating for a feature request.
         </Text>
-        <Button
+        <LinkButton
           label="Go to the forum"
           link="https://forum.standardnotes.org/"
         />
@@ -82,7 +81,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
           Want to share your feedback with us? Join the Standard Notes Slack
           group for discussions on security, themes, editors and more.
         </Text>
-        <Button
+        <LinkButton
           link="https://standardnotes.com/slack"
           label="Join our Slack group"
         />
@@ -94,7 +93,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
         <Text>
           Send an email to help@standardnotes.org and we’ll sort it out.
         </Text>
-        <Button link="mailto: help@standardnotes.org" label="Email us" />
+        <LinkButton link="mailto: help@standardnotes.org" label="Email us" />
       </PreferencesSegment>
     </PreferencesGroup>
   </PreferencesPane>