From e2361c11763c4b9df58aa5391380d1e38337cf13 Mon Sep 17 00:00:00 2001 From: ericholguin Date: Mon, 22 Jan 2024 21:02:50 -0700 Subject: [PATCH] ux: Onboarding improvements This patch removes the EULA view from the onboarding flow and can be viewed from the create account view if the user so chooses. This also removes the need to copy the public key in the save keys view, now only the copying of the private key is required. Finally it fixes minor issues with the onboarding views, such as padding and spacing, where components were not aligned properly. Testing iPhone 15 Pro Max (17.0) Light Mode: https://video.nostr.build/7c1d38c75069262a56a93fcf7cc447fa8808ed7fbbd18a8169b583913248b741.mp4 iPhone SE (3rd generation) (16.4) Dark Mode: https://video.nostr.build/100085c84d84a75f41c45e3dc5347e5b4c35a8149b1b8a5edb9e6c059adc5949.mp4 Lightning-Address: eriic@getalby.com Closes: https://github.com/damus-io/damus/issues/1902 Changelog-Added: Fixed minor spacing and padding issues in onboarding views Changelog-Changed: EULA is not shown by default Changelog-Removed: Removed copying public key action Signed-off-by: ericholguin Reviewed-by: William Casarin Signed-off-by: William Casarin --- damus/Views/CreateAccountView.swift | 21 ++++++++++++++- damus/Views/EULAView.swift | 41 ----------------------------- damus/Views/LoginView.swift | 1 + damus/Views/SaveKeysView.swift | 34 ++++++++++-------------- damus/Views/SetupView.swift | 4 ++- 5 files changed, 38 insertions(+), 63 deletions(-) diff --git a/damus/Views/CreateAccountView.swift b/damus/Views/CreateAccountView.swift index 524547db..1039b0d1 100644 --- a/damus/Views/CreateAccountView.swift +++ b/damus/Views/CreateAccountView.swift @@ -41,7 +41,7 @@ struct CreateAccountView: View { regen_key() } } - .frame(minWidth: 300, maxWidth: .infinity, minHeight: 300, alignment: .center) + .frame(minWidth: 300, maxWidth: .infinity, minHeight: 250, alignment: .center) .background { RoundedRectangle(cornerRadius: 12) .fill(DamusColors.adaptableGrey, strokeBorder: .gray.opacity(0.5), lineWidth: 1) @@ -70,8 +70,27 @@ struct CreateAccountView: View { .disabled(profileUploadObserver.isLoading) .opacity(profileUploadObserver.isLoading ? 0.5 : 1) .padding(.top, 20) + + HStack(spacing: 0) { + Text("By signing up, you agree to our ", comment: "Ask the user if they already have an account on Nostr") + .font(.subheadline) + .foregroundColor(Color("DamusMediumGrey")) + + Button(action: { + nav.push(route: Route.EULA) + }, label: { + Text("EULA") + .font(.subheadline) + }) + .padding(.vertical, 5) + + Spacer() + } LoginPrompt() + .padding(.top) + + Spacer() } .padding() } diff --git a/damus/Views/EULAView.swift b/damus/Views/EULAView.swift index 1da495e3..5ba80062 100644 --- a/damus/Views/EULAView.swift +++ b/damus/Views/EULAView.swift @@ -68,47 +68,6 @@ struct EULAView: View { Markdown(eula) .padding() } - .padding(EdgeInsets(top: 20, leading: 10, bottom: 60, trailing: 10)) - - VStack { - Spacer() - - HStack { - Spacer() - - Button(action: { - dismiss() - }) { - HStack { - Text("Reject", comment: "Button to reject the end user license agreement, which disallows the user from being let into the app.") - .fontWeight(.semibold) - } - .frame(minWidth: 75, maxHeight: 12, alignment: .center) - .padding() - .foregroundColor(Color.white) - .background { - RoundedRectangle(cornerRadius: 12) - .fill(DamusColors.darkGrey, strokeBorder: DamusColors.mediumGrey, lineWidth: 1) - } - } - - Spacer() - - Button(action: { - nav.push(route: Route.Login) - }) { - HStack { - Text("Accept", comment: "Button to accept the end user license agreement before being allowed into the app.") - .fontWeight(.semibold) - } - .frame(minWidth: 75, maxHeight: 12, alignment: .center) - } - .buttonStyle(GradientButtonStyle()) - - Spacer() - } - } - .padding(.bottom, 5) } .background( Image("eula-bg") diff --git a/damus/Views/LoginView.swift b/damus/Views/LoginView.swift index 756cf64f..4bfcbb66 100644 --- a/damus/Views/LoginView.swift +++ b/damus/Views/LoginView.swift @@ -318,6 +318,7 @@ struct KeyInput: View { is_secured.toggle() } } + .padding(.vertical, 2) .padding(.horizontal, 10) .overlay { RoundedRectangle(cornerRadius: 12) diff --git a/damus/Views/SaveKeysView.swift b/damus/Views/SaveKeysView.swift index 6a657c75..1000d34b 100644 --- a/damus/Views/SaveKeysView.swift +++ b/damus/Views/SaveKeysView.swift @@ -24,36 +24,30 @@ struct SaveKeysView: View { var body: some View { ZStack(alignment: .top) { VStack(alignment: .center) { - Text("Welcome, \(account.rendered_name)!", comment: "Text to welcome user.") - .font(.title.bold()) - .padding(.bottom, 10) + if account.rendered_name.isEmpty { + Text("Welcome!", comment: "Text to welcome user.") + .font(.title.bold()) + .padding(.bottom, 10) + } else { + Text("Welcome, \(account.rendered_name)!", comment: "Text to welcome user.") + .font(.title.bold()) + .padding(.bottom, 10) + } Text("Before we get started, you'll need to save your account info, otherwise you won't be able to login in the future if you ever uninstall Damus.", comment: "Reminder to user that they should save their account information.") .padding(.bottom, 10) - Text("Public Key", comment: "Label to indicate that text below is the user's public key used by others to uniquely refer to the user.") + Text("Private Key", comment: "Label to indicate that the text below is the user's private key used by only the user themself as a secret to login to access their account.") .font(.title2.bold()) .padding(.bottom, 10) - Text("This is your account ID, you can give this to your friends so that they can follow you. Tap to copy.", comment: "Label to describe that a public key is the user's account ID and what they can do with it.") + Text("This is your secret account key. You need this to access your account. Don't share this with anyone! Save it in a password manager and keep it safe!", comment: "Label to describe that a private key is the user's secret account key and what they should do with it.") .padding(.bottom, 10) - SaveKeyView(text: account.pubkey.npub, textContentType: .username, is_copied: $pub_copied, focus: $pubkey_focused) + SaveKeyView(text: account.privkey.nsec, textContentType: .newPassword, is_copied: $priv_copied, focus: $privkey_focused) .padding(.bottom, 10) - - if pub_copied { - Text("Private Key", comment: "Label to indicate that the text below is the user's private key used by only the user themself as a secret to login to access their account.") - .font(.title2.bold()) - .padding(.bottom, 10) - - Text("This is your secret account key. You need this to access your account. Don't share this with anyone! Save it in a password manager and keep it safe!", comment: "Label to describe that a private key is the user's secret account key and what they should do with it.") - .padding(.bottom, 10) - - SaveKeyView(text: account.privkey.nsec, textContentType: .newPassword, is_copied: $priv_copied, focus: $privkey_focused) - .padding(.bottom, 10) - } - - if pub_copied && priv_copied { + + if priv_copied { if loading { ProgressView() .progressViewStyle(.circular) diff --git a/damus/Views/SetupView.swift b/damus/Views/SetupView.swift index 7af97841..3ecbb842 100644 --- a/damus/Views/SetupView.swift +++ b/damus/Views/SetupView.swift @@ -49,7 +49,7 @@ struct SetupView: View { Spacer() Button(action: { - navigationCoordinator.push(route: Route.EULA) + navigationCoordinator.push(route: Route.Login) }) { HStack { Text("Let's get started!", comment: "Button to continue to login page.") @@ -104,6 +104,7 @@ struct WhatIsNostr: View { LearnAboutNostrLink() .padding(.top, 10) } + Spacer() } } } @@ -120,6 +121,7 @@ struct WhyWeNeedNostr: View { Text("Social media has developed into a key way information flows around the world. Unfortunately, our current social media systems are broken", comment: "Description about why Nostr is needed.") .foregroundColor(DamusColors.mediumGrey) } + Spacer() } } }