docbrown/app/views/users/_org_admin.html.erb

<%= javascript_packs_with_chunks_tag "colorPreview", "clipboardCopy", defer: true %>
<%= render "shared/webcomponents_loader_script" %>

<div class="crayons-card crayons-card--content-rows">
  <h2>Organization Members</h2>

  <div class="grid gap-2">
    <% @org_organization_memberships.each do |org_membership| %>
      <div class="crayons-card crayons-card--secondary p-4 flex items-center">
        <p class="fw-medium flex-1">
          <a href="<%= org_membership.user.path %>"><%= org_membership.user.name %></a>
          <% if org_membership.user == @user %>
            <span class="crayons-indicator">You</span>
          <% end %>

          <% if org_membership.type_of_user == "admin" %>
            <span class="crayons-indicator crayons-indicator--critical">Admin</span>
          <% end %>
        </p>

        <div class="flex">
          <% if org_membership.user == @user && org_membership.type_of_user == "admin" %>
          <!-- TODO: ? -->
          <% elsif org_membership.user != @user && org_membership.type_of_user == "admin" %>
            <%= form_tag "/users/remove_org_admin", onsubmit: "return confirm('Are you sure you want to take away admin status from #{org_membership.user.name}?');" do %>
              <%= hidden_field_tag "user_id", org_membership.user_id %>
              <%= hidden_field_tag "organization_id", @organization.id %>
              <button class="crayons-btn crayons-btn--secondary ml-2" title="Revoke admin status" type="submit">Revoke admin status</button>
            <% end %>
          <% else %>
            <%= form_tag "/users/add_org_admin", onsubmit: "return confirm('Are you sure you want to give #{org_membership.user.name} admin status?');" do %>
              <%= hidden_field_tag "user_id", org_membership.user_id %>
              <%= hidden_field_tag "organization_id", @organization.id %>
              <button class="crayons-btn crayons-btn--secondary ml-2" title="Make admin" type="submit">Make admin</button>
            <% end %>
            <%= form_tag "/users/remove_from_org", onsubmit: "return confirm('Are you sure you want remove #{org_membership.user.name} from the organization?');" do %>
              <%= hidden_field_tag "user_id", org_membership.user_id %>
              <%= hidden_field_tag "organization_id", @organization.id %>
              <button class="crayons-btn crayons-btn--secondary ml-2" title="Remove from org" type="submit">Remove from org</button>
            <% end %>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>

  <header>
    <h2 class="mb-2">Grow the team</h2>
    <p>Invite teammates by sending them the secret and the following instructions:</p>
  </header>

  <div class="crayons-card crayons-card--secondary p-4">
    <ol class="list-decimal pl-6 mb-2">
      <li>Sign up at
        <a href="<%= app_url %>"><%= app_url %></a></li>
      <li>Navigate to
        <a href="<%= app_url(user_settings_path(:organization)) %>"><%= app_url(user_settings_path(:organization)) %></a>
      </li>
      <li>Paste the secret code below and click <b>Join Organization</b></li>
    </ol>
    <p>
      Your secret code is:
      <clipboard-copy for="settings-org-secret" onclick="nextElementSibling.hidden = false">
        <input type="text" class="ff-monospace ff-s fw-medium" id="settings-org-secret" value="<%= @organization.secret %>" readonly aria-label="Organization secret (to be rotated regularly)">
        <%= inline_svg_tag("copy.svg", aria: true, class: "crayons-icon", title: "Copy to clipboard") %>
      </clipboard-copy>
      <span class="copy-text-announcer" id="copy-text-announcer" role="alert" hidden>Copied to clipboard!</span>
  </div>

  <div class="flex items-center">
    <%= form_tag "/organizations/generate_new_secret", onsubmit: "return confirm('Are you sure you want to generate a new secret? All outstanding secrets will be invalid.');" do %>
      <%= hidden_field_tag "organization[id]", @organization.id %>
      <button type="submit" class="crayons-btn crayons-btn--secondary">Generate new secret</button>
    <% end %>
    <p class="fw-medium color-accent-danger ml-3">You should rotate this regularly!</p>
  </div>
</div>

