File: //proc/676643/root/usr/local/CyberCP/userManagment/templates/userManagment/createUser.html
{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Create New User - CyberPanel" %}{% endblock %}
{% block content %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
body {
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
padding: 20px;
}
.page-container {
max-width: 1200px;
margin: 0 auto;
}
.content-card {
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary, #2f3640);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--accent-color, #5b5fcf);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
overflow: hidden;
margin-bottom: 1.5rem;
}
.form-col-6 {
float: left;
width: 48%;
margin-right: 4%;
}
.form-col-6:last-child {
margin-right: 0;
}
.form-label {
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
/* Select dropdown styles for Windows compatibility */
select.form-control {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
padding-right: 40px;
line-height: 1.5;
min-height: 44px;
}
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
/* Fix for Windows Edge and Chrome */
select.form-control::-ms-expand {
display: none;
}
select.form-control option {
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
}
select.form-control:focus {
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
border: none;
border-radius: 8px;
padding: 0.75rem 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(91, 95, 207, 0.3);
color: white;
cursor: pointer;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
}
.btn-generate {
background: var(--success-text, #10b981);
border: none;
color: white;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-generate:hover {
background: var(--success-text, #0ea271);
transform: translateY(-2px);
}
.btn-row {
overflow: hidden;
}
.btn-col-8 {
float: left;
width: 75%;
margin-right: 5%;
}
.btn-col-4 {
float: left;
width: 20%;
}
.alert {
border-radius: 8px;
padding: 1rem 1.5rem;
margin-top: 1rem;
border: none;
}
.alert-success {
background: var(--success-bg, rgba(16, 185, 129, 0.1));
color: var(--success-text, #065f46);
}
.alert-danger {
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
color: var(--danger-text, #991b1b);
}
.error-text {
color: var(--danger-text, #ef4444);
font-size: 0.875rem;
margin-top: 0.5rem;
}
.loading-icon {
width: 20px;
height: 20px;
margin-left: 10px;
}
.help-text {
color: var(--text-secondary, #8893a7);
font-size: 0.875rem;
margin-top: 0.25rem;
}
@media (max-width: 768px) {
.form-col-6 {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
.btn-col-8, .btn-col-4 {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
.page-container {
padding-left: 12px;
padding-right: 12px;
}
.page-header {
padding: 2rem 0;
}
.page-header h1 {
font-size: 2rem;
}
.form-card {
padding: 1.5rem;
}
}
</style>
<div class="page-wrapper" ng-controller="createUserCtr">
<div class="page-container">
<div class="content-card">
<h3 class="section-title">{% trans "Create New User" %}</h3>
<form name="createUser" action="/">
<div class="form-row">
<div class="form-col-6">
<div class="form-group">
<label class="form-label">{% trans "First Name" %}</label>
<input name="firstName" ng-pattern="/^[a-zA-Z ]+$/" type="text" class="form-control"
ng-model="firstName" required>
<div ng-show="createUser.firstName.$error.pattern" class="error-text">
{% trans "First Name should contain only alphabetic characters." %}
</div>
</div>
</div>
<div class="form-col-6">
<div class="form-group">
<label class="form-label">{% trans "Last Name" %}</label>
<input name="lastName" ng-pattern="/^[a-zA-Z ]+$/" type="text" class="form-control"
ng-model="lastName" required>
<div ng-show="createUser.lastName.$error.pattern" class="error-text">
{% trans "Last Name should contain only alphabetic characters." %}
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">{% trans "Email Address" %}</label>
<input name="email" type="email" class="form-control" ng-model="email" required>
<div ng-show="createUser.email.$error.email" class="error-text">
{% trans "Please enter a valid email address" %}
</div>
</div>
<div class="form-row">
<div class="form-col-6">
<div class="form-group">
<label class="form-label">{% trans "Access Control List (ACL)" %}</label>
<select ng-model="selectedACL" class="form-control">
{% for items in aclNames %}
<option>{{ items }}</option>
{% endfor %}
</select>
<p class="help-text">{% trans "Select the permission set for this user" %}</p>
</div>
</div>
<div class="form-col-6">
<div class="form-group">
<label class="form-label">{% trans "Websites Limit" %}</label>
<input name="websitesLimits" placeholder="0 = Unlimited" type="number" class="form-control"
ng-model="websitesLimits" required>
<p class="help-text">{% trans "Maximum number of websites this user can create" %}</p>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">{% trans "Username" %}</label>
<input type="text" class="form-control" ng-model="userName" required>
<p class="help-text">{% trans "Choose a unique username for login" %}</p>
</div>
<div class="form-group">
<label class="form-label">{% trans "Password" %}</label>
<div class="btn-row">
<div class="btn-col-8">
<input name="password" type="password" class="form-control" ng-model="password" required>
</div>
<div class="btn-col-4">
<button type="button" ng-click="generatePassword()" class="btn-generate" style="width: 100%;">
<i class="fa fa-magic"></i> {% trans "Generate" %}
</button>
</div>
</div>
</div>
<div ng-hide="generatedPasswordView" class="form-group">
<label class="form-label">{% trans "Generated Password" %}</label>
<div class="btn-row">
<div class="btn-col-8">
<input type="text" class="form-control" ng-model="password" readonly>
</div>
<div class="btn-col-4">
<button type="button" ng-click="usePassword()" class="btn-primary" style="width: 100%;">
<i class="fa fa-check"></i> {% trans "Use" %}
</button>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">{% trans "Security Level" %}</label>
<select ng-init="securityLevels={{ securityLevels }};securityLevel='HIGH'"
ng-model="securityLevel" ng-options="s for s in securityLevels track by s"
class="form-control">
</select>
<p class="help-text">{% trans "Choose the security level for this account" %}</p>
</div>
<div class="form-group" style="margin-top: 2rem;">
<button type="button" ng-click="createUserFunc()" class="btn-primary">
<i class="fa fa-user-plus"></i> {% trans "Create User" %}
</button>
</div>
<div ng-hide="userCreated" class="alert alert-success">
<i class="fa fa-check-circle"></i> {% trans "Account with username:" %} <strong>{$ userName $}</strong> {% trans "is successfully created." %}
</div>
<div ng-hide="userCreationFailed" class="alert alert-danger">
<i class="fa fa-exclamation-circle"></i> {% trans "Cannot create user. Error message:" %} {$ errorMessage $}
</div>
<div ng-hide="couldNotConnect" class="alert alert-danger">
<i class="fa fa-times-circle"></i> {% trans "Could not connect to server. Please refresh this page." %}
</div>
<div ng-hide="combinedLength" class="alert alert-danger">
<i class="fa fa-exclamation-triangle"></i> {% trans "Length of first and last name combined should be less than or equal to 20 characters" %}
</div>
</form>
</div>
</div>
</div>
{% endblock %}