mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 09:57:50 +08:00
ux: clean security warnings modal and overlays
This commit is contained in:
58
src/App.tsx
58
src/App.tsx
@@ -612,62 +612,68 @@ function App() {
|
||||
|
||||
{/* Security Modal */}
|
||||
{showSecurityModal && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
||||
onClick={() => setShowSecurityModal(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Security Limitations</h3>
|
||||
<div className="text-sm text-slate-300 space-y-2">
|
||||
<SecurityWarnings />
|
||||
</div>
|
||||
<button
|
||||
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
|
||||
onClick={() => setShowSecurityModal(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Storage Modal */}
|
||||
{showStorageModal && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
||||
onClick={() => setShowStorageModal(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Storage Details</h3>
|
||||
<div className="text-sm text-slate-300 space-y-2">
|
||||
<StorageDetails localItems={localItems} sessionItems={sessionItems} />
|
||||
</div>
|
||||
<button
|
||||
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
|
||||
onClick={() => setShowStorageModal(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Clipboard Modal */}
|
||||
{showClipboardModal && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
||||
onClick={() => setShowClipboardModal(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Clipboard Activity</h3>
|
||||
<div className="text-sm text-slate-300 space-y-2">
|
||||
<ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
|
||||
</div>
|
||||
<button
|
||||
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
|
||||
onClick={() => setShowClipboardModal(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lock Confirmation Modal */}
|
||||
{showLockConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
||||
onClick={() => setShowLockConfirm(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-amber-500" />
|
||||
Lock Sensitive Data?
|
||||
|
||||
Reference in New Issue
Block a user