ubicloud/views/project/user.erb

<% @page_title = "#{@project_data[:name]} - Users" %>
<%== render("project/user-tabbar") %>

<div class="space-y-1">
  <%== render(
    "components/breadcrumb",
    locals: {
      parts: [%w[Projects /project], [@project_data[:name], @project_data[:path]], %w[Users #]]
    }
  ) %>
  <%== render("components/page_header", locals: { title: "User Management" }) %>
</div>

<div class="grid gap-6">
  <!-- Invite user -->
  <div>
    <div class="md:flex md:items-center md:justify-between pb-1 lg:pb-2">
      <div class="min-w-0 flex-1">
        <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
          Invite a new user
        </h3>
      </div>
    </div>
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <div class="px-4 py-5 sm:p-6">
        <form action="<%= "#{@project_data[:path]}/user" %>" role="form" method="POST">
          <%== csrf_tag("#{@project_data[:path]}/user") %>
          <div class="space-y-4">
            <div>
              <p class="mt-1 text-sm text-gray-500">
                You can invite a new user to your project using one of the preconfigured access policies below. If
                you'd like to further customize permissions, you can use the
                <a href="<%= @project_data[:path] %>/user/policy" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">
                  advanced policy editor</a>.
              </p>
            </div>
            <div class="grid grid-cols-12 gap-3">
              <div class="col-span-12 sm:col-span-5">
                <%== render(
                  "components/form/text",
                  locals: {
                    name: "email",
                    type: "email",
                    attributes: {
                      required: true,
                      placeholder: "Email"
                    }
                  }
                ) %>
              </div>
              <div class="col-span-12 sm:col-span-3">
                <%== render("components/form/policy_select", locals: { name: "policy", selected: "member" }) %>
              </div>
              <div class="col-span-3 sm:col-span-2">
                <%== render("components/form/submit_button", locals: { text: "Invite" }) %>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- User List -->
  <div>
    <form id="managed-policy" action="<%= "#{@project_data[:path]}/user/policy/managed" %>" role="form" method="POST">
      <%== csrf_tag("#{@project_data[:path]}/user/policy/managed") %>
      <div class="md:flex md:items-center md:justify-between pb-1 lg:pb-2">
        <div class="min-w-0 flex-1">
          <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
            Users
          </h3>
        </div>
      </div>
      <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
        <table class="min-w-full divide-y divide-gray-300">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Email</th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Default Policy</th>
              <th scope="col" class="py-3.5 pl-3 pr-4 sm:pr-6 text-left text-sm font-semibold text-gray-900"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 bg-white">
            <% @users.each do |user| %>
              <tr id="user-<%= user[:ubid]%>">
                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                  <%= user[:email] %>
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                  <%== render(
                    "components/form/policy_select",
                    locals: {
                      name: "user_policies[#{user[:ubid]}]",
                      selected: @user_policies[user[:ubid]]
                    }
                  ) %>
                </td>
                <td class="py-4 pl-3 pr-4 text-right sm:pr-6">
                  <%== render(
                    "components/delete_button",
                    locals: {
                      text: "Remove",
                      url: "#{@project_data[:path]}/user/#{user[:ubid]}",
                      confirmation: user[:email]
                    }
                  ) %>
                </td>

              </tr>
            <% end %>
            <% @invitations.each do |invitation| %>
              <tr id="invitation-<%= invitation[:email].gsub(/\W+/, "") %>">
                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                  <%= invitation[:email] %>
                  <span
                    class="inline-flex items-baseline rounded-full ml-1 px-2 text-xs font-semibold leading-5 bg-yellow-100 text-yellow-800"
                  >
                    Invitation expires on
                    <%= invitation[:expires_at] %>
                  </span>
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                  <%== render(
                    "components/form/policy_select",
                    locals: {
                      name: "invitation_policies[#{invitation[:email]}]",
                      selected: invitation[:policy]
                    }
                  ) %>
                </td>
                <td class="py-4 pl-3 pr-4 text-right sm:pr-6">
                  <%== render(
                    "components/delete_button",
                    locals: {
                      text: "Remove",
                      url: "#{@project_data[:path]}/user/invitation/#{invitation[:email]}",
                      confirmation: invitation[:email]
                    }
                  ) %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
        <div class="px-4 py-5 sm:p-6">
          <%== render("components/form/submit_button", locals: { text: "Update" }) %>
        </div>
      </div>
    </form>
  </div>
</div>