From cdb2fefe9079854b35de9d5715de20c667d0b620 Mon Sep 17 00:00:00 2001 From: Thomas Mathews Date: Thu, 22 Dec 2022 10:55:22 -0800 Subject: [PATCH] web: added login page It's a start, but nothing great. --- web/css/styles.css | 37 +++++++++++ web/icon/key.svg | 1 + web/index.html | 116 ++++++++++++++++++++++++++++++++--- web/js/{damus.js => main.js} | 34 ++++++++-- web/js/ui/util.js | 28 +++++++-- 5 files changed, 195 insertions(+), 21 deletions(-) create mode 100644 web/icon/key.svg rename web/js/{damus.js => main.js} (87%) diff --git a/web/css/styles.css b/web/css/styles.css index dc3edc6..9681cec 100644 --- a/web/css/styles.css +++ b/web/css/styles.css @@ -28,6 +28,35 @@ a:visited { padding: 15px; } +/* Welcome */ + +#container-busy .loader { + height: 100vh; +} +.page-content { + max-width: 700px; + margin: 0 auto; +} +.hero-box { + width: 100vw; + height: 100vh; +} +.hero-box > .padded { + /* TODO rename .padded */ + padding: 20px; + text-align: center; + position: relative; + top: 50%; + transform: translateY(-50%); +} +.btn-text { + border: none; + font-size: var(--fsNormal); + color: var(--clrText); + background: transparent; + text-decoration: underline; +} + /* Navigation */ #nav { border-right: 1px solid var(--clrBorder); @@ -359,6 +388,9 @@ details.cw summary { transition: opacity 0.2s linear; backdrop-filter: blur(20px); } +.modal.scrollable { + overflow: scroll; +} .modal.closed { opacity: 0; pointer-events: none; @@ -383,6 +415,11 @@ details.cw summary { .modal header button { font-size: 24px; } +.modal .modal-floating-close-btn { + position: sticky; + top: 20px; + left: 20px; +} /* Post & Reply */ #newpost { diff --git a/web/icon/key.svg b/web/icon/key.svg new file mode 100644 index 0000000..d2ad1b0 --- /dev/null +++ b/web/icon/key.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/index.html b/web/index.html index 8145820..ee0319d 100644 --- a/web/index.html +++ b/web/index.html @@ -4,7 +4,7 @@ + content="default-src 'none'; connect-src 'self' ws: wss:; script-src 'self'; script-src-elem 'self'; script-src-attr 'unsafe-inline'; style-src 'self' fonts.googleapis.com; img-src http: https: data:; media-src *; font-src 'self' fonts.gstatic.com; child-src 'none';" /> Damus @@ -26,18 +26,37 @@ - + - -
αlpha
+
+
+ +
+
+
+
+
+

+ Yo, Sup? + +

+

The blue bird experience for Nostr.

+ +
+
+ +
+
+
+
+
αlpha
+ + + diff --git a/web/js/damus.js b/web/js/main.js similarity index 87% rename from web/js/damus.js rename to web/js/main.js index f6387ff..10ad2e1 100644 --- a/web/js/damus.js +++ b/web/js/main.js @@ -1,4 +1,4 @@ -let DAMUS +let DAMUS = new_model(); const BOOTSTRAP_RELAYS = [ "wss://relay.damus.io", @@ -17,6 +17,12 @@ const SID_NOTIFICATIONS = "notifications"; const SID_EXPLORE = "explore"; const SID_PROFILES = "profiles"; +// This is our main entry. +// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event +addEventListener('DOMContentLoaded', (ev) => { + damus_web_init(); +}); + async function damus_web_init() { init_message_textareas(); let tries = 0; @@ -36,13 +42,31 @@ async function damus_web_init() { } async function damus_web_init_ready() { - const model = new_model(); - DAMUS = model; - model.pubkey = await get_pubkey(); + const model = DAMUS; + model.pubkey = await get_pubkey(false); + + find_node("#container-busy").classList.add("hide"); if (!model.pubkey) { - // TODO show welcome screen + find_node("#container-welcome").classList.remove("hide"); return; } + find_node("#container-app").classList.remove("hide"); + webapp_init(); +} + +async function signin() { + const model = DAMUS; + model.pubkey = await get_pubkey(); + if (!model.pubkey) { + return; + } + find_node("#container-welcome").classList.add("hide"); + find_node("#container-app").classList.remove("hide"); + webapp_init(); +} + +async function webapp_init() { + const model = DAMUS; // WARNING Order Matters! view_show_spinner(true); diff --git a/web/js/ui/util.js b/web/js/ui/util.js index 41e1b8b..b494b1f 100644 --- a/web/js/ui/util.js +++ b/web/js/ui/util.js @@ -240,19 +240,21 @@ function update_title(model) { update_notification_markers(has_notes) } -async function get_pubkey() { +async function get_pubkey(use_prompt=true) { let pubkey = get_local_state('pubkey') if (pubkey) return pubkey if (window.nostr && window.nostr.getPublicKey) { - console.log("calling window.nostr.getPublicKey()...") + log_debug("calling window.nostr.getPublicKey()...") const pubkey = await window.nostr.getPublicKey() - console.log("got %s pubkey from nos2x", pubkey) + log_debug("got %s pubkey from nos2x", pubkey) return await handle_pubkey(pubkey) } - pubkey = prompt("Enter nostr id (eg: jb55@jb55.com) or pubkey (hex or npub)") - if (!pubkey) - throw new Error("Need pubkey to continue") + if (!use_prompt) + return; + pubkey = prompt("Enter Nostr ID (eg: jb55@jb55.com) or public key (hex or npub).") + if (!pubkey.trim()) + return; return await handle_pubkey(pubkey) } @@ -280,6 +282,20 @@ function open_profile(pubkey) { view_update_profile(DAMUS, pubkey); } +function open_faqs() { + find_node("#faqs").classList.remove("closed"); +} + +function close_modal(el) { + while (el.parentElement) { + if (el.classList.contains("modal")) { + el.classList.add("closed"); + break; + } + el = el.parentElement; + } +} + function view_update_profile(model, pubkey) { const profile = model.profiles[pubkey] || {}; const el = find_node("[role='profile-info']");