signedin page, client avatar

This commit is contained in:
Max Peintner
2023-05-19 13:02:09 +02:00
parent d08abbfaa9
commit 7ba6e0f099
6 changed files with 92 additions and 51 deletions

View File

@@ -1,5 +1,5 @@
import { listSessions, server } from "#/lib/zitadel";
import { Avatar, AvatarSize } from "#/ui/Avatar";
import { Avatar } from "#/ui/Avatar";
import { getAllSessionIds } from "#/utils/cookies";
import {
ExclamationTriangleIcon,
@@ -18,7 +18,6 @@ async function loadSessions() {
server,
ids.filter((id: string | undefined) => !!id)
).then((sessions) => {
console.log("ss", sessions.sessions);
return sessions;
});
} else {
@@ -37,16 +36,26 @@ export default async function Page() {
<div className="flex flex-col w-full space-y-1">
{sessions ? (
sessions.map((session: any) => {
const validPassword = session.factors.password?.verifiedAt;
console.log(session);
return (
<Link
href={
`/password?` + new URLSearchParams({ session: session.id })
validPassword
? `/signedin?` +
new URLSearchParams({
loginName: session.factors.user.loginName,
})
: `/password?` +
new URLSearchParams({
loginName: session.factors.user.loginName,
})
}
className="group flex flex-row items-center hover:bg-black/10 dark:hover:bg-white/10 py-3 px-4 rounded-md"
>
<div className="pr-4">
<Avatar
size={AvatarSize.SMALL}
size="small"
loginName={session.factors.user.loginName}
name={session.factors.user.displayName}
/>
@@ -57,18 +66,16 @@ export default async function Page() {
<span className="text-xs opacity-80">
{session.factors.user.loginName}
</span>
{session.factors.password?.verifiedAt && (
{validPassword && (
<span className="text-xs opacity-80">
{moment(
new Date(session.factors.password.verifiedAt)
).fromNow()}
{moment(new Date(validPassword)).fromNow()}
</span>
)}
</div>
<span className="flex-grow"></span>
<div className="relative flex flex-row items-center">
{session.factors.password?.verifiedAt ? (
{validPassword ? (
<div className="absolute h-2 w-2 bg-green-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
) : (
<div className="absolute h-2 w-2 bg-red-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>