From 5a0ddbad3ddea801929cd4ff87bf94c0cf5467c3 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 17 Oct 2025 12:07:53 -0500 Subject: [PATCH] Style invite link flow --- app/assets/stylesheets/utilities.css | 1 + app/views/account/join_codes/edit.html.erb | 47 +++----- app/views/account/join_codes/show.html.erb | 131 +++++++++------------ app/views/account/settings/_users.html.erb | 2 +- 4 files changed, 76 insertions(+), 105 deletions(-) diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 3eb820bfb..cea383315 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -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; } diff --git a/app/views/account/join_codes/edit.html.erb b/app/views/account/join_codes/edit.html.erb index e93191e10..febe6ab67 100644 --- a/app/views/account/join_codes/edit.html.erb +++ b/app/views/account/join_codes/edit.html.erb @@ -1,44 +1,33 @@ -<% @page_title = "Edit Join Code" %> +<% @page_title = "Change usage limit" %> <% content_for :header do %> <%= render "filters/menu" %> -
+
<%= link_to account_join_code_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> - ← Join Code + ← Invite link <% end %>
- -

<%= @page_title %>

<% end %> -
+
+
+

<%= @page_title %>

+

How many times can this link be used to join the account?

+
<%= form_with model: @join_code, url: account_join_code_path, method: :patch, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %> -
- <%= form.label :usage_limit do %> - Usage limit -
+ <%= 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" } %> -

- How many times can this code be used to join the account? -

- <% end %> - - <%= form.number_field :usage_limit, - required: true, - autofocus: true, - min: @join_code.usage_count, - class: "input", - data: { action: "keydown.esc@document->form#cancel" } %> -

- Current usage: <%= @join_code.usage_count %>. You can only increase the limit to allow more uses. -

-
+

+ This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times. +

<%= form.button type: :submit, class: "btn btn--link center txt-medium" do %> - Update join code + Save changes <% end %> <%= link_to "Go back", account_join_code_path, data: { form_target: "cancel" }, hidden: true %> diff --git a/app/views/account/join_codes/show.html.erb b/app/views/account/join_codes/show.html.erb index b33d283be..7a4b22129 100644 --- a/app/views/account/join_codes/show.html.erb +++ b/app/views/account/join_codes/show.html.erb @@ -1,87 +1,68 @@ -<% @page_title = "Join Code" %> +<% @page_title = "Add people" %> <% content_for :header do %> <%= render "filters/menu" %> -

<%= @page_title %>

+
+ <%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> + ← Account Settings + <% end %> +
<% end %> -
-
-
-

- <%= @join_code.code %> -

- <% if @join_code.active? %> - Active - <% else %> - Used up +
+
+

<%= @page_title %>

+

Share the link below to invite people to this account

+
+ + <% url = join_url(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %> +
+ + <%= 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" %> + Generate a new code + <% end %> +
+ +
+ <%= 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" %> + Copy invite link + <% end %> + +
+ <%= tag.button class: "btn", data: { action: "dialog#open" } do %> + <%= icon_tag "qr-code" %> + Get QR code <% end %> -
-
-
- Usage -

- <%= @join_code.usage_count %> - of - <%= @join_code.usage_limit %> - uses - <% if @join_code.active? %> - ( - <%= @join_code.usage_limit - @join_code.usage_count %> - remaining) - <% end %> -

-
-
+ +

Scan this code with the camera on your mobile device

-
- -
- Join URL - - <% url = join_url(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %> -
- - <%= button_to_copy_to_clipboard(url) do %> - <%= icon_tag "copy-paste" %> - Copy join link - <% end %> -
- -

- Share this URL with people you want to invite to your account. -

- -
<%= qr_code_image(url) %> -
-
-
- -
- <%= link_to edit_account_join_code_path, class: "btn btn--secondary txt-small" do %> - <%= icon_tag "edit" %> - Edit limit - <% 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" %> - Regenerate - <% end %> +
+ +
+
-
+ +
+
+ +

"> + 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 %> + Change limit + <% end %> +

+
+
\ No newline at end of file diff --git a/app/views/account/settings/_users.html.erb b/app/views/account/settings/_users.html.erb index 62cdc2de4..631cfddf0 100644 --- a/app/views/account/settings/_users.html.erb +++ b/app/views/account/settings/_users.html.erb @@ -5,7 +5,7 @@ navigable-list-actionable-items-value="true">

People on the account

- <%= 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" %> Add people <% end %>