91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import { WebApplication } from '@/UIModels/Application'
|
|
import { FunctionalComponent } from 'preact'
|
|
import { useCallback, useState, useEffect } from 'preact/hooks'
|
|
import { ApplicationEvent } from '@standardnotes/snjs'
|
|
import { isSameDay } from '@/Utils'
|
|
import { PreferencesGroup, PreferencesSegment, Title, Text } from '@/Components/Preferences/PreferencesComponents'
|
|
import { Button } from '@/Components/Button/Button'
|
|
|
|
type Props = {
|
|
application: WebApplication
|
|
}
|
|
|
|
export const Protections: FunctionalComponent<Props> = ({ application }) => {
|
|
const enableProtections = () => {
|
|
application.clearProtectionSession().catch(console.error)
|
|
}
|
|
|
|
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 removeUnprotectedSessionBeginObserver = application.addEventObserver(async () => {
|
|
setProtectionsDisabledUntil(getProtectionsDisabledUntil())
|
|
}, ApplicationEvent.UnprotectedSessionBegan)
|
|
|
|
const removeUnprotectedSessionEndObserver = application.addEventObserver(async () => {
|
|
setProtectionsDisabledUntil(getProtectionsDisabledUntil())
|
|
}, ApplicationEvent.UnprotectedSessionExpired)
|
|
|
|
const removeKeyStatusChangedObserver = application.addEventObserver(async () => {
|
|
setHasProtections(application.hasProtectionSources())
|
|
}, ApplicationEvent.KeyStatusChanged)
|
|
|
|
return () => {
|
|
removeUnprotectedSessionBeginObserver()
|
|
removeUnprotectedSessionEndObserver()
|
|
removeKeyStatusChangedObserver()
|
|
}
|
|
}, [application, getProtectionsDisabledUntil])
|
|
|
|
if (!hasProtections) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<Title>Protections</Title>
|
|
{protectionsDisabledUntil ? (
|
|
<Text className="info">Unprotected access expires at {protectionsDisabledUntil}.</Text>
|
|
) : (
|
|
<Text className="info">Protections are enabled.</Text>
|
|
)}
|
|
<Text className="mt-2">
|
|
Actions like viewing or searching protected notes, exporting decrypted backups, or revoking an active session
|
|
require additional authentication such as entering your account password or application passcode.
|
|
</Text>
|
|
{protectionsDisabledUntil && (
|
|
<Button className="mt-3" variant="primary" label="End Unprotected Access" onClick={enableProtections} />
|
|
)}
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
)
|
|
}
|