Merge pull request #2682 from nqst/delete-account-improvements

Delete account: design improvements

app/assets/stylesheets/inputs.css

@@ -314,4 +314,41 @@
       margin: 0;
     }
   }
+
+  /* Checkboxes */
+  .checkbox {
+    appearance: none;
+    background-color: var(--color-canvas);
+    block-size: 1.1em;
+    border: 1px solid currentColor;
+    border-radius: 0.15em;
+    color: currentColor;
+    display: grid;
+    font: inherit;
+    inline-size: 1.1em;
+    margin: 0;
+    place-content: center;
+    transform: translateY(0.1em);
+
+    &::before {
+      background-color: CanvasText;
+      block-size: 0.65em;
+      box-shadow: inset 1em 1em currentColor;
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      content: "";
+      inline-size: 0.65em;
+      transform: scale(0);
+      transform-origin: center;
+      transition: 150ms transform ease-in-out;
+    }
+
+    &:checked::before {
+      transform: scale(1) rotate(10deg);
+    }
+
+    &:where([disabled]):not(:hover):not(:active) {
+      filter: none;
+      opacity: 0.5;
+    }
+  }
 }

app/assets/stylesheets/settings.css

@@ -62,6 +62,16 @@
     }
   }
 
+  .settings__section--negative {
+    h2 {
+      color: var(--color-negative);
+    }
+
+    .divider {
+      --divider-color: oklch(var(--lch-red-light));
+    }
+  }
+
   .settings__section:has(.settings__scrollable-list) {
     @media (min-width: 640px) {
       display: flex;

app/assets/stylesheets/steps.css

@@ -6,44 +6,6 @@
     inline-size: auto;
   }
 
-  .step__checkbox {
-    --hover-color: var(--card-color);
-
-    appearance: none;
-    background-color: var(--color-canvas);
-    block-size: 1.1em;
-    border: 1px solid currentColor;
-    border-radius: 0.15em;
-    color: currentColor;
-    display: grid;
-    font: inherit;
-    inline-size: 1.1em;
-    margin: 0;
-    place-content: center;
-    transform: translateY(0.1em);
-
-    &::before {
-      background-color: CanvasText;
-      block-size: 0.65em;
-      box-shadow: inset 1em 1em currentColor;
-      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-      content: "";
-      inline-size: 0.65em;
-      transform: scale(0);
-      transform-origin: center;
-      transition: 150ms transform ease-in-out;
-    }
-
-    &:checked::before {
-      transform: scale(1) rotate(10deg);
-    }
-
-    &:where([disabled]):not(:hover):not(:active) {
-      filter: none;
-      opacity: 0.5;
-    }
-  }
-
   .step__content {
     --input-border-radius: 0;
     --input-border-size: 0;

app/assets/stylesheets/utilities.css

@@ -223,6 +223,10 @@
     padding: 0;
   }
 
+  :where(.list-unindented) {
+    padding-inline-start: 1.25em;
+  }
+
   /* Accessibility */
   .visually-hidden,
   .for-screen-reader {

app/javascript/controllers/dispatch_event_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { name: String }
+
+  fire() {
+    this.dispatch(this.nameValue, { target: document, prefix: false })
+  }
+}

app/javascript/controllers/toggle_enable_controller.js

@@ -1,11 +1,20 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "element" ]
+  static targets = [ "element", "checkbox" ]
 
   toggle() {
     this.elementTargets.forEach((element) => {
       element.toggleAttribute("disabled")
     })
   }
+
+  reset() {
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = false
+    })
+    this.elementTargets.forEach((element) => {
+      element.toggleAttribute("disabled", true)
+    })
+  }
 }

app/views/account/settings/_cancellation.html.erb

@@ -1,26 +1,45 @@
 <% if Current.account.cancellable? && Current.user.owner? %>
-  <section class="settings__section">
+  <section class="settings__section settings__section--negative">
     <header>
-      <h2 class="divider txt-negative">Cancel account</h2>
-      <div>Delete your Fizzy account.</div>
+      <h2 class="divider">Danger zone</h2>
+      <div>Delete your account and everything in&nbsp;it, including all boards and cards.</div>
     </header>
 
-    <div data-controller="dialog" data-dialog-modal-value="true">
-      <button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
+    <div data-controller="dialog toggle-enable" data-dialog-modal-value="true">
+      <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>
+      <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" data-action="close->toggle-enable#reset" style="--panel-size: 48ch;">
+        <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>
+          <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">
+            <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#fire">Export your data</button> before you go. You won’t be able to do it after you delete your account.
+          </p>
+        </div>
+
+        <label class="flex gap justify-start txt-align-start margin-block-end-double">
+          <input type="checkbox" class="checkbox" data-toggle-enable-target="checkbox" data-action="change->toggle-enable#toggle">
+          I’ve read the above and want to continue
+        </label>
 
         <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 } } %>
+          <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>
       </dialog>
     </div>

app/views/account/settings/_export.html.erb

@@ -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;">

app/views/cards/display/perma/_steps.html.erb

@@ -3,7 +3,7 @@
 
   <% unless card.closed? %>
     <li id="<%= dom_id(card, :new_step) %>" class="step">
-      <input type="checkbox" class="step__checkbox" disabled>
+      <input type="checkbox" class="checkbox" disabled>
       <%= form_with model: [card, Step.new], url: card_steps_path(card), class: "min-width", data: { controller: "form", action: "submit->form#preventEmptySubmit submit->form#preventComposingSubmit turbo:submit-end->form#reset" } do |form| %>
         <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input", "1p-ignore": "true", action: "compositionstart->form#compositionStart compositionend->form#compositionEnd" }, aria: { label: "Add a step" } %>
       <% end %>

app/views/cards/steps/_step.html.erb

@@ -1,8 +1,8 @@
 <%= turbo_frame_tag step do %>
   <li class="step">
     <%= form_with model: [step.card, step], data: { controller: "form" } do |form| %>
-      <%= form.check_box :completed, { class: "step__checkbox", data: { action: "change->form#submit" } } %>
+      <%= form.check_box :completed, { class: "checkbox", data: { action: "change->form#submit" } } %>
     <% end %>
     <%= link_to step.content, edit_card_step_path(step.card, step), class: "step__content" %>
-  </li> 
+  </li>
 <% end %>

app/views/cards/steps/edit.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag @step do %>
   <div class="flex align-center gap-half">
     <%= form_with model: [@card, @step], class: "step", data: { controller: "form" } do |form| %>
-      <%= form.check_box :completed, { class: "step__checkbox", checked: @step.completed?, disabled: true } %>
+      <%= form.check_box :completed, { class: "checkbox", checked: @step.completed?, disabled: true } %>
       <%= form.text_field :content, class: "input step__content step__content--edit hide-focus-ring", placeholder: "Name this step…", required: true, autofocus: true, autocomplete: "off",
           data: { action: "keydown.esc->form#cancel focus->form#select", "1p-ignore": "true" } %>
       <%= form.button type: "submit", class: "btn btn--positive txt-xx-small" do %>

app/views/public/cards/show/_steps.html.erb

@@ -1,8 +1,8 @@
 <ol class="steps txt-small margin-block">
   <% card.steps.each do |step| %>
     <li class="step">
-      <%= check_box_tag :completed, { class: "step__checkbox", disabled: true, checked: step.completed? } %>
+      <%= check_box_tag :completed, { class: "checkbox", disabled: true, checked: step.completed? } %>
       <%= tag.span step.content, class: "step__content" %>
-    </li> 
+    </li>
   <% end %>
-</ol>
+</ol>