shift73k/lib/shift73k_web/live/user_management/form_component.html.leex

<%= form_for @changeset, "#", [
    phx_target: @myself,
    phx_change: "validate",
    phx_submit: "save"
  ], fn f -> %>

  <div class="modal-body">

    <%= label f, :email, class: "form-label" %>
    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
      <%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
      <%= email_input f, :email,
          value: input_value(f, :email),
          class: input_class(f, :email, "form-control"),
          placeholder: "e.g., babka@73k.us",
          maxlength: User.max_email,
          autofocus: true,
          phx_debounce: "250",
          aria_describedby: error_ids(f, :email)
        %>
      <%= error_tag f, :email %>
    </div>

    <%= label f, :password, class: "form-label" %>
    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
      <%= password_input f, :password,
          value: input_value(f, :password),
          class: input_class(f, :password, "form-control"),
          maxlength: User.max_password,
          aria_describedby: error_ids(f, :password)
        %>
      <%= error_tag f, :password %>
    </div>

    <%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
      <%= label f, :role, class: "form-label" %>
      <div class="inner-addon left-addon mb-3">
        <%= icon_div @socket, "bi-shield", [class: "icon is-left text-muted fs-5"] %>
        <%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
        <span class="valid-feedback text-primary" style="display: block;">
          <%= role_description(input_value(f, :role)) %>
        </span>
      </div>
    <% else %>
      <%= hidden_input f, :role, value: input_value(f, :role) %>
    <% end %>

  </div>
  <div class="modal-footer">

    <%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
    <%= submit "Save",
        class: "btn btn-primary ",
        disabled: !@changeset.valid?,
        aria_disabled: !@changeset.valid? && "true" || false,
        phx_disable_with: "Saving..."
      %>

  </div>

<% end %>