getnamingo-registry/cp/resources/views/admin/users/createUser.twig

{% extends "layouts/app.twig" %}

{% block title %}{{ __('Create New User') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <div class="mb-1">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <a href="{{route('home')}}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" /><rect x="10" y="12" width="4" height="4" /></svg></a>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="{{route('listUsers')}}">{{ __('List Users') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                      {{ __('Create New User') }}
                    </li>
                  </ol>
                </div>
                <h2 class="page-title">
                  {{ __('Create New User') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <form method="post" action="/user/create" id="create-user-form">
              {{ csrf.field | raw }}
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <!-- Email -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Email') }}</label>
                          <input type="email" class="form-control" name="email" placeholder="{{ __('Enter email') }}" required>
                        </div>
                      </div>
                          
                      <!-- Username -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Username') }}</label>
                          <input type="text" class="form-control" name="username" placeholder="{{ __('Enter username') }}" required>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Password') }}</label>
                          <input type="password" class="form-control" name="password" placeholder="{{ __('Password') }}" required>
                        </div>
                      </div>
                          
                      <!-- Confirm Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Confirm Password') }}</label>
                          <input type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}" required>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Status -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Status') }}</label>
                          <select class="form-select" name="status" required>
                            <option value="0">{{ __('Active') }}</option>
                            <option value="4">{{ __('Pending Review') }}</option>
                          </select>
                        </div>
                      </div>
                          
                      <!-- Verified -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Verified') }}</label>
                          <select class="form-select" name="verified" required>
                            <option value="1">{{ __('Yes') }}</option>
                            <option value="0">{{ __('No') }}</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <!-- Role -->
                    <div class="row">
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">{{ __('Type') }}</label>
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="role-toggle" name="role" value="admin">
                            <label class="form-check-label" for="role-toggle" id="role-label">{{ __('Registrar') }}</label>
                          </div>
                          <!-- Hidden input to ensure "registrar" is sent when the toggle is off -->
                          <input type="hidden" name="role" id="hidden-role" value="registrar">
                        </div>
                      </div>
                    </div>

                    <!-- Registrar-specific fields -->
                    <div id="registrar-fields" style="display: none;">
                      <div class="mb-3">
                        <label class="form-label">{{ __('Registrar Association') }}</label>
                        <select class="form-select" name="registrar_id">
                          <option value="" disabled selected>{{ __('Select registrar') }}</option>
                          {% for registrar in registrars %}
                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>
                      
                  <div class="card-footer text-end">
                    <div class="d-flex">
                      <button type="submit" class="btn btn-primary">{{ __('Create User') }}</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const roleToggle = document.getElementById("role-toggle");
    const hiddenRoleInput = document.getElementById("hidden-role");
    const registrarFields = document.getElementById("registrar-fields");
    const roleLabel = document.getElementById("role-label");

    // Function to toggle registrar fields, role value, and label text
    function updateRole() {
        if (roleToggle.checked) {
            // Admin role selected
            hiddenRoleInput.value = "admin";
            roleLabel.textContent = "Admin"; // Update label to Admin
            registrarFields.style.display = "none"; // Hide registrar-specific fields
        } else {
            // Registrar role selected
            hiddenRoleInput.value = "registrar";
            roleLabel.textContent = "Registrar"; // Update label to Registrar
            registrarFields.style.display = "block"; // Show registrar-specific fields
        }
    }

    // Attach event listener to the toggle
    roleToggle.addEventListener("change", updateRole);

    // Set initial state on page load
    updateRole();
});
</script>
{% endblock %}