LuHost/views/users/new.ejs

<%
const body = `
<div style="max-width: 500px; margin: 2rem auto;">
    <div class="card">
        <div class="card-header">
            <h2>Create New Administrator</h2>
            <p style="color: var(--text-secondary); margin: 0;">
                Grant administrative access to a new user
            </p>
        </div>
        
        ${typeof error !== 'undefined' ? `
            <div class="alert alert-danger">
                <strong>Error:</strong> ${error}
            </div>
        ` : ''}
        
        <div class="alert alert-info">
            <strong>Authority Note:</strong> This user will have full administrative privileges over the Luanti server, including the ability to create additional accounts.
        </div>
        
        <form method="POST" action="/users/create">
            ${typeof csrfToken !== 'undefined' && csrfToken ? `<input type="hidden" name="_csrf" value="${csrfToken}">` : ''}
            <div class="form-group">
                <label for="username">Username*</label>
                <input type="text" 
                       id="username" 
                       name="username" 
                       class="form-control" 
                       value="${typeof formData !== 'undefined' ? formData.username || '' : ''}"
                       required 
                       pattern="[a-zA-Z0-9_-]{3,20}"
                       title="3-20 characters, letters, numbers, underscore, or hyphen only"
                       data-validate-name
                       autofocus
                       autocomplete="username">
                <small style="color: var(--text-secondary);">3-20 characters, letters, numbers, underscore, or hyphen only</small>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="password">Password*</label>
                    <input type="password" 
                           id="password" 
                           name="password" 
                           class="form-control" 
                           required
                           minlength="8"
                           autocomplete="new-password">
                    <small style="color: var(--text-secondary);">At least 8 characters long</small>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password*</label>
                    <input type="password" 
                           id="confirmPassword" 
                           name="confirmPassword" 
                           class="form-control" 
                           required
                           minlength="8"
                           autocomplete="new-password">
                </div>
            </div>
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem;">
                <a href="/users" class="btn btn-secondary">
                    Cancel
                </a>
                <button type="submit" class="btn btn-success">
                    Create Administrator
                </button>
            </div>
        </form>
    </div>
    
    <div style="text-align: center; margin-top: 1rem; color: var(--text-secondary); font-size: 0.875rem;">
        <p>This user will be able to perform all server management tasks and create additional accounts.</p>
    </div>
</div>

<script>
// Client-side password confirmation validation
document.getElementById('confirmPassword').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirmPassword = this.value;
    
    if (password && confirmPassword) {
        if (password !== confirmPassword) {
            this.setCustomValidity('Passwords do not match');
        } else {
            this.setCustomValidity('');
        }
    }
});

document.getElementById('password').addEventListener('input', function() {
    const confirmPassword = document.getElementById('confirmPassword');
    if (confirmPassword.value) {
        confirmPassword.dispatchEvent(new Event('input'));
    }
});
</script>
`;
%>

<%- include('../layout', { body: body, currentPage: 'users', title: title }) %>