{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create MySQL User" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Create MySQL User" %}</h1><div class="eenos-page-subtitle">{% translate "Create a database login and control where it may connect from." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'mysql_users' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="users"></i>{% translate "MySQL Users" %}</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 "Databases" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "MySQL" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create MySQL User" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-amber-notice eenos-amber-notice-warning mb-4" role="alert"><div class="eenos-amber-notice-icon"><i data-lucide="server"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Server assignment" %}</div><div class="eenos-amber-notice-text">{% translate "A database user can only be assigned to databases hosted on the same MySQL server." %}</div></div></div>
<div class="eenos-amber-notice mb-4" role="status"><div class="eenos-amber-notice-icon"><i data-lucide="info"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Assign the user after creation" %}</div><div class="eenos-amber-notice-text">{% translate "Creating a MySQL user does not automatically grant database access. After creation, assign the user to the required database and select its privileges." %}</div></div></div>
<form method="post" id="mysqlUserForm" class="eenos-form" data-parsley-validate>
{% csrf_token %}<input type="hidden" name="access_host" id="access_host"><input type="hidden" name="user" value="{{ user }}" class="myuser"><input type="hidden" name="create_user" id="createuser">
<div class="eenos-card">
<div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "User Details" %}</h2><p class="eenos-card-subtitle">{% translate "Set the username, server, password, and permitted connection source." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="user-round-plus"></i></div></div>
<div class="row g-4">
<div class="col-12 col-lg-6"><label class="form-label" for="mysqlUsername">{% translate "Database Username" %}</label><div class="input-group"><span class="input-group-text font-monospace">{{ user }}_</span><input type="text" id="mysqlUsername" class="form-control" name="name" value="{{ form.name.value|default:'' }}" maxlength="{{ user_name_limit }}" autocomplete="off" placeholder="{% translate 'Enter username' %}" required data-parsley-pattern="^((?![_-]).)[\w-]*$(?<![_-])" data-parsley-required-message="{% translate 'Please enter a database username.' %}" data-parsley-pattern-message="{% translate 'Please enter a valid database username.' %}"></div></div>
<div class="col-12 col-lg-6"><label class="form-label" for="mysqlUserServer">{% translate "MySQL Server" %}</label><select id="mysqlUserServer" class="form-select eenos-select-search" name="server" required data-parsley-required-message="{% translate 'Please select a MySQL server.' %}"><option value="">{% translate "Select MySQL server" %}</option>{% for server, settings in servers.items %}<option value="{{ server }}" {% if form.server.value == server %}selected{% endif %}>{{ server }} ({{ settings.type }}, {{ settings.version }})</option>{% endfor %}</select></div>
<div class="col-12 col-lg-7 col-xl-6"><label class="form-label" for="mysqlUserPassword">{% translate "Password" %}</label><div class="eenos-password-generator"><div class="input-group"><div class="eenos-password-control"><input type="password" id="mysqlUserPassword" class="form-control eenos-password-input" name="password" required minlength="8" autocomplete="new-password" placeholder="{% translate 'Enter a password' %}" data-parsley-required-message="{% translate 'Please enter a password for the MySQL user.' %}" data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}"></div><button type="button" class="btn btn-outline-secondary eenos-password-toggle" title="{% translate 'Show password' %}" aria-label="{% translate 'Show password' %}"><i data-lucide="eye"></i></button><button type="button" class="btn btn-outline-primary eenos-password-generate" title="{% translate 'Generate secure password' %}"><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="progress" style="height:5px"><div class="progress-bar eenos-password-strength-progress"></div></div><small class="eenos-password-strength-text text-muted"></small></div></div></div>
<div class="col-12"><fieldset>
<legend class="form-label mb-2">{% translate "Access Host" %}</legend>
<p class="text-muted mb-3">{% translate "The database user can connect only from the selected host. Choose a local host when the website and database are on this server." %}</p>
<div class="eenos-amber-notice mb-4" role="status"><div class="eenos-amber-notice-icon"><i data-lucide="server"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Local database connections" %}</div><div class="eenos-amber-notice-text">{% translate "Select localhost, the server hostname, or the hosted domain when the application connects from this server." %}</div></div></div>
<div class="row g-4">
<div class="col-12">
<div class="form-check"><input class="form-check-input" type="radio" name="access" value="local" id="mysqlAccessLocal" checked><label class="form-check-label fw-semibold" for="mysqlAccessLocal">{% translate "Local MySQL server or hosted domain" %}</label></div>
<div class="col-12 col-lg-7 col-xl-6 mt-2"><select class="form-select eenos-select-search" id="mysqlLocalHost" name="accesshost" required data-parsley-required-message="{% translate 'Please select an access host.' %}"><option value="">{% translate "Select MySQL access host" %}</option>{% for host, settings in access_hosts.items %}<option value="{{ host }}">{{ host }}</option>{% endfor %}</select></div>
</div>
<div class="col-12">
<div class="form-check"><input class="form-check-input" type="radio" name="access" value="ip" id="mysqlAccessIp"><label class="form-check-label fw-semibold" for="mysqlAccessIp">{% translate "Allow from a specific IP address" %}</label></div>
<div class="col-12 col-lg-7 col-xl-6 mt-2"><input type="text" class="form-control" id="mysqlAccessIpValue" name="accesshost" placeholder="192.0.2.10" disabled data-parsley-pattern="^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$" data-parsley-required-message="{% translate 'Please enter an IP address.' %}" data-parsley-pattern-message="{% translate 'Please enter a valid IPv4 address.' %}"></div>
</div>
<div class="col-12">
<div class="form-check"><input class="form-check-input" type="radio" name="access" value="any" id="mysqlAccessAny"><label class="form-check-label fw-semibold" for="mysqlAccessAny">{% translate "Allow from any host (%)" %}</label></div>
<div class="form-text ms-4">{% translate "Not recommended. This permits connection attempts from any network address." %}</div>
</div>
</div>
</fieldset></div>
</div></div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-3"><button type="button" id="reviewMysqlUser" class="btn btn-primary"><i data-lucide="user-round-plus"></i>{% translate "Create MySQL User" %}</button><a href="{% url 'mysql_users' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div>
</form>
<div class="modal fade" id="createMysqlUserModal" tabindex="-1" aria-labelledby="createMysqlUserTitle" 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="createMysqlUserTitle">{% translate "Create MySQL User" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the new database login." %}</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"><div class="eenos-modal-info-icon"><i data-lucide="user"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "MySQL user" %}</div><div class="eenos-modal-info-value font-monospace" id="mysqlUserLabel"></div></div></div></div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" id="confirmMysqlUser" class="btn btn-primary"><i data-lucide="check"></i>{% translate "Create User" %}</button></div>
</div></div></div>
{% endblock %}
{% block extra_js %}
<script>
(function($){"use strict";$(function(){
const form=$("#mysqlUserForm"),local=$("#mysqlLocalHost"),ip=$("#mysqlAccessIpValue");
function syncAccess(){const mode=$("input[name=access]:checked").val();local.prop("disabled",mode!=="local").prop("required",mode==="local");ip.prop("disabled",mode!=="ip").prop("required",mode==="ip")}
function selectedHost(){const mode=$("input[name=access]:checked").val();return mode==="local"?local.val():mode==="ip"?ip.val().trim():"%"}
$("input[name=access]").on("change",syncAccess);syncAccess();
$("#reviewMysqlUser").on("click",function(){const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#access_host").val(selectedHost());$("#mysqlUserLabel").text($(".myuser").val()+"_"+$("#mysqlUsername").val().trim());bootstrap.Modal.getOrCreateInstance(document.getElementById("createMysqlUserModal")).show()});
$("#confirmMysqlUser").on("click",function(){$("#createuser").val("yes");document.getElementById("mysqlUserForm").submit()});
})})(jQuery);
</script>
{% endblock %}