feat: handle unprotected session expiration (#747)

* feat: hide note contents if the protection expires when the protected note is open and wasn't edited for a while

* feat: handle session expiration for opened protected note for both plain advanced editors

* fix: if after canceling  session expiry modal only one unprotected note stays selected, show its contents in the editor

* refactor: handle session expiration for opened protected note (move the logic to web client)

* feat: handle the case of selecting "Don't remember" option in session expiry dialog

* test (WIP): add unit tests for protecting opened note after the session has expired

* test: add remaining unit tests

* refactor: move the opened note protection logic to "editor_view"

* refactor: reviewer comments
- don't rely on user signed-in/out status to require authentication for protected note
- remove unnecessary async/awaits
- better wording on ui

* refactor: reviewer's comments:
 - use snjs method to check if "Don't remember" option is selected in authentication modal
 - move the constant to snjs
 - fix eslint error

* refactor: avoid `any` type for `appEvent` payload

* test: add unit tests

* chore: update function name

* refactor: use simpler protection session event types

* refactor: protected access terminology

* refactor: start counting idle timer after every edit (instead of counting by interval in spite of edits)

* test: unit tests

* style: don't give extra brightness to the "View Note"/"Authenticate" button on hover/focus

* chore: bump snjs version

Co-authored-by: Mo Bitar <me@bitar.io>

app/assets/javascripts/components/AccountMenu/Protections.tsx

@@ -1,100 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { FunctionalComponent } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
-import { useEffect } from 'preact/hooks';
-import { ApplicationEvent } from '@standardnotes/snjs';
-import { isSameDay } from '@/utils';
-
-type Props = {
-  application: WebApplication;
-};
-
-const Protections: FunctionalComponent<Props> = ({ application }) => {
-  const enableProtections = () => {
-    application.clearProtectionSession();
-  };
-
-  const [hasProtections, setHasProtections] = useState(() => application.hasProtectionSources());
-
-  const getProtectionsDisabledUntil = useCallback((): string | null => {
-    const protectionExpiry = application.getProtectionSessionExpiryDate();
-    const now = new Date();
-    if (protectionExpiry > now) {
-      let f: Intl.DateTimeFormat;
-      if (isSameDay(protectionExpiry, now)) {
-        f = new Intl.DateTimeFormat(undefined, {
-          hour: 'numeric',
-          minute: 'numeric'
-        });
-      } else {
-        f = new Intl.DateTimeFormat(undefined, {
-          weekday: 'long',
-          day: 'numeric',
-          month: 'short',
-          hour: 'numeric',
-          minute: 'numeric'
-        });
-      }
-
-      return f.format(protectionExpiry);
-    }
-    return null;
-  }, [application]);
-
-  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil());
-
-  useEffect(() => {
-    const removeProtectionSessionExpiryDateChangedObserver = application.addEventObserver(
-      async () => {
-        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
-      },
-      ApplicationEvent.ProtectionSessionExpiryDateChanged
-    );
-
-    const removeKeyStatusChangedObserver = application.addEventObserver(
-      async () => {
-        setHasProtections(application.hasProtectionSources());
-      },
-      ApplicationEvent.KeyStatusChanged
-    );
-
-    return () => {
-      removeProtectionSessionExpiryDateChangedObserver();
-      removeKeyStatusChangedObserver();
-    };
-  }, [application, getProtectionsDisabledUntil]);
-
-  if (!hasProtections) {
-    return null;
-  }
-
-  return (
-    <div className="sk-panel-section">
-      <div className="sk-panel-section-title">Protections</div>
-      {protectionsDisabledUntil && (
-        <div className="sk-panel-section-subtitle info">
-          Protections are disabled until {protectionsDisabledUntil}
-        </div>
-      )}
-      {!protectionsDisabledUntil && (
-        <div className="sk-panel-section-subtitle info">
-          Protections are enabled
-        </div>
-      )}
-      <p className="sk-p">
-        Actions like viewing protected notes, exporting decrypted backups,
-        or revoking an active session, require additional authentication
-        like entering your account password or application passcode.
-      </p>
-      {protectionsDisabledUntil && (
-        <div className="sk-panel-row">
-          <button className="sn-button small info" onClick={enableProtections}>
-            Enable protections
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Protections;