eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

admin-redesign #26

Merged
eising merged 9 commits from admin-redesign into main 2025-06-19 05:24:06 +00:00
Conversation 0 Commits 9 Files Changed 32 +764 -430
32 changed files with 764 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 57e69390b2 - Show all commits

8
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/base.html.j2
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -9,21 +9,21 @@
{% include 'base/partials/stylesheets.html.j2' %} {% include 'base/partials/stylesheets.html.j2' %}
{% endblock %} {% endblock %}
</head> </head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col"> <body class="bg-gray-50 text-gray-900 dark:bg-gray-900 min-h-screen flex flex-col">
<!-- Layout Container --> <!-- Layout Container -->
<div class="flex flex-1 h-full overflow-hidden"> <div class="flex flex-1 h-full overflow-hidden">
<!-- Sidebar --> <!-- Sidebar -->
<aside class="hidden md:flex md:w-64 flex-col h-full min-h-screen bg-white border-r border-gray-300" id="sidebar" aria-label="sidebar"> <aside class="hidden md:flex md:w-64 flex-col h-full min-h-screen bg-white border-r border-gray-300 dark:bg-gray-800 dark:border-gray-700" id="sidebar" aria-label="sidebar">
{% include "base/partials/sidebar.html.j2" %} {% include "base/partials/sidebar.html.j2" %}
</aside> </aside>
<!-- Main Panel --> <!-- Main Panel -->
<div class="flex-1 flex flex-col overflow-hidden"> <div class="flex-1 flex flex-col overflow-hidden">
<!-- Topbar --> <!-- Topbar -->
<header class="bg-white border-b px-4 py-3 border-gray-300"> <header class="bg-white border-b px-4 py-3 border-gray-300 dark:bg-gray-800 dark:border-gray-700">
{% include "base/partials/navbar.html.j2" %} {% include "base/partials/navbar.html.j2" %}
</header> </header>

6
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2
View File

@ -7,7 +7,7 @@
<!-- Master Pane --> <!-- Master Pane -->
<aside id="master-pane" <aside id="master-pane"
class="md:w-80 w-full shrink-0 border-r overflow-y-auto bg-white md:block border-gray-200 p-4"> class="md:w-80 w-full shrink-0 border-r overflow-y-auto bg-white md:block border-gray-200 p-4 dark:bg-gray-800 dark:border-gray-700">
{% block master %} {% block master %}
<p class="p-4 text-gray-500">Master view (e.g. list/tree)</p> <p class="p-4 text-gray-500">Master view (e.g. list/tree)</p>
{% endblock %} {% endblock %}
@ -15,9 +15,9 @@
<!-- Detail Pane --> <!-- Detail Pane -->
<section id="detail-pane" <section id="detail-pane"
class="flex-1 flex overflow-y-auto bg-white p-4 hidden md:block"> class="flex-1 flex overflow-y-auto bg-white p-4 hidden md:block dark:bg-gray-800">
{% block detail %} {% block detail %}
<p class="p-4 text-gray-500">Select an item to view details</p> <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
{% endblock %} {% endblock %}
</section> </section>

5
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2
View File

@ -1,10 +1,9 @@
{% extends "/base/base.html.j2" %} {% extends "/base/base.html.j2" %}
{% block title %}{{ title or "Page" }}{% endblock %}
{% block breadcrumbs %} {% block breadcrumbs %}
<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200"> <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<nav class="text-sm text-gray-500" aria-label="Breadcrumb"> <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
<sl-breadcrumb id="breadcrumbs"> <sl-breadcrumb id="breadcrumbs">
@ -32,7 +31,7 @@
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<!-- Page Content --> <!-- Page Content -->
<section> <section class="bg-white dark:bg-gray-800">
{% block page_content %} {% block page_content %}
<p>This is a generic page.</p> <p>This is a generic page.</p>
{% endblock %} {% endblock %}

10
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/sidebar.html.j2
View File

@ -3,7 +3,7 @@
<!-- Top: Brand --> <!-- Top: Brand -->
<div class="px-4 py-6"> <div class="px-4 py-6">
<a href="/" class="text-xl font-semibold text-gray-800"> <a href="/" class="text-xl font-semibold text-gray-800 dark:text-gray-100">
<sl-icon src="{{ url_for('static', path='logo.svg') }}"></sl-icon> <sl-icon src="{{ url_for('static', path='logo.svg') }}"></sl-icon>
Sshecret Sshecret
</a> </a>
@ -13,28 +13,28 @@
<ul class="space-y-"> <ul class="space-y-">
<li> <li>
<a href="/" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"> <a href="/" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">
<sl-icon name="house"></sl-icon> <sl-icon name="house"></sl-icon>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="/clients/" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"> <a href="/clients/" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">
<sl-icon name="person-fill-lock"> </sl-icon> <sl-icon name="person-fill-lock"> </sl-icon>
Clients Clients
</a> </a>
</li> </li>
<li> <li>
<a href="/secrets" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"> <a href="/secrets" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">
<sl-icon name="database-lock"></sl-icon> <sl-icon name="database-lock"></sl-icon>
Secrets Secrets
</a> </a>
</li> </li>
<li> <li>
<a href="/audit" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"> <a href="/audit" class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">
<sl-icon name="card-list"></sl-icon> <sl-icon name="card-list"></sl-icon>
Audit Log Audit Log
</a> </a>

