feat: begin working on user auth

2026-08-13 07:06:51 +00:00 · 2025-03-29 14:12:15 -04:00
parent 8429b19c4a
commit bf02015dc7
11 changed files with 562 additions and 118 deletions
@@ -0,0 +1,83 @@
+import { CircleUser } from 'lucide-react';
+import StatusCircle from '~/components/StatusCircle';
+import { Machine, User } from '~/types';
+import cn from '~/utils/cn';
+
+interface UserRowProps {
+	role: string;
+	user: User & { machines: Machine[] };
+}
+
+export default function UserRow({ user, role }: UserRowProps) {
+	const isOnline = user.machines.some((machine) => machine.online);
+	const lastSeen = user.machines.reduce(
+		(acc, machine) => Math.max(acc, new Date(machine.lastSeen).getTime()),
+		0,
+	);
+
+	return (
+		<tr key={user.id}>
+			<td className="pl-0.5 py-2">
+				<div className="flex items-center">
+					{user.profilePicUrl ? (
+						<img
+							src={user.profilePicUrl}
+							alt={user.name}
+							className="w-10 h-10 rounded-full"
+						/>
+					) : (
+						<CircleUser className="w-10 h-10" />
+					)}
+					<div className="ml-4">
+						<p className={cn('font-semibold leading-snug')}>{user.name}</p>
+						<p className="text-sm opacity-50">{user.email}</p>
+					</div>
+				</div>
+			</td>
+			<td className="pl-0.5 py-2">
+				<p>{mapRoleToName(role)}</p>
+			</td>
+			<td className="pl-0.5 py-2">
+				<p className="text-sm text-headplane-600 dark:text-headplane-300">
+					{new Date(user.createdAt).toLocaleDateString()}
+				</p>
+			</td>
+			<td className="pl-0.5 py-2">
+				<span
+					className={cn(
+						'flex items-center gap-x-1 text-sm',
+						'text-headplane-600 dark:text-headplane-300',
+					)}
+				>
+					<StatusCircle isOnline={isOnline} className="w-4 h-4" />
+					<p>{isOnline ? 'Connected' : new Date(lastSeen).toLocaleString()}</p>
+				</span>
+			</td>
+		</tr>
+	);
+}
+
+function mapRoleToName(role: string) {
+	switch (role) {
+		case 'no-oidc':
+			return <p className="opacity-50">Unmanaged</p>;
+		case 'invalid-oidc':
+			return <p className="opacity-50">Invalid</p>;
+		case 'no-role':
+			return <p className="opacity-50">No Role</p>;
+		case 'owner':
+			return 'Owner';
+		case 'admin':
+			return 'Admin';
+		case 'network_admin':
+			return 'Network Admin';
+		case 'it_admin':
+			return 'IT Admin';
+		case 'auditor':
+			return 'Auditor';
+		case 'member':
+			return 'Member';
+		default:
+			return 'Unknown';
+	}
+}