{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Generate SSH Key Pair" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Generate SSH Key Pair" %}</h1><div class="eenos-page-subtitle">{% translate "Create a new SSH key pair for your hosting account." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'ssh_list_keys' %}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="arrow-left"></i>{% translate "SSH Key Pairs" %}</a></div></div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Security" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "SSH" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create SSH Key Pair" %}</span></nav>
{% include "includes/form_alerts.html" %}
<form method="post" id="createSshKeyForm" class="eenos-form" data-parsley-validate>{% csrf_token %}<input type="hidden" name="create_key" value="yes"><div class="eenos-card mb-4"><div class="d-flex align-items-start justify-content-between gap-3 mb-4"><div><h2 class="eenos-panel-title mb-1">{% translate "Key Configuration" %}</h2><div class="eenos-panel-subtitle">{% translate "Choose the algorithm, key size, filename, and optional private-key passphrase." %}</div></div><i data-lucide="key-round" class="eenos-card-action-icon"></i></div><div class="eenos-amber-notice eenos-amber-notice-warning mb-4"><div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Existing keys may be overwritten" %}</div><div class="eenos-amber-notice-text">{% translate "Using an existing key name replaces that key pair. Store the passphrase securely because it cannot be recovered." %}</div></div></div><div class="row g-4"><div class="col-12 col-md-4"><label for="key_type" class="form-label">{% translate "Key Type" %}</label><select class="form-select eenos-select-search" id="key_type" name="key_type" required data-selected="{{ form.key_type.value|default:'' }}" data-parsley-required-message="{% translate 'Select an SSH key type.' %}"><option value="">{% translate "Select key type" %}</option><option value="ed25519"{% if form.key_type.value == 'ed25519' %} selected{% endif %}>Ed25519 — {% translate "recommended" %}</option><option value="rsa"{% if form.key_type.value == 'rsa' %} selected{% endif %}>RSA</option><option value="ecdsa"{% if form.key_type.value == 'ecdsa' %} selected{% endif %}>ECDSA</option></select><div class="form-text">{% translate "Ed25519 is recommended; RSA is available for compatibility." %}</div></div><div class="col-12 col-md-4"><label for="key_length" class="form-label">{% translate "Key Length" %}</label><select class="form-select" id="key_length" name="key_length" required data-selected="{{ form.key_length.value|default:'' }}" data-parsley-required-message="{% translate 'Select the SSH key length.' %}"><option value="">{% translate "Select a key type first" %}</option></select><div class="form-text">{% translate "Available sizes depend on the selected algorithm." %}</div></div><div class="col-12 col-md-4"><label for="key_name" class="form-label">{% translate "Key Name" %}</label><input type="text" class="form-control font-monospace" id="key_name" name="key_name" maxlength="100" value="{{ form.key_name.value|default:'' }}" autocomplete="off" required data-parsley-pattern="^[a-z0-9](?:[a-zA-Z0-9_.-]*[a-zA-Z0-9-])?$" data-parsley-required-message="{% translate 'Enter a name for the SSH key.' %}" data-parsley-pattern-message="{% translate 'Use letters, numbers, dots, underscores, or hyphens; the name must start with a lowercase letter or number.' %}"><div class="form-text">{% translate "A standard filename is suggested when you select the key type." %}</div></div><div class="col-12 col-lg-7"><label for="id_password" class="form-label">{% translate "Key Passphrase" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label><div class="eenos-password-generator"><div class="input-group"><input type="password" class="form-control eenos-password-input" id="id_password" name="password" autocomplete="new-password"><button type="button" class="btn btn-outline-secondary eenos-password-toggle" title="{% translate 'Show passphrase' %}" aria-label="{% translate 'Show passphrase' %}"><i data-lucide="eye"></i></button><button type="button" class="btn btn-outline-primary eenos-password-generate" title="{% translate 'Generate secure passphrase' %}" aria-label="{% translate 'Generate secure passphrase' %}"><i data-lucide="wand-sparkles"></i><span class="d-none d-sm-inline">{% translate "Generate" %}</span></button></div><div class="eenos-password-strength mt-2"><div class="eenos-password-strength-bar"><div class="eenos-password-strength-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div><small class="eenos-password-strength-text text-muted d-block mt-2"></small></div></div><div class="form-text">{% translate "Leave empty to create an unencrypted private key." %}</div></div></div></div><div class="d-flex flex-column flex-sm-row gap-2 mb-4"><button type="button" class="btn btn-primary" id="openCreateSshKey"><i data-lucide="key-round"></i>{% translate "Generate Key" %}</button><a href="{% url 'ssh_list_keys' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div></form>
<div class="modal fade" id="createSshKeyModal" tabindex="-1" aria-labelledby="createSshKeyTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5" id="createSshKeyTitle">{% translate "Generate SSH Key Pair" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the new key-pair configuration." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="key-round"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Key pair" %}</div><div class="eenos-modal-info-value font-monospace" id="createSshKeySummary"></div></div></div><div class="eenos-notice eenos-notice-warning mb-0"><div class="eenos-notice-icon"><i data-lucide="shield-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Ready to generate this key pair?" %}</div><div class="eenos-notice-text">{% translate "Confirm that you have securely recorded the passphrase if one was entered." %}</div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmCreateSshKey"><i data-lucide="key-round"></i>{% translate "Generate Key" %}</button></div></div></div></div>
{% endblock %}
{% block extra_js %}<script>$(function(){const names={ed25519:"id_ed25519",rsa:"id_rsa",ecdsa:"id_ecdsa"},lengths={ed25519:[["0","{% translate 'Fixed automatically' %}"]],rsa:[["3072","3072"],["4096","4096"]],ecdsa:[["256","256"],["384","384"],["521","521"]]},form=$("#createSshKeyForm"),type=$("#key_type"),length=$("#key_length"),name=$("#key_name"),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("createSshKeyModal"));function configure(preserve){const selected=preserve?String(length.data("selected")||""):"",options=lengths[type.val()]||[];length.html(options.length?options.map(option=>'<option value="'+option[0]+'"'+(option[0]===selected?' selected':'')+'>'+option[1]+"</option>").join(""):'<option value="">{% translate "Select a key type first" %}</option>');if(!preserve||!name.val())name.val(names[type.val()]||"");length.parsley().reset()}type.on("change",function(){configure(false)});configure(true);$("#openCreateSshKey").on("click",function(){const validation=form.parsley();validation.validate();if(!validation.isValid())return;$("#createSshKeySummary").text(name.val()+" · "+type.val().toUpperCase()+" · "+length.find(":selected").text());modal.show()});$("#confirmCreateSshKey").on("click",function(){form.get(0).submit()})});</script>{% endblock %}