bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style invite link flow

Browse Source
This commit is contained in:
Jason Zimdars
2025-10-17 12:07:53 -05:00
committed by Stanko K.R.
parent e3f0c2da04
commit 5a0ddbad3d
4 changed files with 76 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/utilities.css
+1
View File
@@ -19,6 +19,7 @@
.txt-subtle { color: var(--color-ink-medium); }
.txt-alert { color: var(--color-marker); }
.txt-undecorated { text-decoration: none; }
.txt-underline { text-decoration: underline; }
.txt-tight-lines { line-height: 1.2; }
.txt-nowrap { white-space: nowrap; }
.txt-break { word-break: break-word; }
app/views/account/join_codes/edit.html.erb
+18 -29
View File
@@ -1,44 +1,33 @@
<% @page_title = "Edit Join Code" %>
<% @page_title = "Change usage limit" %>
<% content_for :header do %>
<%= render "filters/menu" %>
<div class="header__actions header__actions--start">
<div class="header__title">
<%= link_to account_join_code_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
<span class="overflow-ellipsis">&larr; <strong>Join Code</strong></span>
<span class="overflow-ellipsis">&larr; <strong>Invite link</strong></span>
<% end %>
</div>
<h1 class="header__title"><%= @page_title %></h1>
<% end %>
<article
class="panel center txt-align-start"
style="view-transition-name: <%= dom_id(@join_code) %>"
>
<article class="panel center shadow flex flex-column gap-half" style="view-transition-name: <%= dom_id(@join_code) %>">
<header class="margin-block-end-half">
<h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
<p class="txt-medium margin-none">How many times can this link be used to join the account?</p>
</header>
<%= form_with model: @join_code, url: account_join_code_path, method: :patch, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>
<div class="flex flex-column gap-half">
<%= form.label :usage_limit do %>
<strong>Usage limit</strong>
<br>
<%= form.number_field :usage_limit,
required: true,
autofocus: true,
min: @join_code.usage_count,
class: "input center txt-large fit-content font-weight-black",
data: { action: "keydown.esc@document->form#cancel focus->form#select" } %>
<p class="margin-none txt-x-small txt-subtle">
How many times can this code be used to join the account?
</p>
<% end %>
<%= form.number_field :usage_limit,
required: true,
autofocus: true,
min: @join_code.usage_count,
class: "input",
data: { action: "keydown.esc@document->form#cancel" } %>
<p class="margin-none txt-x-small txt-subtle">
Current usage: <%= @join_code.usage_count %>. You can only increase the limit to allow more uses.
</p>
</div>
<p class="margin-none txt-subtle">
This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times.
</p>
<%= form.button type: :submit, class: "btn btn--link center txt-medium" do %>
<span>Update join code</span>
<span>Save changes</span>
<% end %>
<%= link_to "Go back", account_join_code_path, data: { form_target: "cancel" }, hidden: true %>
app/views/account/join_codes/show.html.erb
+56 -75
View File
@@ -1,87 +1,68 @@
<% @page_title = "Join Code" %>
<% @page_title = "Add people" %>
<% content_for :header do %>
<%= render "filters/menu" %>
<h1 class="header__title"><%= @page_title %></h1>
<div class="header__title">
<%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
<span class="overflow-ellipsis">&larr; <strong>Account Settings</strong></span>
<% end %>
</div>
<% end %>
<article
class="panel center txt-align-start"
style="view-transition-name: <%= dom_id(@join_code) %>"
>
<div class="flex flex-column gap">
<div class="flex align-center gap-half">
<h2 class="txt-large margin-none flex-item-grow">
<code><%= @join_code.code %></code>
</h2>
<% if @join_code.active? %>
<span class="badge badge--positive">Active</span>
<% else %>
<span class="badge badge--subtle">Used up</span>
<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(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %>
<div class="flex align-center gap-half">
<input type="text" class="input flex-item-grow" value="<%= url %>" readonly>
<%= 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 %>
</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 %>
</div>
<div class="flex flex-column gap-half">
<div>
<strong class="txt-small">Usage</strong>
<p class="margin-none txt-subtle">
<%= @join_code.usage_count %>
of
<%= @join_code.usage_limit %>
uses
<% if @join_code.active? %>
(
<%= @join_code.usage_limit - @join_code.usage_count %>
remaining)
<% end %>
</p>
</div>
</div>
<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>
<hr class="separator">
<div class="flex flex-column gap-half">
<strong class="txt-small">Join URL</strong>
<% url = join_url(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %>
<div class="flex align-center gap-half">
<input
type="text"
class="input flex-item-grow"
value="<%= url %>"
readonly
>
<%= button_to_copy_to_clipboard(url) do %>
<%= icon_tag "copy-paste" %>
<span class="for-screen-reader">Copy join link</span>
<% end %>
</div>
<p class="margin-none txt-x-small txt-subtle">
Share this URL with people you want to invite to your account.
</p>
<div
class="txt-align-center margin-block-start"
style="max-width: 200px; margin-inline: auto;"
>
<%= qr_code_image(url) %>
</div>
</div>
<hr class="separator">
<div class="flex gap-half">
<%= link_to edit_account_join_code_path, class: "btn btn--secondary txt-small" do %>
<%= icon_tag "edit" %>
<span>Edit limit</span>
<% end %>
<%= button_to account_join_code_path, method: :delete, class: "btn btn--negative txt-small",
data: { turbo_confirm: "Are you sure you want to regenerate this join code? The old code will no longer work." } do %>
<%= icon_tag "refresh" %>
<span>Regenerate</span>
<% end %>
<form method="dialog" class="margin-block-start flex justify-center">
<button class="btn">
<span>Done</span>
</button>
</form>
</dialog>
</div>
</div>
</article>
<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)
<%= link_to edit_account_join_code_path, class: @join_code.active? ? "txt-link" : "txt-negative txt-underline" do %>
<span>Change limit</span>
<% end %>
</p>
</footer>
</div>
app/views/account/settings/_users.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
navigable-list-actionable-items-value="true">
<h2 class="divider txt-large">People on the account</h2>
<%= link_to account_join_code_path, class: "btn btn--link center" do %>
<%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
<%= icon_tag "add" %>
<span>Add people</span>
<% end %>