refactor: better separation of dependencies to crates

node stuff to html crate only

html-router/templates/auth/account_settings.html

@@ -0,0 +1,119 @@
+{% extends "body_base.html" %}
+{% block main %}
+<style>
+  form.htmx-request {
+    opacity: 0.5;
+  }
+</style>
+<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-1">
+  <h1 class="text-3xl font-bold mb-2">Account Settings</h1>
+  <div class="form-control">
+    <label class="label">
+      <span class="label-text">Email</span>
+    </label>
+    <input type="email" name="email" value="{{ user.email }}" class="input text-primary-content input-bordered w-full"
+      disabled />
+  </div>
+
+  <div class="form-control">
+    <label class="label">
+      <span class="label-text">API key</span>
+    </label>
+    {% block api_key_section %}
+    {% if user.api_key %}
+    <div class="relative">
+      <input id="api_key_input" type="text" name="api_key" value="{{ user.api_key }}"
+        class="input text-primary-content input-bordered w-full pr-12" disabled />
+      <button type="button" id="copy_api_key_btn" onclick="copy_api_key()"
+        class="absolute inset-y-0 cursor-pointer right-0 flex items-center pr-3" title="Copy API key">
+        {% include "icons/clipboard_icon.html" %}
+      </button>
+    </div>
+    <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
+      class="btn btn-accent mt-4 w-full">Download iOS shortcut</a>
+    {% else %}
+    <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
+      Create API-Key
+    </button>
+    {% endif %}
+    {% endblock %}
+  </div>
+
+  <script>
+    // Using a single toast element avoids creating many timeouts when clicking repeatedly.
+    let current_toast = null;
+    let toast_timeout = null;
+
+    function show_toast(message) {
+      if (current_toast) {
+        // Update message and reset timeout if a toast is already displayed.
+        current_toast.querySelector('span').textContent = message;
+        clearTimeout(toast_timeout);
+      } else {
+        current_toast = document.createElement('div');
+        current_toast.className = 'toast';
+        current_toast.innerHTML = `<div class="alert alert-success">
+        <div>
+        <span>${message}</span>
+        </div>
+        </div>`;
+        document.body.appendChild(current_toast);
+      }
+      toast_timeout = setTimeout(() => {
+        if (current_toast) {
+          current_toast.remove();
+          current_toast = null;
+        }
+      }, 3000);
+    }
+
+    function copy_api_key() {
+      const input = document.getElementById('api_key_input');
+      if (!input) return;
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(input.value).then(() => {
+          show_toast('API key copied!');
+        }).catch(() => {
+          show_toast('Copy failed');
+        });
+      } else {
+        show_toast('Copy not supported');
+      }
+    }
+  </script>
+
+  <div class="form-control mt-4">
+    <label class="label">
+      <span class="label-text">Timezone</span>
+    </label>
+    {% block timezone_section %}
+    <select name="timezone" class="select w-full" hx-patch="/update-timezone" hx-swap="outerHTML">
+      {% for tz in timezones %}
+      <option value="{{ tz }}" {% if tz==user.timezone %}selected{% endif %}>{{ tz }}</option>
+      {% endfor %}
+    </select>
+    {% endblock %}
+  </div>
+
+  <div class="form-control mt-4 hidden">
+    <button hx-post="/verify-email" class="btn btn-secondary w-full">
+      Verify Email
+    </button>
+  </div>
+  <div class="form-control mt-4">
+    {% block change_password_section %}
+    <button hx-get="/change-password" hx-swap="outerHTML" class="btn btn-primary w-full">
+      Change Password
+    </button>
+    {% endblock %}
+  </div>
+  <div class="form-control mt-4">
+    <button hx-delete="/delete-account"
+      hx-confirm="This action will permanently delete your account and all data associated. Are you sure you want to continue?"
+      class="btn btn-error w-full">
+      Delete Account
+    </button>
+  </div>
+  <div id="account-result" class="mt-4"></div>
+</main>
+{% endblock %}