113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
import type { User } from "@tensamin/user/context";
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
Button,
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@tensamin/ui";
|
|
import { toLossySixDigitCode } from "@tensamin/shared/code";
|
|
import Text from "@tensamin/markdown/text";
|
|
import { ChevronDown, ChevronUp, Info } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useCrypto } from "@tensamin/crypto/context";
|
|
import { useStorage } from "@tensamin/storage/context";
|
|
import { useUser } from "@tensamin/user/context";
|
|
|
|
export default function Profile({ user }: { user: User }) {
|
|
const [showAdvancedInformation, setShowAdvancedInformation] = useState(false);
|
|
const [sharedSecret, setSharedSecret] = useState("");
|
|
|
|
const { getSharedSecret } = useCrypto();
|
|
const { load } = useStorage();
|
|
const { get } = useUser();
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
void (async () => {
|
|
try {
|
|
const ownId = await load("user_id");
|
|
const privateKey = await load("private_key");
|
|
const ownData = await get(ownId);
|
|
const secret = await getSharedSecret(
|
|
privateKey,
|
|
ownData.public_key,
|
|
user.public_key,
|
|
);
|
|
|
|
if (active) {
|
|
setSharedSecret(secret);
|
|
}
|
|
} catch {
|
|
if (active) {
|
|
setSharedSecret("");
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [get, getSharedSecret, load, user.public_key]);
|
|
|
|
const sharedSecretCode = sharedSecret
|
|
? toLossySixDigitCode(sharedSecret)
|
|
: "------";
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex gap-2 items-center">
|
|
<Avatar className="size-10">
|
|
<AvatarImage src={user.avatar} />
|
|
<AvatarFallback className="text-lg">
|
|
{user.display.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-col">
|
|
<p className="text-lg font-semibold">{user.display}</p>
|
|
<p className="text-muted-foreground">{user.username}</p>
|
|
</div>
|
|
</div>
|
|
<Text value={user.about || ""} />
|
|
<Button
|
|
className="h-auto justify-start gap-1.5 px-0 py-1 text-base font-medium text-white no-underline hover:no-underline"
|
|
variant="link"
|
|
aria-expanded={showAdvancedInformation}
|
|
onClick={() => setShowAdvancedInformation((show) => !show)}
|
|
>
|
|
{showAdvancedInformation ? (
|
|
<ChevronUp className="size-4" />
|
|
) : (
|
|
<ChevronDown className="size-4" />
|
|
)}
|
|
<span>Show advanced information</span>
|
|
</Button>
|
|
{showAdvancedInformation && (
|
|
<div className="flex flex-col">
|
|
<p className="text-white flex gap-1 overflow-hidden text-ellipsis whitespace-nowrap">
|
|
Shared Code: <code>{sharedSecretCode}</code>{" "}
|
|
<Tooltip>
|
|
<TooltipTrigger render={<Info className="size-3.5" />} />
|
|
<TooltipContent>
|
|
You can compare this code with the conversation partner to
|
|
validate that this chat is E2EE
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</p>
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
Iota ID: <code>{user.iota_id}</code>
|
|
</p>
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
User ID: <code>{user.user_id}</code>
|
|
</p>
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
Public Key: <code>{user.public_key}</code>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|