{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "MySQL Users" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "MySQL Users" %}</h1><div class="eenos-page-subtitle">{% translate "Manage database logins, passwords, and permitted access hosts." %}</div></div><div class="col-12 col-sm-auto d-flex flex-column flex-sm-row gap-2"><a href="{% url 'mysql_add_user' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2"><i data-lucide="user-round-plus"></i>{% translate "Create MySQL User" %}</a><a href="{% url 'mysql_add_user_to_db' %}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2"><i data-lucide="user-check"></i>{% translate "Assign User" %}</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 "MySQL Users" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-card"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "User Management" %}</h2></div><div class="eenos-card-action-icon"><i data-lucide="users"></i></div></div><div class="table-responsive"><table id="mysqlUsersTable" class="table align-middle w-100"><thead><tr><th>{% translate "Username" %}</th><th>{% translate "MySQL Server" %}</th><th>{% translate "Access Host" %}</th><th>{% translate "Assigned Databases" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead></table></div></div>
<div class="modal fade" id="assignedDatabasesModal" tabindex="-1" aria-labelledby="assignedDatabasesTitle" 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 d-flex align-items-center gap-2" id="assignedDatabasesTitle"><i data-lucide="database"></i>{% translate "Assigned Databases" %}</h2><div class="small text-muted mt-1">{% translate "Databases this MySQL user can access." %}</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-3"><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="assignedDatabaseUser"></div></div></div>
<div class="small fw-semibold text-muted text-uppercase mb-2" id="assignedDatabaseCount"></div>
<div class="list-group" id="assignedDatabaseList"></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Close" %}</button></div>
</div></div></div>
<div class="modal fade" id="mysqlPasswordModal" tabindex="-1" aria-labelledby="mysqlPasswordTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><form method="post" id="mysqlPasswordForm" class="modal-content eenos-form" data-parsley-validate>{% csrf_token %}
<input type="hidden" name="change_user_password" value="yes"><input type="hidden" name="dbuser" id="passwordMysqlUser">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="mysqlPasswordTitle"><i data-lucide="key-round"></i>{% translate "Change MySQL Password" %}</h2><div class="small text-muted mt-1">{% translate "Replace the password used by this 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 mb-4"><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="passwordMysqlLabel"></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 "Update connected applications" %}</div><div class="eenos-amber-notice-text">{% translate "Applications using the old password will stop connecting until their database configuration is updated." %}</div></div></div>
<label class="form-label" for="newMysqlPassword">{% translate "New Password" %}</label>
<div class="eenos-password-generator"><div class="input-group email-password-input-group"><div class="eenos-password-control"><input type="password" id="newMysqlPassword" class="form-control form-control-sm eenos-password-input" name="password" required minlength="8" autocomplete="new-password" placeholder="{% translate 'Enter a new password' %}" data-parsley-required-message="{% translate 'Please enter a new MySQL password.' %}" data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}"></div><button type="button" class="btn btn-sm 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-sm btn-outline-primary eenos-password-generate" title="{% translate 'Generate secure password' %}" aria-label="{% 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="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="submit" class="btn btn-primary"><i data-lucide="key-round"></i>{% translate "Change Password" %}</button></div>
</form></div></div>
<div class="modal fade" id="mysqlAccessModal" tabindex="-1" aria-labelledby="mysqlAccessTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><form method="post" id="mysqlAccessForm" class="modal-content eenos-form" data-parsley-validate>{% csrf_token %}
<input type="hidden" name="change_access_host" value="yes"><input type="hidden" name="dbuser" id="accessMysqlUser">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="mysqlAccessTitle"><i data-lucide="network"></i>{% translate "Change Access Host" %}</h2><div class="small text-muted mt-1">{% translate "Control where this MySQL user is allowed to connect from." %}</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-3"><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="accessMysqlLabel"></div></div></div>
<div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="map-pin"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Current access host" %}</div><div class="eenos-modal-info-value font-monospace" id="currentMysqlAccessHost"></div></div></div>
<input type="hidden" id="newMysqlAccessHost" name="access_host">
<fieldset><legend class="form-label">{% translate "New Access Host" %}</legend>
<div class="d-grid gap-3">
<div class="form-check"><input class="form-check-input mysql-access-mode" type="radio" name="access_mode" id="mysqlAccessLocal" value="local" checked><label class="form-check-label fw-semibold" for="mysqlAccessLocal">{% translate "Local MySQL server or hosted domain" %}</label><div class="mt-2 ms-0 ms-sm-4" id="mysqlLocalHostFields"><select class="form-select eenos-select-search" id="localMysqlAccessHost" data-parsley-required-message="{% translate 'Please select a MySQL access host.' %}" data-parsley-errors-container="#mysqlAccessHostErrors"><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="form-check"><input class="form-check-input mysql-access-mode" type="radio" name="access_mode" id="mysqlAccessIp" value="ip"><label class="form-check-label fw-semibold" for="mysqlAccessIp">{% translate "Allow from a specific IPv4 address" %}</label><div class="mt-2 ms-0 ms-sm-4 d-none" id="mysqlIpHostFields"><input type="text" class="form-control" id="customMysqlAccessHost" inputmode="decimal" placeholder="{% translate 'Enter an IPv4 address' %}" data-parsley-pattern="^(?:(?:25[0-5]|2[0-4][0-9]|1?[0-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1?[0-9]?[0-9])$" data-parsley-required-message="{% translate 'Please enter an IPv4 address.' %}" data-parsley-pattern-message="{% translate 'Please enter a valid IPv4 address.' %}" data-parsley-errors-container="#mysqlAccessHostErrors"></div></div>
<div class="form-check"><input class="form-check-input mysql-access-mode" type="radio" name="access_mode" id="mysqlAccessAny" value="any"><label class="form-check-label fw-semibold" for="mysqlAccessAny">{% translate "Allow from any host" %}</label><div class="form-text text-warning">{% translate "Not recommended: this permits connection attempts from any IP address." %}</div></div>
</div><div id="mysqlAccessHostErrors" class="mt-2"></div></fieldset>
<div class="eenos-amber-notice eenos-amber-notice-warning mt-4 mb-0" role="alert"><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 "Connection source will change" %}</div><div class="eenos-amber-notice-text">{% translate "Connections from the previous host may stop working immediately after this update." %}</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="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Update Access Host" %}</button></div>
</form></div></div>
<div class="modal fade" id="deleteMysqlUserModal" tabindex="-1" aria-labelledby="deleteMysqlUserTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><form method="post" class="modal-content">{% csrf_token %}
<input type="hidden" name="del_user" value="yes"><input type="hidden" name="dbuser" id="deleteMysqlUser">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2 text-danger" id="deleteMysqlUserTitle"><i data-lucide="user-x"></i>{% translate "Delete MySQL User" %}</h2><div class="small text-muted mt-1">{% translate "Permanently remove this 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 mb-4"><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 selected for deletion" %}</div><div class="eenos-modal-info-value font-monospace" id="deleteMysqlUserLabel"></div></div></div>
<div class="eenos-notice eenos-notice-danger mb-3"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "This action cannot be undone" %}</div><div class="eenos-notice-text">{% translate "The login credentials and access permissions for this MySQL user will be permanently removed." %}</div></div></div>
<div class="small text-muted d-flex align-items-start gap-2"><i data-lucide="info"></i><span>{% translate "Deleting the user does not delete any MySQL databases or their stored data." %}</span></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Keep User" %}</button><button type="submit" class="btn btn-danger"><i data-lucide="user-x"></i>{% translate "Permanently Delete" %}</button></div>
</form></div></div>
{% endblock %}
{% block extra_js %}<script>
(function($){"use strict";$(function(){
const esc=v=>$("<div>").text(v==null?"":v).html(),decode=el=>JSON.parse(decodeURIComponent(el.dataset.row)),assignedDatabasesModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("assignedDatabasesModal")),passwordModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("mysqlPasswordModal")),accessModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("mysqlAccessModal")),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteMysqlUserModal"));
const table=$("#mysqlUsersTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'mysql_users_data' %}",dataSrc:"data"},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No MySQL users have been created.' %}",zeroRecords:"{% translate 'No matching users found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[
{data:"username",responsivePriority:1,className:"text-nowrap",render:(v,t)=>t==="display"?'<div class="d-inline-flex align-items-center gap-2"><span class="d-inline-flex align-items-center gap-2 font-monospace fw-semibold"><i data-lucide="user"></i>'+esc(v)+'</span><button type="button" class="btn btn-sm btn-outline-secondary mysql-copy-user" data-user="'+encodeURIComponent(v)+'" title="{% translate "Copy username" %}" aria-label="{% translate "Copy username" %}"><i data-lucide="copy"></i></button></div>':v},
{data:"host",responsivePriority:4,className:"text-nowrap",render:(v,t)=>t==="display"?'<span class="eenos-badge eenos-badge-neutral">'+esc(v||"—")+"</span>":v},
{data:"access_host",responsivePriority:2,className:"text-nowrap",render:(v,t,row)=>{if(t!=="display")return v;const host=String(v||""),encoded=encodeURIComponent(JSON.stringify(row));let badge='<span class="text-muted">—</span>';if(host==="%")badge='<span class="badge eenos-badge-warning">{% translate "Any host" %} (%)</span>';else if(["localhost","127.0.0.1","::1"].includes(host.toLowerCase()))badge='<span class="badge eenos-badge-success">'+esc(host)+'</span>';else if(host)badge='<span class="badge eenos-badge-info">'+esc(host)+'</span>';return'<div class="eenos-dt-actions justify-content-start flex-nowrap gap-2">'+badge+'<button type="button" class="btn btn-sm btn-outline-secondary mysql-access" data-row="'+encoded+'" title="{% translate "Change access host" %}" aria-label="{% translate "Change access host" %}"><i data-lucide="network"></i></button></div>'}},
{data:"databases",responsivePriority:5,className:"text-nowrap",render:(v,t,row)=>{const databases=Array.isArray(v)?v:[];if(t!=="display")return databases.join(" ");const encoded=encodeURIComponent(JSON.stringify({username:row.username,databases:databases}));return'<div class="eenos-dt-actions justify-content-start flex-nowrap gap-2"><span class="badge eenos-badge-neutral">'+databases.length+'</span>'+(databases.length?'<button type="button" class="btn btn-sm btn-outline-primary text-nowrap view-assigned-databases" data-assignment="'+encoded+'" title="{% translate "View assigned databases" %}"><i data-lucide="database"></i><span>{% translate "View" %}</span></button>':"")+'</div>'}},
{data:null,orderable:false,searchable:false,responsivePriority:1,className:"text-end text-nowrap",render:(d,t,row)=>{if(t!=="display")return"";const encoded=encodeURIComponent(JSON.stringify(row));return'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-primary mysql-password" data-row="'+encoded+'" title="{% translate 'Change password' %}"><i data-lucide="key-round"></i></button>'+(row.actions.delete?'<button type="button" class="btn btn-sm btn-outline-danger mysql-delete" data-row="'+encoded+'" title="{% translate 'Delete user' %}"><i data-lucide="trash-2"></i></button>':"")+"</div>"}}],drawCallback:()=>lucide.createIcons()});
table.on("responsive-display",()=>lucide.createIcons());
$(document).on("click",".mysql-copy-user",async function(){const button=$(this),user=decodeURIComponent(this.dataset.user),copied=await window.EenosUapp.copyToClipboard(user);if(!copied)return;button.html('<i data-lucide="check"></i>').addClass("btn-outline-success").removeClass("btn-outline-secondary");lucide.createIcons();setTimeout(function(){button.html('<i data-lucide="copy"></i>').addClass("btn-outline-secondary").removeClass("btn-outline-success");lucide.createIcons()},1600)});
$(document).on("click",".view-assigned-databases",function(){const assignment=JSON.parse(decodeURIComponent(this.dataset.assignment)),list=$("#assignedDatabaseList").empty();$("#assignedDatabaseUser").text(assignment.username);$("#assignedDatabaseCount").text(assignment.databases.length===1?"{% translate '1 assigned database' %}":assignment.databases.length+" {% translate 'assigned databases' %}");assignment.databases.forEach(function(database){list.append('<div class="list-group-item d-flex align-items-center justify-content-between gap-3"><span class="d-flex align-items-center gap-2 min-w-0"><i data-lucide="database"></i><span class="font-monospace text-truncate">'+esc(database)+'</span><button type="button" class="btn btn-sm btn-outline-secondary copy-assigned-database flex-shrink-0" data-database="'+encodeURIComponent(database)+'" title="{% translate "Copy database name" %}" aria-label="{% translate "Copy database name" %}"><i data-lucide="copy"></i></button></span></div>')});lucide.createIcons();assignedDatabasesModal.show()});
$(document).on("click",".copy-assigned-database",async function(){const button=$(this),database=decodeURIComponent(this.dataset.database),copied=await window.EenosUapp.copyToClipboard(database);if(!copied)return;button.html('<i data-lucide="check"></i>').addClass("btn-outline-success").removeClass("btn-outline-secondary");lucide.createIcons();setTimeout(function(){button.html('<i data-lucide="copy"></i>').addClass("btn-outline-secondary").removeClass("btn-outline-success");lucide.createIcons()},1600)});
$(document).on("click",".mysql-password",function(){const row=decode(this);$("#passwordMysqlUser").val(row.username);$("#passwordMysqlLabel").text(row.username);$("#newMysqlPassword").val("").trigger("input");$("#mysqlPasswordForm").parsley().reset();passwordModal.show()});
function setMysqlAccessMode(mode){const isLocal=mode==="local",isIp=mode==="ip";$("#mysqlLocalHostFields").toggleClass("d-none",!isLocal);$("#mysqlIpHostFields").toggleClass("d-none",!isIp);$("#localMysqlAccessHost").prop("disabled",!isLocal).prop("required",isLocal);$("#customMysqlAccessHost").prop("disabled",!isIp).prop("required",isIp)}
$(document).on("change",".mysql-access-mode",function(){setMysqlAccessMode(this.value);$("#mysqlAccessForm").parsley().reset()});
$(document).on("click",".mysql-access",function(){const row=decode(this),host=String(row.access_host||""),known=$("#localMysqlAccessHost option").filter(function(){return this.value===host}).length>0,mode=host==="%"?"any":known?"local":"ip";$("#accessMysqlUser").val(row.username);$("#accessMysqlLabel").text(row.username);$("#currentMysqlAccessHost").text(host||"—");$(".mysql-access-mode[value='"+mode+"']").prop("checked",true);$("#localMysqlAccessHost").val(mode==="local"?host:"").trigger("change");$("#customMysqlAccessHost").val(mode==="ip"?host:"");setMysqlAccessMode(mode);$("#mysqlAccessForm").parsley().reset();accessModal.show()});
$(document).on("click",".mysql-delete",function(){const row=decode(this);$("#deleteMysqlUser").val(row.username);$("#deleteMysqlUserLabel").text(row.username);deleteModal.show()});
$("#mysqlPasswordForm,#mysqlAccessForm").on("submit",function(e){if(this.id==="mysqlAccessForm"){const mode=$(".mysql-access-mode:checked").val(),host=mode==="local"?$("#localMysqlAccessHost").val():mode==="ip"?$("#customMysqlAccessHost").val():"%";$("#newMysqlAccessHost").val(host)}const validator=$(this).parsley();validator.validate();if(!validator.isValid())e.preventDefault()});
})})(jQuery);
</script>{% endblock %}