13
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/stylesheets.html.j2
View File

@ -35,3 +35,16 @@
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');" onload="document.documentElement.classList.add('sl-theme-dark');"
/> />
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.getItem("color-theme") === "dark" ||
(!("color-theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/index.html.j2
View File

@ -8,7 +8,7 @@
{% block detail %} {% block detail %}
<div id="clientdetails" class="w-full"> <div id="clientdetails" class="w-full bg-white dark:bg-gray-800">
<h3 class="mb-4 text-sm italic text-gray-400 dark:text-white">Click an item to view details</h3> <h3 class="mb-4 text-sm italic text-gray-400 dark:text-white">Click an item to view details</h3>
</div> </div>
{% include '/clients/partials/drawer_create.html.j2' %} {% include '/clients/partials/drawer_create.html.j2' %}

28
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/client_details.html.j2
View File

@ -47,37 +47,37 @@
<div id="client_details"> <div id="client_details">
<div class="w-full p-2"> <div class="w-full p-2">
<div class="px-4 sm:px-0"> <div class="px-4 sm:px-0">
<h3 class="text-base/7 font-semibold text-gray-900">{{client.name}}</h3> <h3 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{client.name}}</h3>
{% if client.description %} {% if client.description %}
<p class="mt-1 max-w-2xl text-sm/6 text-gray-500">{{ client.description }}</p> <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-100">{{ client.description }}</p>
{% endif %} {% endif %}
</div> </div>
<div class="mt-6 border-t border-gray-100"> <div class="mt-6 border-t border-gray-100">
<dl class="divide-y divide-gray-100"> <dl class="divide-y divide-gray-100">
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Client ID</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Client ID</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{client.id}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{{client.id}}</dd>
</div> </div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Client Description</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Client Description</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{client.description}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{{client.description}}</dd>
</div> </div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Client Version</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Client Version</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{client.version}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{{client.version}}</dd>
</div> </div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Public Key</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Public Key</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 truncate">{{client.public_key}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300 truncate">{{client.public_key}}</dd>
</div> </div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Assigned Secrets</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Assigned Secrets</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{client.secrets|length}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{{client.secrets|length}}</dd>
</div> </div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm/6 font-medium text-gray-900">Allowed sources</dt> <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Allowed sources</dt>
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{client.policies|join(', ')}}</dd> <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{{client.policies|join(', ')}}</dd>
</div> </div>
</dl> </dl>
</div> </div>

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/partials/client_secret_details.html.j2
View File

@ -1,4 +1,4 @@
<div class="w-full my-2"> <div class="w-full my-2 dark:text-white">
<ul class="w-48 text-sm font-medium text-gray-900 bg-white dark:bg-gray-700 dark:text-white" id="secretclientlist"> <ul class="w-48 text-sm font-medium text-gray-900 bg-white dark:bg-gray-700 dark:text-white" id="secretclientlist">
{% include '/secrets/partials/client_list_inner.html.j2' %} {% include '/secrets/partials/client_list_inner.html.j2' %}
</ul> </ul>

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/partials/edit_root.html.j2
View File

@ -1,4 +1,4 @@
<div class="w-full"> <div class="w-full dark:text-white">
<sl-details summary="Create secret"> <sl-details summary="Create secret">
<form <form
hx-post="/secrets/create/root" hx-post="/secrets/create/root"

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/partials/group_detail.html.j2
View File

@ -1,4 +1,4 @@
<div class="w-full"> <div class="w-full dark:text-white">
<div class="mb-4"> <div class="mb-4">
<h3 class="text-xl font-semibold dark:text-white">Group {{group.group_name}}</h3> <h3 class="text-xl font-semibold dark:text-white">Group {{group.group_name}}</h3>
{% if description %} {% if description %}

4
packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/partials/tree_detail.html.j2
View File

@ -1,4 +1,4 @@
<div class="w-full flowbite-init-target" id="secretdetails"> <div class="w-full flowbite-init-target dark:text-white" id="secretdetails">
<!-- menu --> <!-- menu -->
@ -111,7 +111,7 @@
</sl-details> </sl-details>
{% endif %} {% endif %}
{% endif %} {% endif %}
<sl-details summary="Events"> <sl-details summary="Events" class="dark:text-white">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600" id="last-audit-events"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600" id="last-audit-events">
<thead class="bg-gray-50 dark:bg-gray-700"> <thead class="bg-gray-50 dark:bg-gray-700">
<tr> <tr>

8
packages/sshecret-admin/src/sshecret_admin/static/css/style.css
View File

@ -19,3 +19,11 @@ sl-details.small-details::part(header) {
sl-details.small-details::part(base) { sl-details.small-details::part(base) {
font-size: var(--sl-input-font-size-small); font-size: var(--sl-input-font-size-small);
} }
@media (prefers-color-scheme: dark) {
sl-details::part(base) {
background-color: var(--color-gray-700);
border: solid 1px var(--color-gray-500);
color: var(--color-gray-50);
}
}