Merge branch 'release/10.3.0'

2021-12-10 11:59:20 -06:00
parent 1f09a013e2 d5f75fee84
commit 397cdce19b
8 changed files with 268 additions and 227 deletions
--- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
@@ -70,16 +70,19 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
              <div className="my-0.5 font-bold">{user.email}</div>
              <span className="color-neutral">{application.getHost()}</span>
            </div>
-            <div className="flex items-center justify-between px-3 mb-2">
+            <div className="flex items-start justify-between px-3 mb-2">
              {isSyncingInProgress ? (
                <div className="flex items-center color-info font-semibold">
                  <div className="sk-spinner w-5 h-5 mr-2 spinner-info"></div>
                  Syncing...
                </div>
              ) : (
-                <div className="flex items-center success font-semibold">
-                  <Icon type="check-circle" className="mr-2" />
-                  Last synced: {lastSyncDate}
+                <div className="flex items-start">
+                  <Icon type="check-circle" className="mr-2 success" />
+                  <div>
+                    <div class="font-semibold success">Last synced:</div>
+                    <div class="color-text">{lastSyncDate}</div>
+                  </div>
                </div>
              )}
              <div
--- a/app/assets/javascripts/components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
@@ -34,7 +34,7 @@ export const SignInPane: FunctionComponent<Props> = observer(

    useEffect(() => {
      if (emailInputRef?.current) {
-        emailInputRef.current!.focus();
+        emailInputRef.current?.focus();
      }
    }, []);

@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(

    const signIn = () => {
      setIsSigningIn(true);
-      emailInputRef?.current!.blur();
-      passwordInputRef?.current!.blur();
+      emailInputRef?.current?.blur();
+      passwordInputRef?.current?.blur();

      application
        .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
            application.alertService.alert(err);
          }
          setPassword('');
-          passwordInputRef?.current!.blur();
+          passwordInputRef?.current?.blur();
        })
        .finally(() => {
          setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
      e.preventDefault();

      if (!email || email.length === 0) {
-        emailInputRef?.current!.focus();
+        emailInputRef?.current?.focus();
        return;
      }

      if (!password || password.length === 0) {
-        passwordInputRef?.current!.focus();
+        passwordInputRef?.current?.focus();
        return;
      }

@@ -134,69 +134,67 @@ export const SignInPane: FunctionComponent<Props> = observer(
          />
          <div className="sn-account-menu-headline">Sign in</div>
        </div>
-        <form onSubmit={handleSignInFormSubmit}>
-          <div className="px-3 mb-1">
-            <InputWithIcon
-              className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
-              icon="email"
-              inputType="email"
-              placeholder="Email"
-              value={email}
-              onChange={handleEmailChange}
-              onFocus={resetInvalid}
-              onKeyDown={handleKeyDown}
-              disabled={isSigningIn}
-              ref={emailInputRef}
-            />
-            <InputWithIcon
-              className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
-              icon="password"
-              inputType={showPassword ? 'text' : 'password'}
-              placeholder="Password"
-              value={password}
-              onChange={handlePasswordChange}
-              onFocus={resetInvalid}
-              onKeyDown={handleKeyDown}
-              disabled={isSigningIn}
-              toggle={{
-                toggleOnIcon: 'eye-off',
-                toggleOffIcon: 'eye',
-                title: 'Show password',
-                toggled: showPassword,
-                onClick: setShowPassword,
-              }}
-              ref={passwordInputRef}
-            />
-            {isInvalid ? (
-              <div className="color-dark-red my-2">
-                Invalid email or password.
-              </div>
-            ) : null}
-            <Button
-              className="btn-w-full mt-1 mb-3"
-              label={isSigningIn ? 'Signing in...' : 'Sign in'}
-              type="primary"
-              onClick={handleSignInFormSubmit}
-              disabled={isSigningIn}
-            />
+        <div className="px-3 mb-1">
+          <InputWithIcon
+            className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
+            icon="email"
+            inputType="email"
+            placeholder="Email"
+            value={email}
+            onChange={handleEmailChange}
+            onFocus={resetInvalid}
+            onKeyDown={handleKeyDown}
+            disabled={isSigningIn}
+            ref={emailInputRef}
+          />
+          <InputWithIcon
+            className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
+            icon="password"
+            inputType={showPassword ? 'text' : 'password'}
+            placeholder="Password"
+            value={password}
+            onChange={handlePasswordChange}
+            onFocus={resetInvalid}
+            onKeyDown={handleKeyDown}
+            disabled={isSigningIn}
+            toggle={{
+              toggleOnIcon: 'eye-off',
+              toggleOffIcon: 'eye',
+              title: 'Show password',
+              toggled: showPassword,
+              onClick: setShowPassword,
+            }}
+            ref={passwordInputRef}
+          />
+          {isInvalid ? (
+            <div className="color-dark-red my-2">
+              Invalid email or password.
+            </div>
+          ) : null}
+          <Button
+            className="btn-w-full mt-1 mb-3"
+            label={isSigningIn ? 'Signing in...' : 'Sign in'}
+            type="primary"
+            onClick={handleSignInFormSubmit}
+            disabled={isSigningIn}
+          />
+          <Checkbox
+            name="is-ephemeral"
+            label="Stay signed in"
+            checked={!isEphemeral}
+            disabled={isSigningIn}
+            onChange={handleEphemeralChange}
+          />
+          {notesAndTagsCount > 0 ? (
            <Checkbox
-              name="is-ephemeral"
-              label="Stay signed in"
-              checked={!isEphemeral}
+              name="should-merge-local"
+              label={`Merge local data (${notesAndTagsCount} notes and tags)`}
+              checked={shouldMergeLocal}
              disabled={isSigningIn}
-              onChange={handleEphemeralChange}
+              onChange={handleShouldMergeChange}
            />
-            {notesAndTagsCount > 0 ? (
-              <Checkbox
-                name="should-merge-local"
-                label={`Merge local data (${notesAndTagsCount} notes and tags)`}
-                checked={shouldMergeLocal}
-                disabled={isSigningIn}
-                onChange={handleShouldMergeChange}
-              />
-            ) : null}
-          </div>
-        </form>
+          ) : null}
+        </div>
        <div className="h-1px my-2 bg-border"></div>
        <AdvancedOptions
          appState={appState}
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -2,11 +2,11 @@ import { WebApplication } from '@/ui_models/application';
 import { CollectionSort, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Menu } from './menu/Menu';
 import { MenuItem, MenuItemSeparator, MenuItemType } from './menu/MenuItem';
-import { toDirective } from './utils';
+import { toDirective, useCloseOnClickOutside } from './utils';

 type Props = {
  application: WebApplication;
@@ -108,8 +108,16 @@ flex flex-col py-2 bottom-0 left-2 absolute';
      application.setPreference(PrefKey.NotesHideProtected, !hideProtected);
    };

+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useCloseOnClickOutside(menuRef as any, (open: boolean) => {
+      if (!open) {
+        setShowMenuFalse();
+      }
+    });
+
    return (
-      <div className={menuClassName}>
+      <div ref={menuRef} className={menuClassName}>
        <Menu a11yLabel="Sort by" closeMenu={setShowMenuFalse}>
          <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
            Sort by
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -76,55 +76,67 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
    }, [focusModeEnabled]);

    const reloadThemes = useCallback(() => {
-      application.streamItems(ContentType.Theme, () => {
-        const themes = application.getDisplayableItems(
-          ContentType.Theme
-        ) as SNTheme[];
-        setThemes(
-          themes.sort((a, b) => {
-            const aIsLayerable = a.isLayerable();
-            const bIsLayerable = b.isLayerable();
+      const themes = application.getDisplayableItems(
+        ContentType.Theme
+      ) as SNTheme[];
+      setThemes(
+        themes.sort((a, b) => {
+          const aIsLayerable = a.isLayerable();
+          const bIsLayerable = b.isLayerable();

-            if (aIsLayerable && !bIsLayerable) {
-              return 1;
-            } else if (!aIsLayerable && bIsLayerable) {
-              return -1;
-            } else {
-              return a.package_info.name.toLowerCase() <
-                b.package_info.name.toLowerCase()
-                ? -1
-                : 1;
-            }
-          })
-        );
-        setDefaultThemeOn(
-          !themes.find((theme) => theme.active && !theme.isLayerable())
-        );
-      });
+          if (aIsLayerable && !bIsLayerable) {
+            return 1;
+          } else if (!aIsLayerable && bIsLayerable) {
+            return -1;
+          } else {
+            return a.package_info.name.toLowerCase() <
+              b.package_info.name.toLowerCase()
+              ? -1
+              : 1;
+          }
+        })
+      );
+      setDefaultThemeOn(
+        !themes.find((theme) => theme.active && !theme.isLayerable())
+      );
    }, [application]);

    const reloadToggleableComponents = useCallback(() => {
-      application.streamItems(ContentType.Component, () => {
-        const toggleableComponents = (
-          application.getDisplayableItems(
-            ContentType.Component
-          ) as SNComponent[]
-        ).filter((component) =>
-          [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
-            component.area
-          )
-        );
-        setToggleableComponents(toggleableComponents);
-      });
+      const toggleableComponents = (
+        application.getDisplayableItems(ContentType.Component) as SNComponent[]
+      ).filter((component) =>
+        [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
+          component.area
+        )
+      );
+      setToggleableComponents(toggleableComponents);
    }, [application]);

    useEffect(() => {
-      reloadThemes();
-    }, [reloadThemes]);
+      const cleanupItemStream = application.streamItems(
+        ContentType.Theme,
+        () => {
+          reloadThemes();
+        }
+      );
+
+      return () => {
+        cleanupItemStream();
+      };
+    }, [application, reloadThemes]);

    useEffect(() => {
-      reloadToggleableComponents();
-    }, [reloadToggleableComponents]);
+      const cleanupItemStream = application.streamItems(
+        ContentType.Component,
+        () => {
+          reloadToggleableComponents();
+        }
+      );
+
+      return () => {
+        cleanupItemStream();
+      };
+    }, [application, reloadToggleableComponents]);

    useEffect(() => {
      if (themesMenuOpen) {
@@ -274,10 +286,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
            </Disclosure>
          ) : null}
          {toggleableComponents.map((component) => (
-            <Switch
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-              checked={component.active}
-              onChange={() => {
+            <button
+              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+              onClick={() => {
                toggleComponent(component);
              }}
            >
@@ -285,7 +296,8 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
                <Icon type="window" className="color-neutral mr-2" />
                {component.name}
              </div>
-            </Switch>
+              <Switch checked={component.active} className="px-0" />
+            </button>
          ))}
          <FocusModeSwitch
            application={application}
--- a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
@@ -17,112 +17,124 @@ interface IProps {
  appState: AppState;
 }

-export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application, appState }) => {
-  const [activationCode, setActivationCode] = useState('');
-  const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false);
-  const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
-  const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] = useState(false);
+export const OfflineSubscription: FunctionalComponent<IProps> = observer(
+  ({ application, appState }) => {
+    const [activationCode, setActivationCode] = useState('');
+    const [isSuccessfullyActivated, setIsSuccessfullyActivated] =
+      useState(false);
+    const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
+    const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] =
+      useState(false);

-  useEffect(() => {
-    if (application.hasOfflineRepo()) {
-      setHasUserPreviouslyStoredCode(true);
+    useEffect(() => {
+      if (application.hasOfflineRepo()) {
+        setHasUserPreviouslyStoredCode(true);
+      }
+    }, [application]);
+
+    const shouldShowOfflineSubscription = () => {
+      return !application.hasAccount() || application.isThirdPartyHostUsed();
+    };
+
+    const handleSubscriptionCodeSubmit = async (
+      event: TargetedEvent<HTMLFormElement, Event>
+    ) => {
+      event.preventDefault();
+
+      const result = await application.setOfflineFeaturesCode(activationCode);
+
+      if (result?.error) {
+        await application.alertService.alert(result.error);
+      } else {
+        setIsSuccessfullyActivated(true);
+        setHasUserPreviouslyStoredCode(true);
+        setIsSuccessfullyRemoved(false);
+      }
+    };
+
+    const handleRemoveOfflineKey = async () => {
+      await application.deleteOfflineFeatureRepo();
+
+      setIsSuccessfullyActivated(false);
+      setHasUserPreviouslyStoredCode(false);
+      setActivationCode('');
+      setIsSuccessfullyRemoved(true);
+    };
+
+    const handleRemoveClick = async () => {
+      application.alertService
+        .confirm(
+          STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
+          'Remove offline key?',
+          'Remove Offline Key',
+          ButtonType.Danger,
+          'Cancel'
+        )
+        .then(async (shouldRemove: boolean) => {
+          if (shouldRemove) {
+            await handleRemoveOfflineKey();
+          }
+        })
+        .catch((err: string) => {
+          application.alertService.alert(err);
+        });
+    };
+
+    if (!shouldShowOfflineSubscription()) {
+      return null;
    }
-  }, [application]);

-  const shouldShowOfflineSubscription = () => {
-    return !application.hasAccount() || application.isCustomServerHostUsed();
-  };
-
-  const handleSubscriptionCodeSubmit = async (event: TargetedEvent<HTMLFormElement, Event>) => {
-    event.preventDefault();
-
-    const result = await application.setOfflineFeaturesCode(activationCode);
-
-    if (result?.error) {
-      await application.alertService.alert(result.error);
-    } else {
-      setIsSuccessfullyActivated(true);
-      setHasUserPreviouslyStoredCode(true);
-      setIsSuccessfullyRemoved(false);
-    }
-  };
-
-  const handleRemoveOfflineKey = async () => {
-    await application.deleteOfflineFeatureRepo();
-
-    setIsSuccessfullyActivated(false);
-    setHasUserPreviouslyStoredCode(false);
-    setActivationCode('');
-    setIsSuccessfullyRemoved(true);
-  };
-
-  const handleRemoveClick = async () => {
-    application.alertService.confirm(
-      STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
-      'Remove offline key?',
-      'Remove Offline Key',
-      ButtonType.Danger,
-      'Cancel'
-    )
-      .then(async (shouldRemove: boolean) => {
-        if (shouldRemove) {
-          await handleRemoveOfflineKey();
-        }
-      })
-      .catch((err: string) => {
-        application.alertService.alert(err);
-      });
-  };
-
-  if (!shouldShowOfflineSubscription()) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className='flex items-center justify-between'>
-        <div className='flex flex-col mt-3 w-full'>
-          <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
-          <form onSubmit={handleSubscriptionCodeSubmit}>
-            <div className={'mt-2'}>
-              {!hasUserPreviouslyStoredCode && (
-                <DecoratedInput
-                  onChange={(code) => setActivationCode(code)}
-                  placeholder={'Offline Subscription Code'}
-                  text={activationCode}
-                  disabled={isSuccessfullyActivated}
-                  className={'mb-3'}
+    return (
+      <>
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col mt-3 w-full">
+            <Subtitle>
+              {!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription
+            </Subtitle>
+            <form onSubmit={handleSubscriptionCodeSubmit}>
+              <div className={'mt-2'}>
+                {!hasUserPreviouslyStoredCode && (
+                  <DecoratedInput
+                    onChange={(code) => setActivationCode(code)}
+                    placeholder={'Offline Subscription Code'}
+                    text={activationCode}
+                    disabled={isSuccessfullyActivated}
+                    className={'mb-3'}
+                  />
+                )}
+              </div>
+              {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
+                <div className={'mt-3 mb-3 info'}>
+                  Your offline subscription code has been successfully{' '}
+                  {isSuccessfullyActivated ? 'activated' : 'removed'}.
+                </div>
+              )}
+              {hasUserPreviouslyStoredCode && (
+                <Button
+                  type="danger"
+                  label="Remove offline key"
+                  onClick={() => {
+                    handleRemoveClick();
+                  }}
                />
              )}
-            </div>
-            {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
-              <div className={'mt-3 mb-3 info'}>
-                Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}.
-              </div>
-            )}
-            {hasUserPreviouslyStoredCode && (
-              <Button
-                type='danger'
-                label='Remove offline key'
-                onClick={() => {
-                  handleRemoveClick();
-                }}
-              />
-            )}
-            {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
-              <Button
-                label={'Submit'}
-                type='primary'
-                disabled={activationCode === ''}
-                onClick={(event) =>
-                  handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
-                }
-              />
-            )}
-          </form>
+              {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
+                <Button
+                  label={'Submit'}
+                  type="primary"
+                  disabled={activationCode === ''}
+                  onClick={(event) =>
+                    handleSubscriptionCodeSubmit(
+                      event as TargetedEvent<HTMLFormElement>
+                    )
+                  }
+                />
+              )}
+            </form>
+          </div>
        </div>
-      </div>
-      <HorizontalSeparator classes='mt-8 mb-5' />
-    </>
-  );
-});
+        <HorizontalSeparator classes="mt-8 mb-5" />
+      </>
+    );
+  }
+);
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -256,6 +256,10 @@
  margin-right: 0.75rem;
 }

