fix: modal scroll, SSH key textarea, nav full-page, remove OS/Provider
- Fix modal scroll: restructure overlay with scroll/centering wrapper - Add SSH key textarea + file upload to host modal (authType='key') - Fix textarea reset on new host (clear via DOM) - SSH username placeholder instead of default 'root' - Nav uses plain <a href> instead of HTMX for full-page navigation - /hosts route returns full page; /hosts/list for HTMX partials - Remove OS and Provider from host modal, grid card, and list card - Fix key modal x-data scope for Alpine $dispatch - Update key_grid to display multi-line key content properly - Simplify SSH key placeholder format
This commit is contained in:
swanadiva
+2
-1
@@ -61,7 +61,8 @@ func main() {
|
||||
app.Static("/static", "./static")
|
||||
|
||||
app.Get("/", handler.Dashboard)
|
||||
app.Get("/hosts", handler.DashboardList)
|
||||
app.Get("/hosts", handler.Dashboard)
|
||||
app.Get("/hosts/list", handler.DashboardList)
|
||||
app.Post("/hosts", handler.CreateHost)
|
||||
app.Put("/hosts/:id", handler.UpdateHost)
|
||||
app.Delete("/hosts/:id", handler.DeleteHost)
|
||||
|
||||
@@ -20,18 +20,16 @@
|
||||
<span class="font-medium">{{.Username | default "root"}}@{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}{{if ne .Port 22}}:{{.Port}}{{end}}</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||
<span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.OS}}</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.Provider}}</span>
|
||||
{{if .Type}}<span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>{{end}}
|
||||
</div>
|
||||
{{if .Type}}<div class="flex flex-wrap gap-1.5 mb-4">
|
||||
<span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>
|
||||
</div>{{end}}
|
||||
|
||||
<div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center text-xs">
|
||||
<span class="text-outline italic">Last seen {{.LastSeen}}</span>
|
||||
<div class="flex gap-1">
|
||||
<a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-3 rounded-lg transition-all">Connect</a>
|
||||
<button type="button"
|
||||
@click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', OS: '{{.OS}}', Provider: '{{.Provider}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
|
||||
@click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
|
||||
class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
|
||||
<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="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
|
||||
</button>
|
||||
@@ -61,15 +59,11 @@
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center text-primary shrink-0 border border-outline-variant/20">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 sm:grid sm:grid-cols-3 sm:gap-4 items-center">
|
||||
<div class="min-w-0 flex-1 sm:grid sm:grid-cols-2 sm:gap-4 items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-sm truncate">{{.Name}}</h4>
|
||||
<span class="font-mono text-xs text-outline">{{.IP}}</span>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-xs text-on-surface-variant font-medium">{{.OS}}</p>
|
||||
<p class="text-[10px] text-outline">{{.Provider}}</p>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<span class="text-xs text-outline italic">Seen {{.LastSeen}}</span>
|
||||
</div>
|
||||
@@ -82,7 +76,7 @@
|
||||
</span>
|
||||
<a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-4 rounded-lg transition-all">Connect</a>
|
||||
<button type="button"
|
||||
@click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', OS: '{{.OS}}', Provider: '{{.Provider}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
|
||||
@click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
|
||||
class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
|
||||
<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="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
|
||||
</button>
|
||||
@@ -110,5 +104,4 @@
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "host_modal" .}}
|
||||
{{end}}
|
||||
@@ -4,7 +4,8 @@
|
||||
@edit-host.window="populate($event.detail); open = true"
|
||||
@keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="absolute inset-0 overflow-y-auto p-4" x-show="open" x-transition>
|
||||
<div class="flex min-h-full items-center justify-center">
|
||||
<div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
|
||||
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
|
||||
@@ -53,37 +54,6 @@
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Operating System</label>
|
||||
<select name="os" x-model="form.os"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
|
||||
<option value="Ubuntu 22.04">Ubuntu 22.04</option>
|
||||
<option value="Ubuntu 24.04">Ubuntu 24.04</option>
|
||||
<option value="Debian 12">Debian 12</option>
|
||||
<option value="Alpine 3.19">Alpine 3.19</option>
|
||||
<option value="Fedora 39">Fedora 39</option>
|
||||
<option value="Rocky 9">Rocky 9</option>
|
||||
<option value="CentOS 8">CentOS 8</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Provider</label>
|
||||
<select name="provider" x-model="form.provider"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
|
||||
<option value="AWS US-East">AWS Cloud</option>
|
||||
<option value="AWS EU-West">AWS EU-West</option>
|
||||
<option value="DigitalOcean">DigitalOcean</option>
|
||||
<option value="Hetzner">Hetzner</option>
|
||||
<option value="GCP US-Central">GCP Cloud</option>
|
||||
<option value="Vultr">Vultr</option>
|
||||
<option value="Linode">Linode</option>
|
||||
<option value="Local">Local</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Host Purpose / Type</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
@@ -119,6 +89,20 @@
|
||||
<input type="hidden" name="authType" :value="form.authType">
|
||||
</div>
|
||||
|
||||
<div x-show="form.authType === 'key'" x-cloak class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">SSH Private Key</label>
|
||||
<textarea name="password" rows="5" placeholder="Paste your SSH private key here... -----BEGIN OPENSSH PRIVATE KEY----- ... -----END OPENSSH PRIVATE KEY-----"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
|
||||
Or upload a key file
|
||||
</label>
|
||||
<input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk" @change="readKeyFile($event)">
|
||||
<span class="text-[10px] text-outline">.pem .key .ppk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="form.authType === 'password'" x-cloak class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Password</label>
|
||||
<input type="password" name="password" x-model="form.password" placeholder="SSH password"
|
||||
@@ -142,6 +126,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function hostForm() {
|
||||
@@ -150,18 +135,18 @@ function hostForm() {
|
||||
editing: false,
|
||||
hostId: '',
|
||||
form: {
|
||||
name: '', ip: '', hostname: '', port: '22', username: 'root',
|
||||
os: 'Ubuntu 22.04', provider: 'AWS US-East', type: 'api',
|
||||
authType: 'key', password: '', notes: ''
|
||||
name: '', ip: '', hostname: '', port: '22', username: '',
|
||||
type: 'api', authType: 'key', password: '', notes: ''
|
||||
},
|
||||
reset() {
|
||||
this.editing = false;
|
||||
this.hostId = '';
|
||||
this.form = {
|
||||
name: '', ip: '', hostname: '', port: '22', username: 'root',
|
||||
os: 'Ubuntu 22.04', provider: 'AWS US-East', type: 'api',
|
||||
authType: 'key', password: '', notes: ''
|
||||
name: '', ip: '', hostname: '', port: '22', username: '',
|
||||
type: 'api', authType: 'key', password: '', notes: ''
|
||||
};
|
||||
var ta = document.querySelector('#host-modal textarea[name=password]');
|
||||
if (ta) ta.value = '';
|
||||
},
|
||||
populate(host) {
|
||||
this.editing = true;
|
||||
@@ -172,13 +157,23 @@ function hostForm() {
|
||||
hostname: host.Hostname || '',
|
||||
port: String(host.Port || 22),
|
||||
username: host.Username || 'root',
|
||||
os: host.OS || 'Ubuntu 22.04',
|
||||
provider: host.Provider || 'AWS US-East',
|
||||
type: host.Type || 'api',
|
||||
authType: host.AuthType || 'key',
|
||||
password: host.Password || '',
|
||||
notes: host.Notes || ''
|
||||
};
|
||||
var ta = document.querySelector('#host-modal textarea[name=password]');
|
||||
if (ta) ta.value = host.Password || '';
|
||||
},
|
||||
readKeyFile($event) {
|
||||
var file = $event.target.files[0];
|
||||
if (!file) return;
|
||||
var reader = new FileReader();
|
||||
var ta = document.querySelector('#host-modal textarea[name=password]');
|
||||
reader.onload = function(e) {
|
||||
if (ta) ta.value = e.target.result;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -68,22 +68,22 @@
|
||||
<button @click="filter = 'all'"
|
||||
:class="filter === 'all' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=all" hx-target="#host-list">All</button>
|
||||
hx-get="/hosts/list?filter=all" hx-target="#host-list">All</button>
|
||||
<button @click="filter = 'active'"
|
||||
:class="filter === 'active' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=active" hx-target="#host-list">Active</button>
|
||||
hx-get="/hosts/list?filter=active" hx-target="#host-list">Active</button>
|
||||
<button @click="filter = 'offline'"
|
||||
:class="filter === 'offline' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=offline" hx-target="#host-list">Offline</button>
|
||||
hx-get="/hosts/list?filter=offline" hx-target="#host-list">Offline</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Search hosts..."
|
||||
hx-get="/hosts" hx-trigger="keyup delay:200ms"
|
||||
hx-get="/hosts/list" hx-trigger="keyup delay:200ms"
|
||||
hx-target="#host-list"
|
||||
class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all text-on-surface placeholder-on-surface-variant">
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
|
||||
<span class="text-outline font-semibold uppercase tracking-wider text-[10px]">Credential Secrets</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-on-surface-variant" x-text="reveal ? '{{.Passphrase}}' : '••••••••••••••••'"></span>
|
||||
<span x-show="!reveal" class="font-mono text-on-surface-variant">••••••••••••••••</span>
|
||||
<button @click="reveal = !reveal"
|
||||
class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Toggle visibility">
|
||||
<svg x-show="reveal" 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.06 10.06 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88L6.59 6.59m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
|
||||
@@ -51,6 +51,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="reveal" x-cloak class="py-1">
|
||||
<code class="text-[10px] text-on-surface-variant font-mono block break-all bg-surface-container-low p-2 rounded border border-outline-variant/20 max-h-32 overflow-y-auto select-all whitespace-pre-wrap">{{.Passphrase}}</code>
|
||||
</div>
|
||||
|
||||
{{if .Fingerprint}}
|
||||
<div class="py-1">
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<header class="h-14 border-b border-outline-variant/30 flex items-center px-6 bg-white/70 backdrop-blur-md">
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6" x-data>
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Header Panel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
|
||||
@@ -61,27 +61,42 @@
|
||||
</div>
|
||||
|
||||
<!-- Add Credential Modal -->
|
||||
<div id="key-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
<div id="key-modal" class="fixed inset-0 z-50" x-show="open" x-cloak
|
||||
x-data="{ open: false, readFile($event) {
|
||||
const file = $event.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
document.querySelector('textarea[name=passphrase]').value = e.target.result;
|
||||
document.querySelector('textarea[name=passphrase]').dispatchEvent(new Event('input'));
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}}"
|
||||
@open-key-modal.window="open = true" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-2xl max-w-md w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
|
||||
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
|
||||
<h3 class="font-bold text-lg text-on-surface">Register Secure Credential</h3>
|
||||
<button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
|
||||
<button @click="open = false" class="text-outline hover:text-primary cursor-pointer p-1 rounded-lg">
|
||||
<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"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form hx-post="/keys" hx-target="#key-grid" hx-swap="innerHTML"
|
||||
@submit="open = false" class="space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CREDENTIAL NAME / LABEL</label>
|
||||
@submit="open = false" class="p-6 space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Credential Name / Label</label>
|
||||
<input type="text" name="name" required placeholder="e.g. key_aws_alex"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CREDENTIAL TYPE</label>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Credential Type</label>
|
||||
<select name="type"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
|
||||
<option value="ED25519">ED25519 (Modern)</option>
|
||||
<option value="SSH RSA">SSH RSA (Legacy)</option>
|
||||
<option value="PASSWORD">Master Password</option>
|
||||
@@ -89,22 +104,33 @@
|
||||
<option value="AWS Key">AWS Access Key</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">LOGIN USERNAME</label>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Login Username</label>
|
||||
<input type="text" name="username" required placeholder="e.g. root or ubuntu"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary font-medium">
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary text-on-surface">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">PASSPHRASE / TOKEN KEY</label>
|
||||
<input type="password" name="passphrase" required placeholder="Enter secure password secret..."
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono">
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Key / Secret Value</label>
|
||||
<textarea name="passphrase" required rows="5"
|
||||
placeholder="Paste your key or secret here... Example SSH key: -----BEGIN OPENSSH PRIVATE KEY----- b3BlbnNzaC1rZXktdjEAAAAIA... -----END OPENSSH PRIVATE KEY-----"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
|
||||
Or upload a key file
|
||||
</label>
|
||||
<input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk,.p12,.pfx" @change="readFile($event)">
|
||||
<span class="text-[10px] text-outline">.pem .key .ppk .pub .txt</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
|
||||
<button type="submit"
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Credential</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary-container hover:text-on-primary-container transition-all">Save Credential</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{define "nav"}}
|
||||
<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0"
|
||||
x-data="{ page: '{{.View}}' }" @htmx:after-settle.window="page = location.pathname.slice(1) || 'hosts'">
|
||||
x-data="{ page: '{{.View}}' }">
|
||||
<div class="p-3 border-b border-outline-variant/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
|
||||
@@ -10,7 +10,6 @@
|
||||
<div class="flex-1 px-3 py-4 space-y-0.5">
|
||||
{{range .NavItems}}
|
||||
<a href="/{{.ID}}"
|
||||
hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
|
||||
:class="page === '{{.ID}}' ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface'"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
|
||||
<span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
|
||||
|
||||
Reference in New Issue
Block a user