127 lines
4.3 KiB
XML
127 lines
4.3 KiB
XML
import { LockIconsProps } from "./welcome-types.ts";
|
|
|
|
/**
|
|
* LockIcons Component
|
|
* Displays encryption status icons (green locked or red unlocked)
|
|
* Centered absolutely within parent container
|
|
*
|
|
* @param isPasswordSet - Whether encryption password is set
|
|
* @param isSkipped - Whether user skipped encryption setup
|
|
* @param onClearSkip - Handler to re-enable encryption setup
|
|
*/
|
|
export default function LockIcon(
|
|
{
|
|
isPasswordSet,
|
|
isSkipped,
|
|
onClearSkip,
|
|
onChangePin,
|
|
isEncrypted,
|
|
onRequestPin,
|
|
}: LockIconsProps,
|
|
) {
|
|
return (
|
|
<>
|
|
{/* Green closed lock icon when encryption is enabled */}
|
|
{isPasswordSet && (
|
|
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<button
|
|
type="button"
|
|
onClick={onChangePin}
|
|
class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-300 rounded"
|
|
title="Click to change your PIN"
|
|
aria-label="Change encryption PIN"
|
|
>
|
|
<svg
|
|
class="w-5 h-5 text-green-600"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-label="Encryption enabled"
|
|
>
|
|
<path d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zM8 6a2 2 0 114 0v2H8V6zm2 6a1 1 0 011 1v2a1 1 0 11-2 0v-2a1 1 0 011-1z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Red open lock button when encryption is skipped */}
|
|
{isSkipped && (
|
|
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<button
|
|
type="button"
|
|
onClick={onClearSkip}
|
|
class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-red-300 rounded"
|
|
title="Click to enable encryption setup"
|
|
aria-label="Enable encryption"
|
|
>
|
|
<svg
|
|
class="w-5 h-5 text-red-600"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
stroke="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M7 8V5a3 3 0 116 0"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<rect
|
|
x="4"
|
|
y="9"
|
|
width="13"
|
|
height="9"
|
|
rx="1.5"
|
|
fill="currentColor"
|
|
/>
|
|
<rect
|
|
x="9.5"
|
|
y="14.5"
|
|
width="1"
|
|
height="2"
|
|
rx="0.5"
|
|
fill="white"
|
|
/>
|
|
<rect
|
|
x="9"
|
|
y="12"
|
|
width="3"
|
|
height="5"
|
|
rx="2"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Yellow caution icon when account is encrypted but this device has no PIN yet */}
|
|
{isEncrypted && !isPasswordSet && !isSkipped && (
|
|
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<button
|
|
type="button"
|
|
onClick={onRequestPin}
|
|
class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-300 rounded"
|
|
title="Encryption active - click to enter your PIN on this device"
|
|
aria-label="Enter encryption PIN on this device"
|
|
>
|
|
<svg
|
|
class="w-5 h-5 text-yellow-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-label="Encryption requires PIN on this device"
|
|
>
|
|
<path d="M8.257 3.099c.765-1.36 2.681-1.36 3.446 0l6.518 11.59C19.002 16.37 18.135 18 16.708 18H3.292c-1.427 0-2.294-1.63-1.513-3.31l6.478-11.59z" />
|
|
<path d="M11 14a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
<path d="M10 7a1 1 0 00-1 1v3a1 1 0 102 0V8a1 1 0 00-1-1z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|