Files
fizzy/app/views/account/join_codes/show.html.erb
T
2025-11-17 09:12:41 -05:00

76 lines
3.1 KiB
Plaintext

<% @page_title = "Add people" %>
<% content_for :header do %>
<div class="header__actions header__actions--start">
<%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
<span class="overflow-ellipsis flex align-center">
<strong>Back to Account Settings</strong>
<kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
</span>
<% end %>
</div>
<% end %>
<div class="panel shadow center flex flex-column gap" style="view-transition-name: <%= dom_id(@join_code) %>">
<header>
<h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
<p class="txt-medium margin-none">Share the link below to invite people to this account</p>
</header>
<% url = join_url(code: @join_code.code, script_name: Current.account.slug) %>
<div class="flex align-center gap-half">
<input type="text" class="input flex-item-grow" value="<%= url %>" readonly>
<% if Current.user.admin? %>
<%= button_to account_join_code_path, method: :delete, class: "btn btn--circle txt-small", data: {
turbo_confirm: "Are you sure you want to generate a new link? The previous code will stop working." } do %>
<%= icon_tag "refresh" %>
<span class="for-screen-reader">Generate a new code</span>
<% end %>
<% end %>
</div>
<div class="center flex align-center gap">
<%= tag.button class: "btn btn--link", data: {
controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url } do %>
<%= icon_tag "copy-paste" %>
<span class="txt-nowrap">Copy invite link</span>
<% end %>
<div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
<%= tag.button class: "btn", data: { action: "dialog#open" } do %>
<%= icon_tag "qr-code" %>
<span>Get QR code</span>
<% end %>
<dialog class="dialog panel shadow" data-dialog-target="dialog">
<p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>
<%= qr_code_image(url) %>
<form method="dialog" class="margin-block-start flex justify-center">
<button class="btn">
<span>Done</span>
</button>
</form>
</dialog>
</div>
</div>
<footer class="txt-small">
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
<p class="margin-none <%= "txt-negative" if !@join_code.active? %>">
This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times
(<%= @join_code.active? ? @join_code.usage_limit - @join_code.usage_count : "none" %> remaining)
<% if Current.user.admin? %>
<%= link_to edit_account_join_code_path, class: @join_code.active? ? "txt-link" : "txt-negative txt-underline" do %>
<span>Change limit</span>
<% end %>
<% end %>
</p>
</footer>
</div>