38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { AppState } from '@/UIModels/AppState'
|
|
|
|
type Props = {
|
|
appState: AppState
|
|
onViewNote: () => void
|
|
hasProtectionSources: boolean
|
|
}
|
|
|
|
const ProtectedNoteOverlay = ({ appState, onViewNote, hasProtectionSources }: Props) => {
|
|
const instructionText = hasProtectionSources
|
|
? 'Authenticate to view this note.'
|
|
: 'Add a passcode or create an account to require authentication to view this note.'
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center max-w-md">
|
|
<h1 className="text-2xl m-0 w-full">This note is protected</h1>
|
|
<p className="text-lg mt-2 w-full">{instructionText}</p>
|
|
<div className="mt-4 flex gap-3">
|
|
{!hasProtectionSources && (
|
|
<button
|
|
className="sn-button small info"
|
|
onClick={() => {
|
|
appState.accountMenu.setShow(true)
|
|
}}
|
|
>
|
|
Open account menu
|
|
</button>
|
|
)}
|
|
<button className="sn-button small outlined normal-focus-brightness" onClick={onViewNote}>
|
|
{hasProtectionSources ? 'Authenticate' : 'View Note'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProtectedNoteOverlay
|