<div class="crayons-card crayons-card--content-rows">
  <h2>Organization details</h2>

  <%= form_for @organization, html: { class: "grid gap-6" } do |f| %>
    <%= f.hidden_field :id %>
    <div class="crayons-field">
      <%= f.label :name, class: "crayons-field__label" %>
      <%= f.text_field :name, maxlength: 50, class: "crayons-textfield", placeholder: "Acme Inc." %>
    </div>
    <div class="crayons-field">
      <%= f.label :slug, "Username", class: "crayons-field__label" %>
      <%= f.text_field :slug, maxlength: 18, minlength: 2, class: "crayons-textfield", placeholder: "acmeinc" %>
      <p class="crayons-field__description">Your organization's URL is: <%= app_url(@organization.slug) %></p>
    </div>

    <div class="crayons-field">
      <%= f.label :profile_image, "Profile image *", class: "crayons-field__label" %>
      <div class="flex items-center">
          <span class="crayons-logo crayons-logo--xl mr-2">
            <% if @organization.profile_image_url.present? %>
              <img alt="<%= @organization.name %> profile image" src="<%= optimized_image_url(@organization.profile_image_url, width: 50) %>" class="crayons-logo__image" />
            <% end %>
          </span>
          <%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
      </div>
    </div>

    <div class="crayons-field">
      <%= f.label :nav_image, "Logo for light themes", class: "crayons-field__label" %>
      <div class="flex items-center">
        <% if @organization.nav_image_url.present? %>
          <img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= optimized_image_url(@organization.nav_image_url, width: 50) %>" />
        <% end %>
        <%= f.file_field :nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
      </div>
    </div>

    <div class="crayons-field">
      <%= f.label :dark_nav_image, "Logo for dark themes", class: "crayons-field__label" %>
      <div class="flex items-center">
        <% if @organization.dark_nav_image_url.present? %>
          <img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= optimized_image_url(@organization.dark_nav_image_url, width: 50) %>" />
        <% end %>
        <%= f.file_field :dark_nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
      </div>
    </div>

    <div class="crayons-field">
      <%= f.label :twitter_username, "Twitter username", class: "crayons-field__label" %>
      <%= f.text_field :twitter_username, class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= f.label :github_username, "GitHub username", class: "crayons-field__label" %>
      <%= f.text_field :github_username, class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= f.label :url, "Website url", class: "crayons-field__label" %>
      <%= f.url_field :url, maxlength: 128, placeholder: "https://yoursite.com", class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= f.label :tag_line, class: "crayons-field__label" %>
      <%= f.text_field :tag_line, maxlength: 60, class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 60 characters</p>
    </div>
    <div class="crayons-field">
      <%= f.label :summary, class: "crayons-field__label" %>
      <%= f.text_area :summary, maxlength: 250, class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 250 characters</p>
    </div>

    <%= render partial: "shared/logo_design", locals: { f: f, account: @organization_membership.organization } %>

    <div class="crayons-field">
      <%= f.label :location, class: "crayons-field__label" %>
      <%= f.text_field :location, maxlength: 64, class: "crayons-textfield", placeholder: "Halifax, Nova Scotia" %>
      <p class="crayons-field__description">Limit of 64 characters</p>
    </div>
    <div class="crayons-field">
      <%= f.label :email, "Support email", class: "crayons-field__label" %>
      <%= f.text_field :email, maxlength: 64, placeholder: "mail@example.com", class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 64 characters</p>
    </div>
    <div class="crayons-field">
      <%= f.label :company_size, "Organization size", class: "crayons-field__label" %>
      <%= f.text_field :company_size, maxlength: 7, placeholder: "...", class: "crayons-textfield" %>
      <p class="crayons-field__description">Enter a number</p>
    </div>
    <div class="crayons-field">
      <%= f.label :story, "Our story", class: "crayons-field__label" %>
      <%= f.text_area :story, maxlength: 640, placeholder: "...", class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 640 characters</p>
    </div>
    <div class="crayons-field">
      <%= f.label :tech_stack, "Our stack", class: "crayons-field__label" %>
      <%= f.text_area :tech_stack, maxlength: 640, placeholder: "...", class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 640 characters</p>
    </div>
    <header>
      <h2 class="mb-2">Call-to-action box</h2>
      <p>Customizable text that appears to the right of every post for your organization.</p>
    </header>
    <div class="crayons-field">
      <%= f.label :cta_body_markdown, "Body text", class: "crayons-field__label" %>
      <%= f.text_area :cta_body_markdown, maxlength: 256, class: "crayons-textfield", placeholder: "..." %>
      <p class="crayons-field__description">Limited markdown: _italic_ and **bold** is okay. Links, and headers etc. will not show up. 256 character limit.</p>
    </div>
    <div class="crayons-field">
      <%= f.label :cta_button_text, "Link text", class: "crayons-field__label" %>
      <%= f.text_field :cta_button_text, maxlength: 20, placeholder: "Visit Acme Site", class: "crayons-textfield" %>
      <p class="crayons-field__description">Limit of 20 characters</p>
    </div>
    <div class="crayons-field">
      <%= f.label :cta_button_url, "Link url", class: "crayons-field__label" %>
      <%= f.text_field :cta_button_url, maxlength: 150, placeholder: "https://example.com", class: "crayons-textfield" %>
    </div>

    <button class="crayons-btn w-max" type="submit">Save</button>
  <% end %>
</div>

<div class="crayons-card crayons-card--content-rows">
  <header>
    <h2 class="color-accent-danger">Danger Zone</h2>
  </header>
  <div class="crayons-field">
    <div class="grid gap-2">
      <header>
        <h2>Delete Organization</h2>
      </header>
      <p>
        You can delete your organization if you:
        <ul>
          <li>are the only member in the organization</li>
          <li>are an admin of the organization</li>
          <li>the organization has no posts</li>
          <li>and the organization has no credits</li>
        </ul>
      </p>
      <% if @org_organization_memberships.size === 1 && @organization.articles_count.zero? %>
        <% onsubmit = "return confirm('Are you absolutely sure you want to delete your organization: #{@organization.name}?');" %>
        <%= form_tag organization_path(@organization.id), method: :delete, onsubmit: onsubmit do %>
          <button class="crayons-btn crayons-btn--danger crayons-btn--icon-left" type="submit">
            Delete "<%= @organization.name %>"
          </button>
        <% end %>
      <% else %>
        <div class="crayons-card crayons-card--secondary">
          <div class="crayons-card__body">
            Your organization currently does not meet the above requirements.
            Please remove all other members and organization posts first.
          </div>
        </div>
      <% end %>
      <p>
        Questions? Email us at
        <a href="<%= ForemInstance.email %>"><%= ForemInstance.email %></a>
        for help.
      </p>
    </div>
  </div>
</div>