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

Make the Delete account dialog more careful

Browse Source
This commit is contained in:
Alexander Zaytsev
2026-03-06 18:01:23 +01:00
parent 932d40878f
commit 04bf063e3c
4 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/utilities.css
+4
View File
@@ -222,6 +222,10 @@
padding: 0;
}
:where(.list-unindented) {
padding-inline-start: 1.25em;
}
/* Accessibility */
.visually-hidden,
.for-screen-reader {
app/javascript/controllers/dispatch_event_controller.js
+9
View File
@@ -0,0 +1,9 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = { name: String }
dispatch() {
document.dispatchEvent(new CustomEvent(this.nameValue, { bubbles: true }))
}
}
app/views/account/settings/_cancellation.html.erb
+29 -11
View File
@@ -9,18 +9,36 @@
<button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" style="--panel-size: 48ch;">
<h2 class="margin-none txt-large txt-negative">Delete your account?</h2>
<ul class="txt-align-start">
<li>All users, including you, will lose access</li>
<% if Current.account.try(:active_subscription) %>
<li>Your subscription will be canceled</li>
<% end %>
<li>After 30 days, your data will be permanently deleted</li>
</ul>
<h2 class="margin-none txt-large txt-negative">Delete account</h2>
<div class="txt-align-start">
<h3 class="margin-block-start margin-block-end-half txt-normal">What happens next:</h3>
<div class="flex gap justify-center">
<button type="button" class="btn" data-action="dialog#close">Cancel</button>
<%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", form: { data: { action: "submit->dialog#close", turbo: false } } %>
<ul class="list-unindented margin-block-start-half margin-block-end">
<li>Your <strong><%= Current.account.name %></strong> account will be closed immediately.</li>
<li>All users, including you, will lose access.</li>
<% if Current.account.try(:active_subscription) %>
<li>Your subscription will be canceled.</li>
<% end %>
<li>All your data will be permanently deleted within 30&nbsp;days.</li>
</ul>
<h3 class="margin-block-end-half txt-normal">Remember to export your data</h3>
<p class="margin-block-start-half margin-block-end-double">
<button type="button" class="btn btn--plain txt-link" data-controller="dispatch-event" data-dispatch-event-name-value="open-export" data-action="click->dialog#close click->dispatch-event#dispatch">Export your data</button> before you go. You won’t be able to do it after you delete your account.
</p>
</div>
<div data-controller="toggle-enable">
<label class="flex gap justify-start txt-align-start margin-block-end-double">
<input type="checkbox" class="checkbox" data-action="change->toggle-enable#toggle">
I’ve read the above and want to continue
</label>
<div class="flex gap justify-center margin-block-start">
<button type="button" class="btn" autofocus data-action="dialog#close">Not now</button>
<%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", disabled: true, form: { data: { action: "submit->dialog#close", turbo: false } }, data: { toggle_enable_target: "element" } %>
</div>
</div>
</dialog>
</div>
app/views/account/settings/_export.html.erb
+1 -1
View File
@@ -4,7 +4,7 @@
<div>Download a complete archive of all account data.</div>
</header>
<div data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close">
<div data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close open-export@document->dialog#open">
<button type="button" class="btn" data-action="dialog#open">Begin export...</button>
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" style="--panel-size: 48ch;">