+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mr-12 {
  margin-right: 3rem;
 }
@@ -283,6 +287,10 @@
  margin-bottom: 0.5rem;
 }

+.max-w-1\/2 {
+  max-width: 50%;
+}
+
 .max-w-3\/4 {
  max-width: 75%;
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "standard-notes-web",
-  "version": "3.9.8",
+  "version": "3.9.10",
  "license": "AGPL-3.0-or-later",
  "repository": {
    "type": "git",
@@ -85,7 +85,7 @@
    "@reach/listbox": "^0.16.2",
    "@standardnotes/features": "1.10.2",
    "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.20.1",
+    "@standardnotes/snjs": "2.20.3",
    "mobx": "^6.3.5",
    "mobx-react-lite": "^3.2.2",
    "preact": "^10.5.15",
--- a/yarn.lock
+++ b/yarn.lock
@@ -2614,10 +2614,10 @@
    buffer "^6.0.3"
    libsodium-wrappers "^0.7.9"

-"@standardnotes/snjs@2.20.1":
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.1.tgz#4813adbfd16a1c373357bd4c7ece3085abf142b4"
-  integrity sha512-wJILt7YerLFaZTKoIZaCkqSuvpVWoVKqCVjP0KNHrMknnbgMHZygHqrb9sr57JL1AcNCkAULEFS/kev2GYTG3Q==
+"@standardnotes/snjs@2.20.3":
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.3.tgz#11fe962dfb017be459e856b9fbc6311c5046a0b0"
+  integrity sha512-FHog3p3SuMvTXsEl76UenbjY8PS6VL/b6MjaC9whJR5ZwsvmLwE0G16dWZ+z+izm+CsRaHMWU8R2cy7RG7HjZg==
  dependencies:
    "@standardnotes/auth" "^3.8.1"
    "@standardnotes/common" "^1.2.1"