Merge pull request #1240 from PR0M3TH3AN/codex/add-generate-dialog-template-to-login-modal

Add generate account view template to login modal

components/login-modal.html

@@ -240,6 +240,96 @@
           </div>
         </form>
       </template>
+      <template data-login-generate-dialog>
+        <div
+          data-generate-view
+          class="space-y-4 rounded-xl border border-border bg-overlay-panel-soft px-5 py-4"
+        >
+          <div class="space-y-2">
+            <h3 class="text-lg font-semibold text-text">Create a new Nostr key</h3>
+            <p class="text-sm text-text-muted">
+              Save your keys somewhere safe. We'll only enable login after you
+              confirm you've backed them up.
+            </p>
+          </div>
+          <div class="space-y-3">
+            <div class="space-y-2">
+              <label class="block text-sm font-medium text-text">
+                Public key (npub)
+              </label>
+              <div class="space-y-2 sm:flex sm:items-start sm:gap-2 sm:space-y-0">
+                <div
+                  data-generate-npub
+                  class="min-w-0 flex-1 break-all rounded-lg border border-border bg-overlay-panel px-3 py-2 text-sm text-text"
+                ></div>
+                <button
+                  type="button"
+                  class="btn-ghost text-sm"
+                  data-generate-copy-npub
+                >
+                  Copy npub
+                </button>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm font-medium text-text" for="generatedNsec">
+                Secret key (nsec)
+              </label>
+              <div class="space-y-2 sm:flex sm:items-start sm:gap-2 sm:space-y-0">
+                <input
+                  id="generatedNsec"
+                  type="password"
+                  class="input min-w-0 flex-1"
+                  readonly
+                  data-generate-nsec
+                />
+                <div class="flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    class="btn-ghost text-sm"
+                    data-generate-reveal-nsec
+                  >
+                    Reveal
+                  </button>
+                  <button
+                    type="button"
+                    class="btn-ghost text-sm"
+                    data-generate-copy-nsec
+                  >
+                    Copy nsec
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <button
+                type="button"
+                class="btn-link text-sm"
+                data-generate-download
+              >
+                Download backup
+              </button>
+            </div>
+            <label class="inline-flex items-center gap-2 text-sm text-text">
+              <input type="checkbox" class="checkbox" data-generate-confirm />
+              <span>I saved these keys and understand they're private.</span>
+            </label>
+          </div>
+          <div class="flex justify-end gap-2">
+            <button type="button" class="btn-ghost" data-generate-cancel>
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="btn"
+              data-generate-login
+              disabled
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      </template>
       <template data-login-nip46-dialog>
         <form
           data-nip46-form