Skip to content

Conversation

danieldaquino
Copy link
Collaborator

@danieldaquino danieldaquino commented Oct 5, 2024

Summary

This PR implements the following:

  • A significant refactor that splits some long source files into smaller reusable blocks that are far easier to work with
  • Code deduplication as part of the above refactor
  • Implementation of the OTP authentication on the Purple checkout, added as an option (users can choose which method to go with)
  • Updates to outdated links and navigation flows.
  • Other small fixes

Checklist

  • I have read (or I am familiar with) the Contribution Guidelines
  • I have tested the changes in this PR
  • My PR is either small, or I have split it into smaller logical commits that are easier to review
  • I have added the signoff line to all my commits. See Signing off your work
  • I have added appropriate changelog entries for the changes in this PR. See Adding changelog entries
    • I do not need to add a changelog entry. Reason: We don't strictly keep track of changelog on this repo
  • I have added appropriate Closes: or Fixes: tags in the commit messages wherever applicable, or made sure those are not needed. See Submitting patches — I have not added this because the issue also depends on Non-iOS Purple checkout flows (server-side) api#11

Test report

Damus: 1.10.1 (1) f92509fd
Device: iPhone 13 mini
iOS: 18.0
Browser: Multiple browsers, see steps for details
damus-api: 03e1e90cffd370252826ccb2934320f120b15426 with Node v22.9.0
- Note: This was a WIP version of 8bdbd179536da01c3a74b1c8cb5cd7427437c672 that is identical in almost every way except the LN node connection params, which had been changed during development to work with node.js v22.9.0, but has now been reverted for node v18 LTS compatibility. A supplemental test report is attached below to cover the invalidated portion of the test
damus-website: 1b6209afc40c463a04d7267a155e840736301c39
LN wallet: coinos.io
Setup:

  • Website running from a static http server (python3 -m http.server) using a development build with our custom test env details (npm run build-dev)
  • Local server
  • Local server database wiped at the start for testing purposes.
  • Server and website in a LAN-like VPN setup
  • Damus iOS setup with a test Purple environment, pointing to the test server
  • LN node similar (or same) as used in production

Steps:

  1. Clicked all major internal links around the website to ensure there are no broken links
  2. Verified initial LN checkout (i.e. new user signup) using the desktop Safari and Damus iOS as a verification method works
    • UI looks good
    • Verification flow works
    • Reloading page after npub verification is stable (makes verified profile show up)
    • LN payment works
    • Reloading page after LN payment is stable (nothing is lost)
    • All of this setup works with doing checkout on the desktop and using QR codes to use Damus iOS for verification
    • Checkout page looks good on desktop
    • Welcome and setup in-app works
  3. Verified renewing with Damus iOS works:
    • Doing the whole flow on iOS (same device for checkout and verification) works
    • Renewal works
    • Checkout page looks good on mobile
  4. Verified initial LN checkout (i.e. new user signup) using iOS Safari and OTP as a verification method works
    • UI looks good on iOS
    • Entering incorrect OTP code correctly shows user about the mismatch, and gives them a change to resend OTP code.
    • Resending OTP code works
    • Verification flow via OTP works
    • Reloading page after npub verification is stable (makes verified profile show up)
    • LN payment works
    • Reloading page after LN payment is stable (nothing is lost)
    • Welcome screen and account details screen after payment works (on iOS)
  5. Verified renewing using Desktop Firefox and OTP as a verification method works
    • Checkout looks good on Firefox
    • Existing account detection works
    • OTP troubleshooting message appears after 10 seconds of having an empty OTP, and disappears upon typing
    • LN payment works
    • Refreshing page after LN payment is stable
    • Welcome message and account message flow via web works well and looks good on Firefox
    • Checked on Damus iOS that account details match
  6. Logout works
  7. Login still works (Tested on Firefox)
    • Account detection works (If no account exists, user is recommended to purchase/join Purple)
    • Invalid OTP + resend flow works
    • Successful OTP finishes login and takes user to the account page as expected
  8. Purple landing page shows more relevant options when user is logged in

Results:

  • PASS
  • Partial PASS
    • Details: n/a

Supplemental test report

