706 lines
30 KiB
HTML
706 lines
30 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
{% load widget_tweaks %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* Card Hover Effects */
|
|
.form-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.form-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Button Hover Effects */
|
|
.btn-action {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-action:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.btn-primary {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(157, 34, 53, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: rgba(157, 34, 53, 0.05);
|
|
border-color: rgba(157, 34, 53, 0.3);
|
|
}
|
|
|
|
.btn-danger {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
|
}
|
|
|
|
/* Input Focus Animation */
|
|
.form-input {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Custom Form Fields */
|
|
.form-field {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-field:focus-within {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.form-label {
|
|
color: #374151;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 0.75rem;
|
|
background-color: #ffffff;
|
|
color: #111827;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
outline: none;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #9d2235;
|
|
box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.form-input:disabled {
|
|
background-color: #f9fafb;
|
|
color: #9ca3af;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 0.75rem;
|
|
background-color: #ffffff;
|
|
color: #111827;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
outline: none;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.75rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5rem 1.5rem;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: #9d2235;
|
|
box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
|
|
}
|
|
|
|
.form-select:disabled {
|
|
background-color: #f9fafb;
|
|
color: #9ca3af;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 0.75rem;
|
|
background-color: #ffffff;
|
|
color: #111827;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
outline: none;
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
border-color: #9d2235;
|
|
box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
|
|
}
|
|
|
|
.form-helptext {
|
|
margin-top: 0.375rem;
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.form-error {
|
|
margin-top: 0.375rem;
|
|
font-size: 0.8rem;
|
|
color: #dc2626;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Custom Checkbox Styling */
|
|
.custom-checkbox {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.custom-checkbox input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.checkbox-visual {
|
|
position: relative;
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
background-color: white;
|
|
border: 2px solid #d1d5db;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-checkbox:hover .checkbox-visual {
|
|
border-color: #9d2235;
|
|
box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
|
|
}
|
|
|
|
.custom-checkbox input:checked ~ .checkbox-visual {
|
|
background-color: #9d2235;
|
|
border-color: #9d2235;
|
|
background-image: linear-gradient(135deg, #9d2235 0%, #8b1228 100%);
|
|
box-shadow: 0 4px 12px rgba(157, 34, 53, 0.3);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.custom-checkbox input:focus-visible ~ .checkbox-visual {
|
|
outline: 2px solid #9d2235;
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(157, 34, 53, 0.2);
|
|
}
|
|
|
|
.checkbox-checkmark {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.custom-checkbox input:checked ~ .checkbox-visual .checkbox-checkmark {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
|
|
.checkbox-label {
|
|
margin-left: 0.75rem;
|
|
color: #374151;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.custom-checkbox:hover .checkbox-label {
|
|
color: #9d2235;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-6">
|
|
<ol class="flex items-center gap-2 text-sm">
|
|
<li>
|
|
<a href="{% url 'source_list' %}"
|
|
class="text-gray-500 hover:text-temple-red transition-colors flex items-center gap-1">
|
|
<i data-lucide="database" class="w-4 h-4"></i>
|
|
{% trans "Sources" %}
|
|
</a>
|
|
</li>
|
|
{% if source %}
|
|
<li class="text-gray-400">/</li>
|
|
<li>
|
|
<a href="{% url 'source_detail' source.pk %}"
|
|
class="text-gray-500 hover:text-temple-red transition-colors">
|
|
{{ source.name }}
|
|
</a>
|
|
</li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-temple-red font-semibold">{% trans "Update" %}</li>
|
|
{% else %}
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-temple-red font-semibold">{% trans "Create" %}</li>
|
|
{% endif %}
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-xl bg-temple-red/10 flex items-center justify-center">
|
|
{% if source %}
|
|
<i data-lucide="edit-3" class="w-6 h-6 text-temple-red"></i>
|
|
{% else %}
|
|
<i data-lucide="plus-circle" class="w-6 h-6 text-temple-red"></i>
|
|
{% endif %}
|
|
</div>
|
|
{{ title }}
|
|
</h1>
|
|
<p class="text-gray-500 text-sm sm:text-base">
|
|
{% if source %}
|
|
{% trans "Update integration source details" %}
|
|
{% else %}
|
|
{% trans "Create a new integration source" %}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
{% if source %}
|
|
<a href="{% url 'source_detail' source.pk %}"
|
|
class="btn-secondary inline-flex items-center gap-2 px-5 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
|
|
<i data-lucide="eye" class="w-5 h-5"></i>
|
|
{% trans "View Details" %}
|
|
</a>
|
|
<a href="{% url 'source_delete' source.pk %}"
|
|
class="btn-danger inline-flex items-center gap-2 px-5 py-3 bg-red-500 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
|
|
<i data-lucide="trash-2" class="w-5 h-5"></i>
|
|
{% trans "Delete" %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'source_list' %}"
|
|
class="btn-secondary inline-flex items-center gap-2 px-5 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
{% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="form-card bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<!-- Card Header -->
|
|
<div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-temple-red/10 flex items-center justify-center">
|
|
<i data-lucide="database" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">{% trans "Source Configuration" %}</h2>
|
|
<p class="text-sm text-gray-500">{% trans "Fill in the integration details below" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="p-6 sm:p-8">
|
|
|
|
<!-- Non-Field Errors -->
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 text-red-500"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-base font-bold text-red-700 mb-1">{% trans "Error" %}</h3>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-sm text-red-600">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Messages -->
|
|
{% if messages %}
|
|
<div class="space-y-3 mb-6">
|
|
{% for message in messages %}
|
|
<div class="flex items-start gap-3 p-4 rounded-xl border
|
|
{% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-700
|
|
{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700
|
|
{% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-700
|
|
{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %}">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
|
|
{% if message.tags == 'error' %}bg-red-100
|
|
{% elif message.tags == 'success' %}bg-green-100
|
|
{% elif message.tags == 'warning' %}bg-yellow-100
|
|
{% else %}bg-blue-100{% endif %}">
|
|
<i data-lucide="{% if message.tags == 'error' %}alert-circle
|
|
{% elif message.tags == 'success' %}check-circle
|
|
{% elif message.tags == 'warning' %}alert-triangle
|
|
{% else %}info{% endif %}"
|
|
class="w-5 h-5
|
|
{% if message.tags == 'error' %}text-red-500
|
|
{% elif message.tags == 'success' %}text-green-500
|
|
{% elif message.tags == 'warning' %}text-yellow-600
|
|
{% else %}text-blue-500{% endif %}">
|
|
</i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium">{{ message }}</p>
|
|
</div>
|
|
<button type="button"
|
|
onclick="this.parentElement.remove()"
|
|
class="text-current hover:opacity-70 transition-opacity">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Form -->
|
|
<form method="post" novalidate id="source-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Name Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.name.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="tag" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "Name" %}
|
|
{% if form.name.field.required %}<span class="text-temple-red">*</span>{% endif %}
|
|
</label>
|
|
<input type="{{ form.name.field.widget.input_type }}"
|
|
name="{{ form.name.name }}"
|
|
id="{{ form.name.id_for_label }}"
|
|
class="form-input"
|
|
placeholder="{% trans 'Enter a name for this integration source' %}"
|
|
{% if form.name.value %}value="{{ form.name.value }}"{% endif %}>
|
|
{% if form.name.help_text %}
|
|
<p class="form-helptext">{{ form.name.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.name.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Source Type Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.source_type.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="server" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "Source Type" %}
|
|
{% if form.source_type.field.required %}<span class="text-temple-red">*</span>{% endif %}
|
|
</label>
|
|
{{ form.source_type.as_widget }}
|
|
{% if form.source_type.help_text %}
|
|
<p class="form-helptext">{{ form.source_type.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.source_type.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- IP Address Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.ip_address.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="globe" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "IP Address" %}
|
|
{% if form.ip_address.field.required %}<span class="text-temple-red">*</span>{% endif %}
|
|
</label>
|
|
<input type="{{ form.ip_address.field.widget.input_type }}"
|
|
name="{{ form.ip_address.name }}"
|
|
id="{{ form.ip_address.id_for_label }}"
|
|
class="form-input"
|
|
placeholder="{% trans 'e.g., 192.168.1.100' %}"
|
|
{% if form.ip_address.value %}value="{{ form.ip_address.value }}"{% endif %}>
|
|
{% if form.ip_address.help_text %}
|
|
<p class="form-helptext">{{ form.ip_address.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.ip_address.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Trusted IPs Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.trusted_ips.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="shield" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "Trusted IPs" %}
|
|
</label>
|
|
<input type="{{ form.trusted_ips.field.widget.input_type }}"
|
|
name="{{ form.trusted_ips.name }}"
|
|
id="{{ form.trusted_ips.id_for_label }}"
|
|
class="form-input"
|
|
placeholder="{% trans 'e.g., 192.168.1.1, 192.168.1.2 (comma-separated)' %}"
|
|
{% if form.trusted_ips.value %}value="{{ form.trusted_ips.value }}"{% endif %}>
|
|
{% if form.trusted_ips.help_text %}
|
|
<p class="form-helptext">{{ form.trusted_ips.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.trusted_ips.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Description Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.description.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="align-left" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "Description" %}
|
|
</label>
|
|
<textarea name="{{ form.description.name }}"
|
|
id="{{ form.description.id_for_label }}"
|
|
class="form-textarea"
|
|
placeholder="{% trans 'Add a description...' %}">{% if form.description.value %}{{ form.description.value }}{% endif %}</textarea>
|
|
{% if form.description.help_text %}
|
|
<p class="form-helptext">{{ form.description.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.description.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Is Active Field -->
|
|
<div class="form-field">
|
|
<label for="{{ form.is_active.id_for_label }}" class="form-label flex items-center gap-2">
|
|
<i data-lucide="power" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "Active Status" %}
|
|
</label>
|
|
<label class="custom-checkbox" for="{{ form.is_active.id_for_label }}">
|
|
<input type="checkbox"
|
|
name="{{ form.is_active.name }}"
|
|
id="{{ form.is_active.id_for_label }}"
|
|
{% if form.is_active.value %}checked{% endif %}>
|
|
<span class="checkbox-visual">
|
|
<svg class="checkbox-checkmark w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span class="checkbox-label">{% trans "Enable this integration source" %}</span>
|
|
</label>
|
|
{% if form.is_active.help_text %}
|
|
<p class="form-helptext">{{ form.is_active.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in form.is_active.errors %}
|
|
<p class="form-error">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- API Credentials Section (for existing sources) -->
|
|
{% if source %}
|
|
<div class="mt-8 p-6 bg-gray-50 rounded-2xl border border-gray-200">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-temple-red/10 flex items-center justify-center">
|
|
<i data-lucide="key" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900">{% trans "API Credentials" %}</h3>
|
|
<p class="text-sm text-gray-500">{% trans "Generated credentials for API access" %}</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "API Key" %}
|
|
</label>
|
|
<div class="flex">
|
|
<input type="text" value="{{ source.api_key }}" readonly class="form-input rounded-r-none">
|
|
<button type="button"
|
|
hx-post="{% url 'copy_to_clipboard' %}"
|
|
hx-vals='{"text": "{{ source.api_key }}"}'
|
|
title="{% trans 'Copy to clipboard' %}"
|
|
class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-r-lg transition">
|
|
<i data-lucide="copy" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="lock" class="w-4 h-4 text-gray-400"></i>
|
|
{% trans "API Secret" %}
|
|
</label>
|
|
<div class="flex">
|
|
<input type="password" value="{{ source.api_secret }}" readonly id="api-secret" class="form-input rounded-l-lg">
|
|
<button type="button" onclick="toggleSecretVisibility()" class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-r-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 transition">
|
|
<i data-lucide="eye" id="secret-toggle-icon" class="w-4 h-4"></i>
|
|
</button>
|
|
<button type="button"
|
|
hx-post="{% url 'copy_to_clipboard' %}"
|
|
hx-vals='{"text": "{{ source.api_secret }}"}'
|
|
title="{% trans 'Copy to clipboard' %}"
|
|
class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-r-lg transition">
|
|
<i data-lucide="copy" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<a href="{% url 'generate_api_keys' source.pk %}"
|
|
class="btn-action inline-flex items-center gap-2 px-5 py-3 bg-yellow-500 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
|
|
<i data-lucide="refresh-cw" class="w-5 h-5"></i>
|
|
{% trans "Generate New Keys" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 mt-6">
|
|
<button form="source-form" type="submit"
|
|
class="btn-primary flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3 bg-temple-red text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
|
|
<i data-lucide="save" class="w-5 h-5"></i>
|
|
{% trans "Save" %}
|
|
</button>
|
|
<a href="{% url 'source_list' %}"
|
|
class="btn-secondary flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Auto-adjust textarea height
|
|
const textarea = document.querySelector('textarea[name="description"]');
|
|
if (textarea) {
|
|
textarea.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = this.scrollHeight + 'px';
|
|
});
|
|
// Set initial height
|
|
textarea.style.height = textarea.scrollHeight + 'px';
|
|
}
|
|
|
|
// Apply Tailwind classes to source_type select
|
|
const sourceTypeSelect = document.querySelector('select[name="source_type"]');
|
|
if (sourceTypeSelect) {
|
|
sourceTypeSelect.classList.add('form-select');
|
|
}
|
|
|
|
|
|
// Form Validation
|
|
const form = document.getElementById('source-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
|
|
// Basic validation
|
|
const name = document.getElementById('id_name');
|
|
if (name && !name.value.trim()) {
|
|
e.preventDefault();
|
|
alert('{% trans "Source name is required." %}');
|
|
return;
|
|
}
|
|
|
|
const ipAddress = document.getElementById('id_ip_address');
|
|
if (ipAddress && ipAddress.value.trim() && !isValidIP(ipAddress.value.trim())) {
|
|
e.preventDefault();
|
|
alert('{% trans "Please enter a valid IP address." %}');
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Warn before leaving if changes are made
|
|
let formChanged = false;
|
|
const formInputs = form ? form.querySelectorAll('input, select, textarea') : [];
|
|
|
|
formInputs.forEach(input => {
|
|
input.addEventListener('change', function() {
|
|
formChanged = true;
|
|
});
|
|
});
|
|
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (formChanged) {
|
|
e.preventDefault();
|
|
e.returnValue = '{% trans "You have unsaved changes. Are you sure you want to leave?" %}';
|
|
return e.returnValue;
|
|
}
|
|
});
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function() {
|
|
formChanged = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Toggle Secret Visibility
|
|
function toggleSecretVisibility() {
|
|
const secretInput = document.getElementById('api-secret');
|
|
const toggleIcon = document.getElementById('secret-toggle-icon');
|
|
|
|
if (secretInput.type === 'password') {
|
|
secretInput.type = 'text';
|
|
toggleIcon.setAttribute('data-lucide', 'eye-off');
|
|
} else {
|
|
secretInput.type = 'password';
|
|
toggleIcon.setAttribute('data-lucide', 'eye');
|
|
}
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// IP validation helper
|
|
function isValidIP(ip) {
|
|
const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
return ipRegex.test(ip);
|
|
}
|
|
|
|
// Handle HTMX copy to clipboard feedback
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
if (evt.detail.successful && evt.detail.target.matches('[hx-post*="copy_to_clipboard"]')) {
|
|
const button = evt.detail.target;
|
|
const originalHTML = button.innerHTML;
|
|
button.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>';
|
|
button.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
|
|
button.classList.add('bg-green-500', 'text-white');
|
|
lucide.createIcons();
|
|
|
|
setTimeout(() => {
|
|
button.innerHTML = originalHTML;
|
|
button.classList.remove('bg-green-500', 'text-white');
|
|
button.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
|
|
lucide.createIcons();
|
|
}, 2000);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |