{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create MongoDB User" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Create MongoDB User" %}</h1><div class="eenos-page-subtitle">{% translate "Create a MongoDB database login." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'mongodb_users' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="users"></i>{% translate "MongoDB 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 "MongoDB" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create MongoDB 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 MongoDB 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 MongoDB user does not automatically grant database access. After creation, assign the user to the required database." %}</div></div></div>
<form method="post" id="mongodbUserForm" class="eenos-form" data-parsley-validate>
{% csrf_token %}<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, MongoDB server, and password." %}</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="mongodbUsername">{% translate "Database Username" %}</label><div class="input-group"><span class="input-group-text font-monospace">{{ user }}_</span><input type="text" id="mongodbUsername" 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="mongodbUserServer">{% translate "MongoDB Server" %}</label><select id="mongodbUserServer" class="form-select eenos-select-search" name="server" required data-parsley-required-message="{% translate 'Please select a MongoDB server.' %}"><option value="">{% translate "Select MongoDB server" %}</option>{% for server, settings in servers.items %}<option value="{{ server }}" {% if form.server.value == server %}selected{% endif %}>{{ server }} (MongoDB {{ settings.version }})</option>{% endfor %}</select></div>
<div class="col-12 col-lg-7 col-xl-6"><label class="form-label" for="mongodbUserPassword">{% translate "Password" %}</label><div class="eenos-password-generator"><div class="input-group"><div class="eenos-password-control"><input type="password" id="mongodbUserPassword" 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 MongoDB 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></div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-3"><button type="button" id="reviewMongodbUser" class="btn btn-primary"><i data-lucide="user-round-plus"></i>{% translate "Create MongoDB User" %}</button><a href="{% url 'mongodb_users' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div>
</form>
<div class="modal fade" id="createMongodbUserModal" tabindex="-1" aria-labelledby="createMongodbUserTitle" 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="createMongodbUserTitle">{% translate "Create MongoDB 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 "MongoDB user" %}</div><div class="eenos-modal-info-value font-monospace" id="mongodbUserLabel"></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="confirmMongodbUser" 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=$("#mongodbUserForm");
$("#reviewMongodbUser").on("click",function(){const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#mongodbUserLabel").text($(".myuser").val()+"_"+$("#mongodbUsername").val().trim());bootstrap.Modal.getOrCreateInstance(document.getElementById("createMongodbUserModal")).show()});
$("#confirmMongodbUser").on("click",function(){$("#createuser").val("yes");document.getElementById("mongodbUserForm").submit()});
})})(jQuery);
</script>
{% endblock %}