This supplemental test report is needed to cover a portion of the previous test that was invalidated due to a small code change on the server-side.

Damus: 1.10.1 (1) f92509fd
Device: iPhone 13 mini
iOS: 18.0
Browser: Safari
damus-api: 8bdbd179536da01c3a74b1c8cb5cd7427437c672 with Node v18.20.4, running on NixOS
damus-website: 1b6209afc40c463a04d7267a155e840736301c39
LN wallet: coinos.io
Setup:

  • Same as the previous setup
    Steps:
  1. Delete local DB
  2. Go through checkout process using Damus iOS as the auth method. Ensure that LN invoice is generated, payment is detected, and otherwise flow goes smoothly
  3. Go through the checkout process again (renewal), this time using OTP as the auth method. Ensure that LN invoice is generated, payment is detected, and otherwise flow goes smoothly.

Results:

  • PASS
  • Partial PASS
    • Details: n/a

Other notes

These changes rely on some API changes on the server side. The backend should be updated first when deploying: damus-io/api#11

This commit refactors the Purple checkout code, as well as some other
blocks, splitting them into smaller modules that that are more reusable
and far easier to work with.

Signed-off-by: Daniel D’Aquino <[email protected]>
This commit adds a tab component, in preparation for OTP support on the
purple checkout page.

It adds the radix UI tab component as a dependency, and defines our own
tab component with a custom style.

Signed-off-by: Daniel D’Aquino <[email protected]>
@danieldaquino danieldaquino force-pushed the notedeck#330 branch 5 times, most recently from ac66ebb to 1a1b8f2 Compare October 8, 2024 19:12
This commit adds an OTP-via-Nostr-DM authentication method to the Purple checkout page.

Now users can choose between the two authentication methods.

Signed-off-by: Daniel D’Aquino <[email protected]>
Signed-off-by: Daniel D’Aquino <[email protected]>
Signed-off-by: Daniel D’Aquino <[email protected]>
This commit includes several updates and improves to the website
navigation:
1. Obsolete TestFlight links were removed and replaced with Notedeck links
2. The Purple page was updated to detect whether the user is logged in
   or not, and then provide more useful login/signup/see account actions
3. Made the CTA on the top menu customizable, and changed the top menu
   CTA on the purple and notedeck pages for something more relevant to
   those pages.

Signed-off-by: Daniel D’Aquino <[email protected]>
This commit improves the stability when refreshing the checkout page.

More specifically, it avoids an issue where the person has selected
Damus iOS as their selected auth method, but then refreshes the page
after verifying their npub. Previously the final step would not be aware
of their auth method, so it would try to proceed on the web, but a lack
of session token would cause issues on the welcome step.

This commit addresses this by checking the login status at the last
step. If the user selected the OTP auth method, they will necessarily be
logged in already. If the user is not logged in, they cannot proceed
through the website.

Signed-off-by: Daniel D’Aquino <[email protected]>
Signed-off-by: Daniel D’Aquino <[email protected]>
This commit improves the website build process by using `trailingSlash`
in `next.config.js` instead of manually adding symbolic links during the
build script.

It also adds the option to create a development build with
user-configurable environment via an `.env` file

Signed-off-by: Daniel D’Aquino <[email protected]>
@danieldaquino danieldaquino changed the title [WIP] Non-iOS Purple checkout flows Non-iOS Purple checkout flows (client-side) Oct 8, 2024
@danieldaquino danieldaquino marked this pull request as ready for review October 8, 2024 19:57
@danieldaquino danieldaquino requested a review from jb55 October 8, 2024 19:57
@danieldaquino
Copy link
Collaborator Author

@jb55 quick note before we publish this website version. I think some of the changes you made to the notedeck page have not been pushed, they don't seem to be present in github. You may want to push those changes upstream from where you made them to avoid losing them.

@danieldaquino
Copy link
Collaborator Author

@jb55 please let me know if you have any questions or concerns with this PR, thanks!

@jb55
Copy link
Contributor

jb55 commented Oct 19, 2024 via email

@jb55
Copy link
Contributor

jb55 commented Oct 19, 2024 via email

@danieldaquino danieldaquino merged commit 0773a06 into damus-io:master Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants