[Login] Use magic link for suspicious emails

RELEASE-NOTES.txt

@@ -5,6 +5,7 @@
 -----
 
 - [*] Order Creation: Fixed an issue where order recalculation would stop working after canceling a confirmation with unsaved changes [https://github.com/woocommerce/woocommerce-ios/pull/15392].
+- [*] [Internal] Improved login flow for accounts using emails marked as suspicious [https://github.com/woocommerce/woocommerce-ios/pull/15444]
 
 22.0
 -----

WooCommerce/WordPressAuthenticator/Analytics/AuthenticatorAnalyticsTracker.swift

@@ -263,9 +263,13 @@ public class AuthenticatorAnalyticsTracker {
         ///
         case signInWithSiteCredentials = "sign_in_with_site_credentials"
 
-        /// When the user clicks on “Login with account password” on `VerifyEmailViewController`
+        /// When the user clicks on “Login with account password” on `VerifyEmailViewController` and magic link screens
         ///
         case loginWithAccountPassword = "login_with_password"
+
+        /// When the user falls back to WordPress.com username and password login from the magic link screen
+        ///
+        case loginWithWPComUsernamePassword = "login_with_wp_com_username_password"
     }
 
     public enum Failure: String {

WooCommerce/WordPressAuthenticator/NUX/Button/NUXButton.swift

@@ -51,6 +51,7 @@ public struct NUXButtonStyle {
     }
 
     var buttonStyle: NUXButtonStyle?
+    var contentInsets: UIEdgeInsets = UIImage.DefaultRenderMetrics.contentInsets
 
     open override var isEnabled: Bool {
         didSet {
@@ -150,7 +151,7 @@ public struct NUXButtonStyle {
     /// Setup: NUXButton's Default Settings
     ///
     private func configureInsets() {
-        contentEdgeInsets = UIImage.DefaultRenderMetrics.contentInsets
+        contentEdgeInsets = contentInsets
     }
 
     /// Setup: ActivityIndicator

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Get Started/GetStartedViewController.swift

@@ -578,10 +578,11 @@ private extension GetStartedViewController {
         if configuration.enableSignUp, errorCode == "unknown_user" {
             self.sendEmail()
         } else if errorCode == "email_login_not_allowed" {
-                // If we get this error, we know we have a WordPress.com user but their
-                // email address is flagged as suspicious.  They need to login via their
-                // username instead.
-                self.showSelfHostedWithError(error)
+            // If we get this error, we know we have a WordPress.com user but their
+            // email address is flagged as suspicious.
+            // Take the user to the magic link request screen to verify their email.
+            self.tracker.track(failure: error.localizedDescription)
+            self.showMagicLinkRequestScreen()
         } else {
             let signInError = SignInError(error: error, source: source) ?? error
             guard let authenticationDelegate = WordPressAuthenticator.shared.delegate,
@@ -742,23 +743,13 @@ private extension GetStartedViewController {
         validateFormAndLogin()
     }
 
-    /// Configures loginFields to log into wordpress.com and navigates to the selfhosted username/password form.
-    /// Displays the specified error message when the new view controller appears.
+    /// Show Magic Link request screen, the screen allows the user to request a magic link to be sent to their email.
     ///
-    func showSelfHostedWithError(_ error: Error) {
-        loginFields.siteAddress = "https://wordpress.com"
-        errorToPresent = error
-
-        tracker.track(failure: error.localizedDescription)
-
-        guard let vc = SiteCredentialsViewController.instantiate(from: .siteAddress) else {
-            WPAuthenticatorLogError("Failed to navigate to SiteCredentialsViewController from GetStartedViewController")
-            return
-        }
+    func showMagicLinkRequestScreen() {
+        let vc = MagicLinkRequestViewController(fallbackAction: .wpcomUsernamePassword)
 
         vc.loginFields = loginFields
         vc.dismissBlock = dismissBlock
-        vc.errorToPresent = errorToPresent
 
         navigationController?.pushViewController(vc, animated: true)
     }

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Login/MagicLinkFallbackAction.swift

@@ -0,0 +1,6 @@
+/// Defines the action of the fallback button in the Magic Link screens.
+///
+enum MagicLinkFallbackAction {
+    case password
+    case wpcomUsernamePassword
+}

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Login/MagicLinkRequestViewController.swift

@@ -0,0 +1,230 @@
+import UIKit
+import WordPressUI
+import SwiftUI
+import WordPressShared
+
+class MagicLinkRequestViewController: LoginViewController {
+    private let stackView = UIStackView()
+    let fallbackAction: MagicLinkFallbackAction
+
+    init(fallbackAction: MagicLinkFallbackAction) {
+        self.fallbackAction = fallbackAction
+        super.init(nibName: nil, bundle: nil)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override var sourceTag: WordPressSupportSourceTag {
+        get {
+            return .loginMagicLink
+        }
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        let email = loginFields.username
+        if !email.isValidEmail() {
+            assert(email.isValidEmail(), "The value of loginFields.username was not a valid email address.")
+        }
+
+        tracker.set(flow: .loginWithMagicLink)
+        tracker.track(step: .start)
+
+        configureStackView()
+    }
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        WordPressAuthenticator.track(.loginMagicLinkRequestFormViewed)
+    }
+}
+
+// MARK: Actions
+private extension MagicLinkRequestViewController {
+    func sendMagicLink() {
+        Task { @MainActor in
+            tracker.track(click: .requestMagicLink)
+            configureSubmitButton(animating: true)
+
+            let result = await MagicLinkRequester().requestMagicLink(email: loginFields.username, jetpackLogin: loginFields.meta.jetpackLogin)
+
+            configureSubmitButton(animating: false)
+
+            switch result {
+            case .success:
+                let vc = MagicLinkRequestedViewController(email: loginFields.username,
+                                                          fallbackAction: fallbackAction) { [weak self] in
+                    self?.openFallbackScreen()
+                }
+
+                vc.loginFields = loginFields
+                navigationController?.pushViewController(vc, animated: true)
+
+            case .failure(let error):
+                WordPressAuthenticator.track(.loginMagicLinkFailed, error: error)
+                displayErrorAlert(Localization.magicLinkError, sourceTag: self.sourceTag)
+            }
+        }
+    }
+
+    func openFallbackScreen() {
+        let vc: LoginViewController?
+        switch self.fallbackAction {
+        case .password:
+            tracker.track(click: .loginWithAccountPassword)
+            vc = PasswordViewController.instantiate(from: .password)
+        case .wpcomUsernamePassword:
+            tracker.track(click: .loginWithWPComUsernamePassword)
+            vc = SiteCredentialsViewController.instantiate(from: .siteAddress)
+        }
+
+        guard let vc else { return }
+
+        vc.loginFields = self.loginFields
+        if fallbackAction == .wpcomUsernamePassword {
+            vc.loginFields.siteAddress = "https://wordpress.com"
+        }
+
+        self.navigationController?.pushViewController(vc, animated: true)
+    }
+}
+
+// MARK: UI Setup
+private extension MagicLinkRequestViewController {
+    private func configureStackView() {
+        stackView.axis = .vertical
+        stackView.alignment = .leading
+        stackView.spacing = 16
+        stackView.layoutMargins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
+        stackView.isLayoutMarginsRelativeArrangement = true
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        view.addSubview(stackView)
+        stackView.pinSubviewToAllEdges(view, insets: view.safeAreaInsets)
+
+        let header = createHeader()
+        stackView.addArrangedSubview(header)
+        pinSubviewToHorizontalEdges(header)
+
+        let message = UILabel()
+        message.text = Localization.description
+        message.font = .preferredFont(forTextStyle: .body)
+        message.numberOfLines = 0
+        stackView.addArrangedSubview(message)
+        pinSubviewToHorizontalEdges(message)
+
+        let fallbackButton = createFallbackButton()
+        stackView.addArrangedSubview(fallbackButton)
+
+        let spacer = UIView()
+        spacer.setContentHuggingPriority(.defaultLow, for: .vertical)
+        stackView.addArrangedSubview(spacer)
+
+        let primaryButton = createPrimaryButton()
+        stackView.addArrangedSubview(primaryButton)
+        pinSubviewToHorizontalEdges(primaryButton)
+    }
+
+    private func createHeader() -> UIView {
+        let headerStackView = UIStackView()
+        headerStackView.spacing = 16
+        headerStackView.layoutMargins = UIEdgeInsets(top: 24, left: 16, bottom: 24, right: 16)
+        headerStackView.isLayoutMarginsRelativeArrangement = true
+        headerStackView.axis = .horizontal
+
+        let gravatar = UIImageView()
+        gravatar.addConstraints([
+            gravatar.widthAnchor.constraint(equalToConstant: 32),
+            gravatar.heightAnchor.constraint(equalToConstant: 32)
+        ])
+        let placeholder = UIImage.gridicon(.userCircle, size: CGSize(width: 32, height: 32))
+        gravatar.downloadGravatarWithEmail(loginFields.username, placeholderImage: placeholder)
+        gravatar.tintColor = WordPressAuthenticator.shared.unifiedStyle?.borderColor ?? WordPressAuthenticator.shared.style.primaryNormalBorderColor
+        headerStackView.addArrangedSubview(gravatar)
+
+
+        let emailLabel = UILabel()
+        emailLabel.text = loginFields.username
+        emailLabel.font = .preferredFont(forTextStyle: .body)
+        emailLabel.textColor = WordPressAuthenticator.shared.unifiedStyle?.gravatarEmailTextColor ?? WordPressAuthenticator.shared.unifiedStyle?.textSubtleColor ?? WordPressAuthenticator.shared.style.subheadlineColor
+        headerStackView.addArrangedSubview(emailLabel)
+
+        headerStackView.layer.cornerRadius = 8
+        headerStackView.layer.borderWidth = 1
+        headerStackView.layer.borderColor = UIColor.systemGray3.cgColor
+
+        return headerStackView
+    }
+
+    private func createFallbackButton() -> UIButton {
+        let fallbackButton = NUXButton()
+        fallbackButton.contentInsets = .zero
+        fallbackButton.buttonStyle = .linkButtonStyle
+        fallbackButton.customizeFont(.preferredFont(forTextStyle: .body))
+
+        fallbackButton.setTitle(fallbackButtonTitle(), for: .normal)
+        fallbackButton.on(.touchUpInside) { [weak self] _ in
+            self?.openFallbackScreen()
+        }
+        return fallbackButton
+    }
+
+    private func createPrimaryButton() -> UIButton {
+        let primaryButton = NUXButton()
+        primaryButton.isPrimary = true
+        submitButton = primaryButton
+        primaryButton.setTitle(Localization.sendMagicLink, for: .normal)
+        primaryButton.on(.touchUpInside) { [weak self] _ in
+            self?.sendMagicLink()
+        }
+
+        return primaryButton
+    }
+
+    private func pinSubviewToHorizontalEdges(_ subView: UIView) {
+        subView.translatesAutoresizingMaskIntoConstraints = false
+        subView.leadingAnchor.constraint(equalTo: stackView.leadingAnchor, constant: stackView.layoutMargins.left).isActive = true
+        subView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: -stackView.layoutMargins.right).isActive = true
+    }
+}
+
+private extension MagicLinkRequestViewController {
+    struct Localization {
+        static let description = NSLocalizedString(
+            "login.magicLinkRequest.description",
+            value: "We'll email you a link that'll log you in instantly, no password needed.",
+            comment: "Description text for the magic link request form."
+        )
+        static let sendMagicLink = NSLocalizedString(
+            "login.magicLinkRequest.sendMagicLink",
+            value: "Send link by email",
+            comment: "Button title to send the magic link."
+        )
+        static let passwordFallback = NSLocalizedString(
+            "login.magicLinkRequest.passwordFallback",
+            value: "Use your password instead",
+            comment: "Button title to fallback to password login."
+        )
+        static let wpcomUsernamePasswordFallback = NSLocalizedString(
+            "login.magicLinkRequest.wpcomUsernamePasswordFallback",
+            value: "Use username and password instead",
+            comment: "Button title to fallback to WordPress.com username and password login."
+        )
+        static let magicLinkError = NSLocalizedString(
+            "login.magicLinkRequest.error",
+            value: "Something went wrong. Please try again.",
+            comment: "Error message when magic link request fails."
+        )
+    }
+
+    private func fallbackButtonTitle() -> String {
+        switch fallbackAction {
+        case .password:
+            return Localization.passwordFallback
+        case .wpcomUsernamePassword:
+            return Localization.wpcomUsernamePasswordFallback
+        }
+    }
+}

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Login/MagicLinkRequestedViewController.swift

@@ -14,11 +14,13 @@ final class MagicLinkRequestedViewController: LoginViewController {
 
     private let email: String
     private let loginWithPassword: () -> Void
+    private let fallbackAction: MagicLinkFallbackAction
 
     private lazy var buttonViewController: NUXButtonViewController = .instance()
 
-    init(email: String, loginWithPassword: @escaping () -> Void) {
+    init(email: String, fallbackAction: MagicLinkFallbackAction, loginWithPassword: @escaping () -> Void) {
         self.email = email
+        self.fallbackAction = fallbackAction
         self.loginWithPassword = loginWithPassword
         super.init(nibName: "MagicLinkRequestedViewController", bundle: WordPressAuthenticator.bundle)
     }
@@ -97,7 +99,7 @@ private extension MagicLinkRequestedViewController {
     /// Unfortunately, the plain text button style is not available in `NUXButton` as it currently supports primary or secondary.
     /// The plain text button is configured manually here.
     func setupLoginWithPasswordButton() {
-        loginWithPasswordButton.setTitle(Localization.loginWithPasswordAction, for: .normal)
+        loginWithPasswordButton.setTitle(fallbackButtonTitle(), for: .normal)
         loginWithPasswordButton.applyLinkButtonStyle()
         loginWithPasswordButton.on(.touchUpInside) { [weak self] _ in
             self?.loginWithPassword()
@@ -154,5 +156,19 @@ private extension MagicLinkRequestedViewController {
                                                 comment: "The subtitle text on the magic link requested screen followed by the email address.")
         static let loginWithPasswordAction = NSLocalizedString("Use password to sign in",
                                                                comment: "The button title text for logging in with WP.com password instead of magic link.")
+        static let loginWithWpcomUsernamePasswordAction = NSLocalizedString(
+            "login.magicLinkRequested.wpcomUsernamePasswordFallback",
+            value: "Use username and password instead",
+            comment: "Button title to fallback to WordPress.com username and password login."
+        )
+    }
+
+    func fallbackButtonTitle() -> String {
+        switch fallbackAction {
+        case .wpcomUsernamePassword:
+            return Localization.loginWithWpcomUsernamePasswordAction
+        case .password:
+            return Localization.loginWithPasswordAction
+        }
     }
 }

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Password/PasswordCoordinator.swift

@@ -47,7 +47,8 @@ private extension PasswordCoordinator {
 
     /// After a magic link is successfully sent, navigates the user to the requested screen.
     func showMagicLinkRequested() {
-        let vc = MagicLinkRequestedViewController(email: loginFields.username) { [weak self] in
+        let vc = MagicLinkRequestedViewController(email: loginFields.username,
+                                                  fallbackAction: .password) { [weak self] in
             self?.showPassword()
         }
         navigationController?.pushViewController(vc, animated: true)

WooCommerce/WordPressAuthenticator/Unified Auth/View Related/Site Address/SiteCredentialsViewController.swift

@@ -557,12 +557,13 @@ extension SiteCredentialsViewController {
     /// proceeds with the submit action.
     ///
     @objc func validateForm() {
-        guard configuration.enableManualSiteCredentialLogin else {
-            return validateFormAndLogin() // handles login with XMLRPC normally
+        if configuration.enableManualSiteCredentialLogin,
+           loginFields.siteAddress != "https://wordpress.com" {
+            // asks the delegate to handle the login
+            validateFormAndTriggerDelegate()
+        } else {
+            validateFormAndLogin()
         }
-
-        // asks the delegate to handle the login
-        validateFormAndTriggerDelegate()
     }
 
     func finishedLogin(withUsername username: String, password: String, xmlrpc: String, options: [AnyHashable: Any]) {