diff --git a/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationView.swift b/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationView.swift index 846661491..88cd04cb5 100644 --- a/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationView.swift +++ b/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationView.swift @@ -16,54 +16,42 @@ struct StartRegistrationView: View { // MARK: View var body: some View { - VStack(spacing: 16) { - if store.state.isCreateAccountFeatureFlagEnabled { - Image(decorative: Asset.Images.Illustrations.vault) - .resizable() - .frame(width: 132, height: 132) - .padding(.top, 24) - .padding(.bottom, 32) + mainContent + .navigationBar( + title: Localizations.createAccount, + titleDisplayMode: .inline + ) + .task { + await store.perform(.appeared) } - - name - - VStack(alignment: .leading, spacing: 0) { - email - .padding(.bottom, 8) - - RegionSelector( - selectorLabel: Localizations.creatingOn, - regionName: store.state.region.baseUrlDescription - ) { - await store.perform(.regionTapped) + .toolbar { + cancelToolbarItem { + store.send(.dismiss) } } + .toast( + store.binding( + get: \.toast, + send: StartRegistrationAction.toastShown + ) + ) + } - receiveMarketingToggle - - continueButton + // MARK: Private views - termsAndPrivacyText - .frame(maxWidth: .infinity) - } - .navigationBar(title: Localizations.createAccount, titleDisplayMode: .inline) - .scrollView() - .task { - await store.perform(.appeared) - } - .toolbar { - cancelToolbarItem { - store.send(.dismiss) + /// The button pressed when the user attempts to create the account. + private var continueButton: some View { + Button { + Task { + await store.perform(.startRegistration) } + } label: { + Text(Localizations.continue) } - .toast(store.binding( - get: \.toast, - send: StartRegistrationAction.toastShown - )) + .accessibilityIdentifier("ContinueButton") + .buttonStyle(.primary()) } - // MARK: Private views - /// The text fields for the user's email and password. private var email: some View { BitwardenTextField( @@ -77,6 +65,31 @@ struct StartRegistrationView: View { .textFieldConfiguration(.email) } + /// The main content view that displays a scrollable layout of registration details. + private var mainContent: some View { + GeometryReader { proxy in + VStack(spacing: 0) { + if store.state.isCreateAccountFeatureFlagEnabled { + Spacer(minLength: 24) + + Image(decorative: Asset.Images.logo) + .resizable() + .scaledToFit() + .foregroundColor(Asset.Colors.iconSecondary.swiftUIColor) + .frame(maxWidth: .infinity, maxHeight: 34) + .padding(.horizontal, 12) + + Spacer(minLength: 24) + } + + registrationDetails + } + .padding(.vertical, 16) + .frame(minHeight: store.state.isCreateAccountFeatureFlagEnabled ? proxy.size.height : 0) + .scrollView(addVerticalPadding: false, showsIndicators: false) + } + } + /// The text fields for the user's email and password. private var name: some View { BitwardenTextField( @@ -90,29 +103,6 @@ struct StartRegistrationView: View { .textFieldConfiguration(.username) } - /// The button pressed when the user attempts to create the account. - private var continueButton: some View { - Button { - Task { - await store.perform(.startRegistration) - } - } label: { - Text(Localizations.continue) - } - .accessibilityIdentifier("ContinueButton") - .buttonStyle(.primary()) - } - - /// The button pressed when the user attempts to create the account. - private var termsAndPrivacyText: some View { - Text(LocalizedStringKey(store.state.termsAndPrivacyDisclaimerText)) - .styleGuide(.footnote) - .tint(Asset.Colors.textInteraction.swiftUIColor) - .foregroundColor(Asset.Colors.textPrimary.swiftUIColor) - .padding([.bottom], 32) - .multilineTextAlignment(.center) - } - /// A toggle for the terms and privacy agreement. @ViewBuilder private var receiveMarketingToggle: some View { if store.state.showReceiveMarketingToggle { @@ -131,6 +121,40 @@ struct StartRegistrationView: View { .id(ViewIdentifier.StartRegistration.receiveMarketing) } } + + /// The section of the view containing input fields, and action buttons. + private var registrationDetails: some View { + VStack(spacing: 16) { + name + + VStack(alignment: .leading, spacing: 0) { + email + .padding(.bottom, 8) + + RegionSelector( + selectorLabel: Localizations.creatingOn, + regionName: store.state.region.baseUrlDescription + ) { + await store.perform(.regionTapped) + } + } + + receiveMarketingToggle + continueButton + termsAndPrivacyText + .frame(maxWidth: .infinity) + } + } + + /// The button pressed when the user attempts to create the account. + private var termsAndPrivacyText: some View { + Text(LocalizedStringKey(store.state.termsAndPrivacyDisclaimerText)) + .styleGuide(.footnote) + .tint(Asset.Colors.textInteraction.swiftUIColor) + .foregroundColor(Asset.Colors.textPrimary.swiftUIColor) + .padding([.bottom], 32) + .multilineTextAlignment(.center) + } } // MARK: Previews diff --git a/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationViewTests.swift b/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationViewTests.swift index 7301c0c5a..99009a510 100644 --- a/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationViewTests.swift +++ b/BitwardenShared/UI/Auth/StartRegistration/StartRegistrationViewTests.swift @@ -99,7 +99,7 @@ class StartRegistrationViewTests: BitwardenTestCase { @MainActor func test_snapshot_nativeCreateAccountFeatureFlag() { processor.state.isCreateAccountFeatureFlagEnabled = true - assertSnapshot(of: subject, as: .defaultPortrait) + assertSnapshots(of: subject, as: [.defaultPortrait, .defaultPortraitDark]) } /// Tests the view renders correctly when the text fields are all populated. diff --git a/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.1.png b/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.1.png index 55ce39a73..65084caae 100644 Binary files a/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.1.png and b/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.1.png differ diff --git a/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.2.png b/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.2.png new file mode 100644 index 000000000..6f0bbe796 Binary files /dev/null and b/BitwardenShared/UI/Auth/StartRegistration/__Snapshots__/StartRegistrationViewTests/test_snapshot_nativeCreateAccountFeatureFlag.2.png differ diff --git a/BitwardenShared/UI/Platform/Application/Extensions/View.swift b/BitwardenShared/UI/Platform/Application/Extensions/View.swift index 88911735c..57dc29f15 100644 --- a/BitwardenShared/UI/Platform/Application/Extensions/View.swift +++ b/BitwardenShared/UI/Platform/Application/Extensions/View.swift @@ -113,6 +113,7 @@ extension View { /// - Parameters: /// - addVerticalPadding: Whether or not to add vertical padding. Defaults to `true`. /// - backgroundColor: The background color to apply to the scroll view. Defaults to `backgroundPrimary`. + /// - showsIndicators: Whether or not the scroll indicators are shown. /// /// - Returns: A view within a `ScrollView`. ///