Spry/src/Users/Components/UserFormComponent.vala

using Spry;
using Inversion;
using Astralis;
using Invercargill;
using Invercargill.DataStructures;

namespace Spry.Users.Components {

    /**
     * UserFormComponent - Modal form for creating and editing users.
     *
     * This component provides:
     * - Modal dialog for create/edit operations
     * - Form fields: username, email, password (create only), confirm password
     * - Validation with error messages
     * - Permission editor integration
     * - HTMX-based submission
     *
     * The component can operate in two modes:
     * - Create mode: All fields including password are required
     * - Edit mode: Password is optional; only set if changing
     *
     * Usage:
     *   // Create mode:
     *   var form = factory.create<UserFormComponent>();
     *   form.show_create();
     *
     *   // Edit mode:
     *   var form = factory.create<UserFormComponent>();
     *   form.set_user(existing_user);
     */
    public class UserFormComponent : Component {

        private UserService user_service = inject<UserService>();
        private ComponentFactory factory = inject<ComponentFactory>();
        private HttpContext http_context = inject<HttpContext>();

        // =========================================================================
        // State Properties
        // =========================================================================

        private User? _editing_user = null;
        private bool _is_visible = false;
        private string? _error_message = null;
        private string? _success_message = null;

        // =========================================================================
        // Configuration Properties
        // =========================================================================

        /**
         * Whether to display as a modal dialog.
         * Default: true
         */
        public bool is_modal { get; set; default = true; }

        // =========================================================================
        // Public API
        // =========================================================================

        /**
         * Sets the user to edit and shows the form in edit mode.
         *
         * @param user The user to edit
         */
        public void set_user(User user) {
            _editing_user = user;
            _is_visible = true;
            _error_message = null;
            _success_message = null;
        }

        /**
         * Shows the form in create mode.
         */
        public void show_create() {
            _editing_user = null;
            _is_visible = true;
            _error_message = null;
            _success_message = null;
        }

        /**
         * Hides the form and clears state.
         */
        public void hide() {
            _is_visible = false;
            _editing_user = null;
            _error_message = null;
            _success_message = null;
        }

        /**
         * Returns true if in create mode (not editing an existing user).
         */
        public bool is_creating {
            get { return _editing_user == null; }
        }

        /**
         * Returns true if the form is currently visible.
         */
        public bool visible {
            get { return _is_visible; }
        }

        /**
         * Gets the current error message, if any.
         */
        public string? error_message {
            get { return _error_message; }
        }

        // =========================================================================
        // Component Implementation
        // =========================================================================

        public override string markup { get {
            return """
            <div class="spry-user-form-container" sid="form-container" hx-swap="outerHTML">
                <script spry-res="htmx.js"></script>

                <!-- Hidden state (no modal visible) -->
                <div spry-if="!this._is_visible" sid="hidden-state"></div>

                <!-- Modal Overlay (shown when visible) -->
                <div spry-if="this._is_visible" class="modal-overlay" sid="modal">
                    <div class="modal-content" sid="modal-content">
                        <div class="modal-header">
                            <h3 content-expr="this.is_creating ? 'Create New User' : 'Edit User'"></h3>
                            <button sid="close-btn" 
                                    spry-action=":Cancel" 
                                    spry-target="form-container"
                                    class="close-btn">&times;</button>
                        </div>

                        <!-- Error Message -->
                        <div spry-if="this._error_message != null" class="error alert" sid="error">
                            <span content-expr="this._error_message"></span>
                        </div>

                        <!-- Form -->
                        <form sid="form" spry-action=":Save" spry-target="form-container">
                            <input type="hidden" name="user_id" sid="user-id"/>

                            <div class="form-body">
                                <!-- Username -->
                                <div class="form-group">
                                    <label for="username">Username *</label>
                                    <input type="text" 
                                           name="username" 
                                           sid="form-username" 
                                           required 
                                           minlength="3" 
                                           pattern="[a-zA-Z0-9_]+"
                                           placeholder="Enter username"
                                           class="form-input"/>
                                    <small class="form-hint">Alphanumeric characters and underscores only, minimum 3 characters</small>
                                </div>

                                <!-- Email -->
                                <div class="form-group">
                                    <label for="email">Email *</label>
                                    <input type="email" 
                                           name="email" 
                                           sid="form-email" 
                                           required
                                           placeholder="Enter email address"
                                           class="form-input"/>
                                </div>

                                <!-- Password (Create Mode) -->
                                <div class="form-group" spry-if="this.is_creating">
                                    <label for="password">Password *</label>
                                    <input type="password" 
                                           name="password" 
                                           sid="form-password"
                                           required 
                                           minlength="8"
                                           placeholder="Enter password"
                                           class="form-input"/>
                                    <small class="form-hint">Minimum 8 characters</small>
                                </div>

                                <!-- Password (Edit Mode - Optional) -->
                                <div class="form-group" spry-if="!this.is_creating">
                                    <label for="new_password">New Password</label>
                                    <input type="password" 
                                           name="new_password" 
                                           sid="form-new-password"
                                           minlength="8"
                                           placeholder="Leave blank to keep current password"
                                           class="form-input"/>
                                    <small class="form-hint">Leave blank to keep current password. Minimum 8 characters if changing.</small>
                                </div>

                                <!-- Permission Editor -->
                                <div class="form-group">
                                    <label>Permissions</label>
                                    <spry-component name="PermissionEditorComponent" sid="permission-editor"/>
                                </div>
                            </div>

                            <!-- Form Actions -->
                            <div class="form-actions">
                                <button type="submit" sid="save-btn" class="btn btn-primary">
                                    <span spry-if="this.is_creating">Create User</span>
                                    <span spry-else>Save Changes</span>
                                </button>
                                <button type="button" 
                                        sid="cancel-btn" 
                                        spry-action=":Cancel" 
                                        spry-target="form-container"
                                        class="btn btn-secondary">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            """;
        }}

