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

<%= javascript_pack_tag "colorPicker", defer: true %>

<%= javascript_include_tag "https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js", defer: true %>
<%= javascript_pack_tag "clipboardCopy", defer: true %>

<style>
  .primary-sticky-nav-author, .primary-sticky-nav-author-element {
    border: 1px solid <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
    box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
  }

  .primary-sticky-nav-author button {
    background-color: <%= user_colors(@organization)[:bg] %> !important;
    color: <%= user_colors(@organization)[:text] %> !important;
  <% if user_colors(@organization)[:bg].downcase == "#ffffff" %>
    border: 1px solid <%= user_colors(@organization)[:text] %> !important;
  <% end %>
  }
</style>
<div class="settings-org-members">
  <h3>Organization Members</h3>
  <% @org_organization_memberships.each do |org_membership| %>
    <div class="settings-org-member-row <%= "settings-org-admin-row" if org_membership.type_of_user == "admin" %>">
      <a href="<%= org_membership.user.path %>"><%= org_membership.user.name %></a>
      <div class="settings-org-member-actions">
        <% if org_membership.user == @user && org_membership.type_of_user == "admin" %>
          <button class="settings-org-member settings-org-member-admin-self">you (admin)</button>
        <% elsif org_membership.user != @user && org_membership.type_of_user == "admin" %>
          <button class="settings-org-member settings-org-member-admin-other">admin</button>
          <%= 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="settings-org-member settings-org-member-remove" title="Revoke admin status" type="submit">revoke admin status</button>
          <% end %>
        <% else %>
          <button class="settings-org-member settings-org-member-admin-self">org member</button>
          <%= 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="settings-org-member settings-org-member-make-admin" 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="settings-org-member settings-org-member-remove" title="Remove from org" type="submit">remove from org</button>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
  <h3>Grow the team</h3>
  <h5>Invite teammates by sending them the secret and the following instructions:</h5>
  <ol style="margin-bottom: 30px">
    <li>Sign up at
      <a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>">https://<%= ApplicationConfig["APP_DOMAIN"] %></a></li>
    <li>Navigate to
      <a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization">https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization</a>
    </li>
    <li>Paste the secret code below and click <b>Join Organization</b></li>
  </ol>
  <h5>Your secret: (You should rotate this regularly)</h5>
  <clipboard-copy for="settings-org-secret" onclick="nextElementSibling.hidden = false">
    <input type="text" class="settings-org-secret" id="settings-org-secret" value="<%= @organization.secret %>" readonly aria-label="Organization secret (to be rotated regularly)">
    <%= image_tag "content-copy.svg", alt: "Copy to clipboard" %>
  </clipboard-copy>
  <span class="copy-text-announcer" id="copy-text-announcer" role="alert" hidden>
    Copied to clipboard!
  </span>
  <%= 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 class="settings-generate-new-secret">Generate New Secret</button>
  <% end %>
</div>
<h3>Organization Details</h3>
<%= form_for(@organization) do |f| %>
<%= f.hidden_field :id %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name, maxlength: 50 %>
  </div>
  <div class="field">
    <%= f.label :slug, "Username" %>
    <%= f.text_field :slug, maxlength: 18, minlength: 2 %>
    <i>Your organization's URL is: https://dev.to/<%= @organization.slug %></i>
  </div>
  <%= f.label :profile_image %>
  <div class="field">
    <% if @organization.profile_image_url.present? %>
      <span class="image-present">
        <img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.profile_image_url, 50) %>" />
        <%= f.file_field :profile_image %>
      </span>
    <% else %>
      <%= f.file_field :profile_image %>
    <% end %>
  </div>
  <div class="field">
    <%= f.label :twitter_username, "Twitter Username" %>
    <%= f.text_field :twitter_username %>
  </div>
  <div class="field">
    <%= f.label :github_username, "Github Username" %>
    <%= f.text_field :github_username %>
  </div>
  <div class="field">
    <%= f.label :text_color_hex, "Text color (hex)" %>
    <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "color-picker" %>
    <div class="color-palette"></div>
  </div>
  <div class="field">
    <%= f.label :bg_color_hex, "Background color (hex)" %>
    <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "color-picker" %>
    <div class="color-palette"></div>
  </div>
  <div class="field">
    <%= f.label :url, "Site url" %>
    <%= f.url_field :url, maxlength: 128, placeholder: "http://yoursite.com" %>
  </div>
  <div class="field">
    <%= f.label :tag_line %>
    <%= f.text_field :tag_line, maxlength: 60, placeholder: "Limit of 60 characters" %>
  </div>
  <div class="field">
    <%= f.label :summary %>
    <%= f.text_area :summary, maxlength: 250, placeholder: "Limit of 250 characters" %>
  </div>
  <div class="field">
    <%= f.label :location %>
    <%= f.text_field :location, maxlength: 64, placeholder: "Limit of 64 characters" %>
  </div>
  <div class="field">
    <%= f.label :email, "Support Email" %>
    <%= f.text_field :email, maxlength: 64, placeholder: "Limit of 64 characters" %>
  </div>
  <div class="field">
    <%= f.label :company_size, "Organization Size" %>
    <%= f.text_field :company_size, maxlength: 10, placeholder: "Enter a number" %>
  </div>
  <div class="field">
    <%= f.label :story, "Our Story" %>
    <%= f.text_area :story, maxlength: 640, placeholder: "Limit of 640 characters" %>
  </div>
  <div class="field">
    <%= f.label :tech_stack, "Our Stack" %>
    <%= f.text_area :tech_stack, maxlength: 640, placeholder: "Limit of 640 characters" %>
  </div>
  <h2>Call-to-action box</h2>
  <h4 style="margin-top:-25px">Customizable text that appears to the right of every post for your organization</h4>
  <h4 style="margin-top:-15px">See an example from the
    <a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/devteam/the-dev-badge-is-available-on-font-awesome-2ihe" target="_blank">DEV Team</a>.
  </h4>
  <div class="field">
    <%= f.label :cta_body_markdown, "Body text (Limited markdown — bold/italic/etc)" %>
    <%= f.text_area :cta_body_markdown, maxlength: 256, placeholder: "**This is an example**

_italic_ and **bold** is okay. Links, and headers etc. will not show up.

256 character limit." %>
  </div>
  <div class="field">
    <%= f.label :cta_button_text, "Link Text" %>
    <%= f.text_field :cta_button_text, maxlength: 20, placeholder: "Limit of 20 characters" %>
  </div>
  <div class="field">
    <%= f.label :cta_button_url, "Link url" %>
    <%= f.text_field :cta_button_url, placeholder: "https://example.com" %>
  </div>
  <div class="field">
    <label></label>
    <%= f.submit "SUBMIT", class: "cta" %>
  </div>
<% end %>