125 lines
6.3 KiB
Plaintext
125 lines
6.3 KiB
Plaintext
package templates
|
|
|
|
import "dealroom/internal/model"
|
|
import "fmt"
|
|
|
|
templ TeamPage(profile *model.Profile, members []*model.Profile) {
|
|
@Layout(profile, "team") {
|
|
<div class="space-y-5">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Team</h1>
|
|
<p class="text-sm text-gray-500 mt-1">{ fmt.Sprintf("%d members", len(members)) } in your organization.</p>
|
|
</div>
|
|
if profile.Role == "owner" || profile.Role == "admin" {
|
|
<button onclick="document.getElementById('inviteModal').classList.remove('hidden')" class="h-9 px-4 rounded-lg bg-teal-500 text-white text-sm font-medium flex items-center gap-1.5 hover:bg-teal-600 transition">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
|
|
Invite Member
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<div class="bg-gray-900 rounded-lg border border-gray-800">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-gray-800">
|
|
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
|
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
|
|
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
|
|
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-800/50">
|
|
for _, m := range members {
|
|
<tr class="hover:bg-gray-800/30 transition">
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-full bg-teal-500/10 flex items-center justify-center text-xs font-bold text-teal-400">
|
|
{ initials(m.FullName) }
|
|
</div>
|
|
<span class="text-sm font-medium">{ m.FullName }</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-xs text-gray-500 font-mono">{ m.Email }</td>
|
|
<td class="px-4 py-3">@roleBadge(m.Role)</td>
|
|
<td class="px-4 py-3 text-xs text-gray-500">{ m.CreatedAt.Format("Jan 2, 2006") }</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invite Modal -->
|
|
if profile.Role == "owner" || profile.Role == "admin" {
|
|
<div id="inviteModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-black/60" onclick="document.getElementById('inviteModal').classList.add('hidden')"></div>
|
|
<div class="relative bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-md mx-4 p-6">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-lg font-bold">Invite Team Member</h2>
|
|
<button onclick="document.getElementById('inviteModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
</div>
|
|
<form hx-post="/invites/create" hx-target="#inviteResult" hx-swap="innerHTML" class="space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-400 mb-1">Email Address</label>
|
|
<input type="email" name="email" required class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none"/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-400 mb-1">Role</label>
|
|
<select name="role" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none">
|
|
<option value="member">Member</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="w-full px-4 py-2 rounded-lg bg-teal-500 text-white text-sm font-medium hover:bg-teal-600 transition">Generate Invite Link</button>
|
|
</form>
|
|
<div id="inviteResult" class="mt-4"></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
|
|
templ InviteAccept(token string, email string, orgName string) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Join { orgName } - Dealspace AI</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center bg-gray-950">
|
|
<div class="w-full max-w-md mx-4">
|
|
<div class="bg-gray-900 border border-gray-800 rounded-xl p-8">
|
|
<div class="flex items-center gap-2 mb-6">
|
|
<div class="w-8 h-8 rounded-lg bg-teal-500 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
|
|
</div>
|
|
<span class="font-bold text-lg text-white">Dealspace AI</span>
|
|
</div>
|
|
|
|
<h1 class="text-xl font-bold text-white mb-2">Join { orgName }</h1>
|
|
<p class="text-sm text-gray-400 mb-6">You've been invited as <span class="text-teal-400">{ email }</span>. Set your name and password to continue.</p>
|
|
|
|
<form action="/invites/accept-submit" method="POST" class="space-y-4">
|
|
<input type="hidden" name="token" value={ token }/>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-400 mb-1">Full Name</label>
|
|
<input type="text" name="name" required class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none"/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-400 mb-1">Password</label>
|
|
<input type="password" name="password" required class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none"/>
|
|
</div>
|
|
<button type="submit" class="w-full px-4 py-2 rounded-lg bg-teal-500 text-white text-sm font-medium hover:bg-teal-600 transition">Join Organization</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|