        public override async void prepare() throws Error {
            if (!_is_visible) {
                return;
            }

            // Pre-populate form fields if editing
            if (_editing_user != null) {
                this["user-id"].set_attribute("value", _editing_user.id);
                this["form-username"].set_attribute("value", _editing_user.username);
                this["form-email"].set_attribute("value", _editing_user.email);

                // Set up permission editor with user's current permissions
                var perm_editor = get_component_child<PermissionEditorComponent>("permission-editor");
                perm_editor.set_permissions(_editing_user.permissions);
            } else {
                // Clear permission editor for create mode
                var perm_editor = get_component_child<PermissionEditorComponent>("permission-editor");
                perm_editor.clear_all();
            }
        }

        public async override void handle_action(string action) throws Error {
            switch (action) {
                case "Save":
                    yield save_user();
                    break;
                case "Cancel":
                    hide();
                    break;
            }
        }

        // =========================================================================
        // Private Helpers
        // =========================================================================

        private async void save_user() throws Error {
            var query = http_context.request.query_params;

            // Get form values
            var user_id = get_query_value(query, "user_id");
            var username = get_query_value(query, "username").strip();
            var email = get_query_value(query, "email").strip();

            // Validate username
            if (username.length < 3) {
                _error_message = "Username must be at least 3 characters";
                return;
            }

            // Validate username format (alphanumeric + underscore)
            if (!is_valid_username(username)) {
                _error_message = "Username can only contain letters, numbers, and underscores";
                return;
            }

            // Validate email
            if (email.length == 0) {
                _error_message = "Email is required";
                return;
            }

            if (!is_valid_email(email)) {
                _error_message = "Please enter a valid email address";
                return;
            }

            // Get permissions from editor
            var perm_editor = get_component_child<PermissionEditorComponent>("permission-editor");
            var permissions = perm_editor.get_selected();

            try {
                if (user_id.length == 0) {
                    // Create new user
                    var password = get_query_value(query, "password");

                    if (password.length < 8) {
                        _error_message = "Password must be at least 8 characters";
                        return;
                    }

                    string? create_error;
                    var user = user_service.create_user(username, email, password, out create_error);

                    if (user == null) {
                        _error_message = create_error ?? "Failed to create user";
                        return;
                    }

                    // Set permissions if any were selected
                    if (permissions.length > 0) {
                        user.permissions = permissions;
                        string? update_error;
                        if (!user_service.update_user(user, out update_error)) {
                            _error_message = update_error ?? "Failed to set permissions";
                            return;
                        }
                    }

                    _success_message = "User created successfully";
                    hide();
                } else {
                    // Update existing user
                    var user = user_service.get_user(user_id);
                    if (user == null) {
                        _error_message = "User not found";
                        return;
                    }

                    // Update fields
                    user.username = username;
                    user.email = email;
                    user.permissions = permissions;

                    // Update password if provided
                    var new_password = get_query_value(query, "new_password");
                    if (new_password.length > 0) {
                        if (new_password.length < 8) {
                            _error_message = "New password must be at least 8 characters";
                            return;
                        }
                        string? password_error;
                        if (!user_service.set_password(user, new_password, out password_error)) {
                            _error_message = password_error ?? "Failed to update password";
                            return;
                        }
                    }

                    // Save changes
                    string? update_error;
                    if (!user_service.update_user(user, out update_error)) {
                        _error_message = update_error ?? "Failed to update user";
                        return;
                    }

                    _success_message = "User updated successfully";
                    hide();
                }
            } catch (Error e) {
                _error_message = "Error: %s".printf(e.message);
            }
        }

        private string get_query_value(Catalogue<string, string> query, string key) {
            var value = query.get_any_or_default(key);
            return value != null ? ((!)value).strip() : "";
        }

        private bool is_valid_username(string username) {
            if (username.length == 0) return false;
            foreach (var c in username.data) {
                if (!((c >= 'a' && c <= 'z') ||
                      (c >= 'A' && c <= 'Z') ||
                      (c >= '0' && c <= '9') ||
                      c == '_')) {
                    return false;
                }
            }
            return true;
        }

        private bool is_valid_email(string email) {
            // Basic email validation: contains @ and at least one . after @
            var at_index = email.index_of("@");
            if (at_index < 1) return false;
            var dot_index = email.index_of(".", at_index);
            return dot_index > at_index + 1 && dot_index < email.length - 1;
        }
    }
}