@@ -22,6 +22,7 @@
|
||||
<div class="flex items-center gap-6">
|
||||
{% if current_org is defined and current_org %}
|
||||
<a href="/orgs/{{ current_org }}/projects" class="text-sm text-gray-600 hover:text-gray-900">Projects</a>
|
||||
<a href="/orgs/{{ current_org }}/settings/members" class="text-sm text-gray-600 hover:text-gray-900">Members</a>
|
||||
<a href="/orgs/{{ current_org }}/usage" class="text-sm text-gray-600 hover:text-gray-900">Usage</a>
|
||||
{% endif %}
|
||||
{% if orgs is defined and orgs | length > 1 %}
|
||||
|
||||
@@ -1,56 +1,65 @@
|
||||
{% extends "base.html.jinja" %}
|
||||
|
||||
{% block content %}
|
||||
<section class="max-w-4xl mx-auto px-4 pt-12">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">Welcome, {{ user.username }}</h1>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ user.emails[0] if user.emails }}</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="/settings/tokens" class="px-4 py-2 text-sm border border-gray-300 rounded-md hover:border-gray-400">
|
||||
API Tokens
|
||||
</a>
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<button type="submit" class="px-4 py-2 text-sm border border-gray-300 rounded-md hover:border-gray-400">
|
||||
Sign out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<section class="max-w-6xl mx-auto px-4 pt-8">
|
||||
<div class="flex gap-8">
|
||||
{# Org sidebar #}
|
||||
<aside class="w-64 shrink-0">
|
||||
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Organisations</h2>
|
||||
<ul class="space-y-1">
|
||||
{% for org in orgs %}
|
||||
<li>
|
||||
<a href="/orgs/{{ org.name }}/projects" class="block px-3 py-2 text-sm rounded-md hover:bg-gray-100">
|
||||
{{ org.name }}
|
||||
<span class="text-xs text-gray-400 ml-1">{{ org.role }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="mt-4 pt-4 border-t border-gray-200">
|
||||
<form method="POST" action="/orgs" class="space-y-2">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<input type="text" name="name" placeholder="new-org-name"
|
||||
class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900">
|
||||
<button type="submit" class="w-full px-3 py-1.5 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800">
|
||||
Create organisation
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="p-6 border border-gray-200 rounded-lg mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
Forage is in early access. Container deployments and the component registry
|
||||
are under active development. You can manage your API tokens now and deploy
|
||||
once the platform is live.
|
||||
</p>
|
||||
</div>
|
||||
{# Main content #}
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-2xl font-bold mb-6">Recent activity</h1>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="p-6 border border-gray-200 rounded-lg">
|
||||
<h2 class="font-bold text-lg mb-4">Projects</h2>
|
||||
<p class="text-sm text-gray-600">No projects yet. Deploy your first forest.cue manifest to get started.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border border-gray-200 rounded-lg">
|
||||
<h2 class="font-bold text-lg mb-4">Organisations</h2>
|
||||
<p class="text-sm text-gray-600">You're not part of any organisation yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 p-6 border border-gray-200 rounded-lg">
|
||||
<h2 class="font-bold text-lg mb-4">Quick start</h2>
|
||||
<div class="bg-gray-950 rounded-md p-4 text-sm font-mono text-gray-300">
|
||||
<pre><span class="text-gray-500"># Install forest CLI</span>
|
||||
cargo install forest
|
||||
|
||||
<span class="text-gray-500"># Create a project</span>
|
||||
forest init my-project --component forage/service
|
||||
|
||||
<span class="text-gray-500"># Deploy</span>
|
||||
forest release create --env dev</pre>
|
||||
{% if recent_activity %}
|
||||
<div class="space-y-3">
|
||||
{% for item in recent_activity %}
|
||||
<a href="/orgs/{{ item.org_name }}/projects/{{ item.project_name }}" class="block p-4 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-0">
|
||||
<p class="font-medium truncate">{{ item.title }}</p>
|
||||
<p class="text-sm text-gray-500 mt-0.5">
|
||||
{{ item.org_name }} / {{ item.project_name }}
|
||||
</p>
|
||||
{% if item.description %}
|
||||
<p class="text-sm text-gray-600 mt-1 truncate">{{ item.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-right text-sm text-gray-400 shrink-0 ml-4">
|
||||
<p class="font-mono text-xs">{{ item.slug }}</p>
|
||||
<p>{{ item.created_at }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 border border-gray-200 rounded-lg text-center">
|
||||
<p class="text-gray-500">No recent activity</p>
|
||||
<p class="text-sm text-gray-400 mt-2">Deploy your first release with <code class="bg-gray-100 px-1 rounded">forest release create</code></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
87
templates/pages/members.html.jinja
Normal file
87
templates/pages/members.html.jinja
Normal file
@@ -0,0 +1,87 @@
|
||||
{% extends "base.html.jinja" %}
|
||||
|
||||
{% block content %}
|
||||
<section class="max-w-4xl mx-auto px-4 pt-12">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<a href="/orgs/{{ org_name }}/projects" class="text-sm text-gray-500 hover:text-gray-700">← {{ org_name }}</a>
|
||||
<h1 class="text-2xl font-bold mt-1">Members</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if is_admin %}
|
||||
<div class="mb-8 p-4 border border-gray-200 rounded-lg">
|
||||
<h2 class="font-medium text-sm mb-3">Add member</h2>
|
||||
<form method="POST" action="/orgs/{{ org_name }}/settings/members" class="flex gap-3 items-end">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<div class="flex-1">
|
||||
<label for="username" class="block text-xs text-gray-500 mb-1">Username</label>
|
||||
<input type="text" id="username" name="username" required
|
||||
class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900">
|
||||
</div>
|
||||
<div>
|
||||
<label for="role" class="block text-xs text-gray-500 mb-1">Role</label>
|
||||
<select id="role" name="role" class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900">
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-1.5 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800">
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Username</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Role</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Joined</th>
|
||||
{% if is_admin %}
|
||||
<th class="text-right px-4 py-3 font-medium text-gray-500">Actions</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for member in members %}
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">{{ member.username }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
|
||||
{% if member.role == 'owner' %}bg-purple-100 text-purple-800
|
||||
{% elif member.role == 'admin' %}bg-blue-100 text-blue-800
|
||||
{% else %}bg-gray-100 text-gray-800{% endif %}">
|
||||
{{ member.role }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500">{{ member.joined_at or "—" }}</td>
|
||||
{% if is_admin %}
|
||||
<td class="px-4 py-3 text-right">
|
||||
{% if member.role != 'owner' %}
|
||||
<div class="flex gap-2 justify-end">
|
||||
<form method="POST" action="/orgs/{{ org_name }}/settings/members/{{ member.user_id }}/role" class="inline-flex gap-1">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<select name="role" class="px-2 py-1 text-xs border border-gray-300 rounded">
|
||||
<option value="member" {% if member.role == 'member' %}selected{% endif %}>Member</option>
|
||||
<option value="admin" {% if member.role == 'admin' %}selected{% endif %}>Admin</option>
|
||||
</select>
|
||||
<button type="submit" class="px-2 py-1 text-xs border border-gray-300 rounded hover:bg-gray-50">Update</button>
|
||||
</form>
|
||||
<form method="POST" action="/orgs/{{ org_name }}/settings/members/{{ member.user_id }}/remove" class="inline">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<button type="submit" class="px-2 py-1 text-xs text-red-600 border border-red-200 rounded hover:bg-red-50">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -1,12 +1,34 @@
|
||||
{% extends "base.html.jinja" %}
|
||||
|
||||
{% block content %}
|
||||
<section class="max-w-4xl mx-auto px-4 pt-12 text-center">
|
||||
<section class="max-w-lg mx-auto px-4 pt-16 text-center">
|
||||
<h1 class="text-2xl font-bold">Welcome to Forage</h1>
|
||||
<p class="mt-4 text-gray-600">Create your first organisation with the forest CLI to get started.</p>
|
||||
<p class="mt-4 text-gray-600">Create your first organisation to get started.</p>
|
||||
|
||||
<div class="mt-8 max-w-lg mx-auto bg-gray-950 rounded-md p-4 text-sm font-mono text-gray-300 text-left">
|
||||
<pre><span class="text-gray-500"># Install forest CLI</span>
|
||||
{% if error %}
|
||||
<div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" action="/orgs" class="mt-8 text-left space-y-4">
|
||||
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Organisation name</label>
|
||||
<input type="text" id="name" name="name" placeholder="my-org"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900"
|
||||
pattern="[a-z0-9][a-z0-9-]*[a-z0-9]" title="Lowercase letters, numbers, and hyphens">
|
||||
<p class="text-xs text-gray-400 mt-1">Lowercase letters, numbers, and hyphens only.</p>
|
||||
</div>
|
||||
<button type="submit" class="w-full px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-800 font-medium">
|
||||
Create organisation
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-gray-200">
|
||||
<p class="text-sm text-gray-500 mb-4">Or use the CLI:</p>
|
||||
<div class="bg-gray-950 rounded-md p-4 text-sm font-mono text-gray-300 text-left">
|
||||
<pre><span class="text-gray-500"># Install forest CLI</span>
|
||||
cargo install forest
|
||||
|
||||
<span class="text-gray-500"># Create an organisation</span>
|
||||
@@ -17,9 +39,10 @@ forest init my-project --component forage/service
|
||||
|
||||
<span class="text-gray-500"># Deploy</span>
|
||||
forest release create --env dev</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-6">
|
||||
<a href="/settings/tokens" class="text-sm text-gray-500 hover:text-gray-700">Manage API tokens →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -16,13 +16,38 @@
|
||||
{% for artifact in artifacts %}
|
||||
<div class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">{{ artifact.title }}</p>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="font-medium">{{ artifact.title }}</p>
|
||||
{% if artifact.version %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">{{ artifact.version }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if artifact.description %}
|
||||
<p class="text-sm text-gray-600 mt-1">{{ artifact.description }}</p>
|
||||
{% endif %}
|
||||
{% if artifact.branch or artifact.commit_sha %}
|
||||
<div class="flex items-center gap-2 mt-2 text-xs text-gray-500">
|
||||
{% if artifact.branch %}
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-blue-50 text-blue-700 font-mono">{{ artifact.branch }}</span>
|
||||
{% endif %}
|
||||
{% if artifact.commit_sha %}
|
||||
<span class="font-mono">{{ artifact.commit_sha[:8] }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.source_user %}
|
||||
<p class="text-xs text-gray-400 mt-1">by {{ artifact.source_user }}{% if artifact.source_type %} via {{ artifact.source_type }}{% endif %}</p>
|
||||
{% endif %}
|
||||
{% if artifact.destinations %}
|
||||
<div class="flex gap-1.5 mt-2">
|
||||
{% for dest in artifact.destinations %}
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600">{{ dest.name }} ({{ dest.environment }})</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-right text-sm text-gray-500">
|
||||
<div class="text-right text-sm text-gray-500 shrink-0 ml-4">
|
||||
<p class="font-mono">{{ artifact.slug }}</p>
|
||||
<p>{{ artifact.created_at }}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user