f120af3b43
* 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 * chore: put snjs "beta" version * fix: run protection timeout when the note is marked as protected * chore: snjs version bump * refactor: immediately lock the note if it's marked as "Protected" * refactor: rename component, directive and some props * refactor: remove extra check * refactor: rename the method * chore: update snjs version Co-authored-by: Mo Bitar <me@bitar.io>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { Icon, IconType } from '@/components/Icon';
|
|
import {
|
|
Disclosure,
|
|
DisclosureButton,
|
|
DisclosurePanel,
|
|
} from '@reach/disclosure';
|
|
import { FunctionComponent } from 'preact';
|
|
import { MouseEventHandler } from 'react';
|
|
import { useState, useRef, useEffect } from 'preact/hooks';
|
|
|
|
const DisclosureIconButton: FunctionComponent<{
|
|
className?: string;
|
|
icon: IconType;
|
|
onMouseEnter?: MouseEventHandler;
|
|
onMouseLeave?: MouseEventHandler;
|
|
}> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
|
|
<DisclosureButton
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''
|
|
}`}
|
|
>
|
|
<Icon type={icon} />
|
|
</DisclosureButton>
|
|
);
|
|
|
|
/**
|
|
* AuthAppInfoPopup is an info icon that shows a tooltip when clicked
|
|
* Tooltip is dismissible by clicking outside
|
|
*
|
|
* Note: it can be generalized but more use cases are required
|
|
* @returns
|
|
*/
|
|
export const AuthAppInfoTooltip: FunctionComponent = () => {
|
|
const [isClicked, setClicked] = useState(false);
|
|
const [isHover, setHover] = useState(false);
|
|
const ref = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const dismiss = () => setClicked(false);
|
|
document.addEventListener('mousedown', dismiss);
|
|
return () => {
|
|
document.removeEventListener('mousedown', dismiss);
|
|
};
|
|
}, [ref]);
|
|
|
|
return (
|
|
<Disclosure
|
|
open={isClicked || isHover}
|
|
onChange={() => setClicked(!isClicked)}
|
|
>
|
|
<div className="relative">
|
|
<DisclosureIconButton
|
|
icon="info"
|
|
className="mt-1"
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
/>
|
|
<DisclosurePanel>
|
|
<div
|
|
className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay
|
|
py-1.5 px-2 absolute w-103 -top-10 -left-51`}
|
|
>
|
|
Some apps, like Google Authenticator, do not back up and restore
|
|
your secret keys if you lose your device or get a new one.
|
|
</div>
|
|
</DisclosurePanel>
|
|
</div>
|
|
</Disclosure>
|
|
);
|
|
};
|