Merge pull request #662 from wordpress-mobile/wcios/7437-magic-link-auto-sent

Prefer magic link to password under a configuration

Author: jaclync

WordPressAuthenticator.podspec

@@ -2,7 +2,7 @@
 
 Pod::Spec.new do |s|
   s.name          = 'WordPressAuthenticator'
-  s.version       = '2.2.0-beta.3'
+  s.version       = '2.2.0-beta.4'
 
   s.summary       = 'WordPressAuthenticator implements an easy and elegant way to authenticate your WordPress Apps.'
   s.description   = <<-DESC

WordPressAuthenticator.xcodeproj/project.pbxproj

@@ -8,6 +8,10 @@
 
 /* Begin PBXBuildFile section */
 		020BE74A23B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020BE74923B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift */; };
+		02A526CA28A3499C00FD1812 /* MagicLinkRequestedViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02A526C828A3499C00FD1812 /* MagicLinkRequestedViewController.swift */; };
+		02A526CB28A3499C00FD1812 /* MagicLinkRequestedViewController.xib in Resources */ = {isa = PBXBuildFile; fileRef = 02A526C928A3499C00FD1812 /* MagicLinkRequestedViewController.xib */; };
+		02A526CD28A3A23900FD1812 /* UIButton+Styles.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02A526CC28A3A23900FD1812 /* UIButton+Styles.swift */; };
+		02A526CF28A3A35D00FD1812 /* PasswordCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02A526CE28A3A35D00FD1812 /* PasswordCoordinator.swift */; };
 		1A21EE9822832BC300C940C6 /* WordPressComOAuthClientFacade+Swift.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1A21EE9722832BC200C940C6 /* WordPressComOAuthClientFacade+Swift.swift */; };
 		1A4095182271AEFC009AA86D /* WPAuthenticator-Swift.h in Headers */ = {isa = PBXBuildFile; fileRef = 1A4095152271AEFC009AA86D /* WPAuthenticator-Swift.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		3108613125AFA4830022F75E /* PasteboardTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3108613025AFA4830022F75E /* PasteboardTests.swift */; };
@@ -209,6 +213,10 @@
 
 /* Begin PBXFileReference section */
 		020BE74923B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WordPressAuthenticatorDisplayImages.swift; sourceTree = "<group>"; };
+		02A526C828A3499C00FD1812 /* MagicLinkRequestedViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MagicLinkRequestedViewController.swift; sourceTree = "<group>"; };
+		02A526C928A3499C00FD1812 /* MagicLinkRequestedViewController.xib */ = {isa = PBXFileReference; lastKnownFileType = file.xib; path = MagicLinkRequestedViewController.xib; sourceTree = "<group>"; };
+		02A526CC28A3A23900FD1812 /* UIButton+Styles.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIButton+Styles.swift"; sourceTree = "<group>"; };
+		02A526CE28A3A35D00FD1812 /* PasswordCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PasswordCoordinator.swift; sourceTree = "<group>"; };
 		1A21EE9722832BC200C940C6 /* WordPressComOAuthClientFacade+Swift.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "WordPressComOAuthClientFacade+Swift.swift"; sourceTree = "<group>"; };
 		1A4095152271AEFC009AA86D /* WPAuthenticator-Swift.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "WPAuthenticator-Swift.h"; sourceTree = "<group>"; };
 		276354F054C34AD36CA32AB6 /* Pods-WordPressAuthenticator.release-alpha.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WordPressAuthenticator.release-alpha.xcconfig"; path = "Pods/Target Support Files/Pods-WordPressAuthenticator/Pods-WordPressAuthenticator.release-alpha.xcconfig"; sourceTree = "<group>"; };
@@ -478,6 +486,7 @@
 			children = (
 				984D508124D4B21A00251A63 /* PasswordViewController.swift */,
 				984D508324D4B24500251A63 /* Password.storyboard */,
+				02A526CE28A3A35D00FD1812 /* PasswordCoordinator.swift */,
 			);
 			path = Password;
 			sourceTree = "<group>";
@@ -691,6 +700,7 @@
 				CE9091FD249A720E00AB50BD /* UIView+AuthHelpers.swift */,
 				F11448EB258B827B0048203D /* URL+JetpackConnect.swift */,
 				EE633D01287560E50002DE03 /* UITableView+Helpers.swift */,
+				02A526CC28A3A23900FD1812 /* UIButton+Styles.swift */,
 			);
 			path = Extensions;
 			sourceTree = "<group>";
@@ -849,6 +859,8 @@
 			children = (
 				CE811D6624EDC0FB00F4CCD6 /* LoginMagicLinkViewController.swift */,
 				CE811D6824EDC14A00F4CCD6 /* LoginMagicLink.storyboard */,
+				02A526C828A3499C00FD1812 /* MagicLinkRequestedViewController.swift */,
+				02A526C928A3499C00FD1812 /* MagicLinkRequestedViewController.xib */,
 			);
 			path = Login;
 			sourceTree = "<group>";
@@ -1069,6 +1081,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				02A526CB28A3499C00FD1812 /* MagicLinkRequestedViewController.xib in Resources */,
 				B5E07FF4208FD13800657A9A /* Assets.xcassets in Resources */,
 				98F40AF024F5E13200A72911 /* TextWithLinkTableViewCell.xib in Resources */,
 				B56090CA208A4F5400399AE4 /* NUXButtonView.storyboard in Resources */,
@@ -1218,6 +1231,7 @@
 				D8611A63257622ED00A5DF27 /* NavigateBack.swift in Sources */,
 				B5609143208A563800399AE4 /* LoginSocialErrorViewController.swift in Sources */,
 				B56090F8208A533200399AE4 /* WordPressAuthenticator+Notifications.swift in Sources */,
+				02A526CF28A3A35D00FD1812 /* PasswordCoordinator.swift in Sources */,
 				98ED483624802F8F00992B2D /* GoogleAuthViewController.swift in Sources */,
 				F5C817E72582B2F300BD5A3B /* UIPasteboard+Detect.swift in Sources */,
 				B56090EA208A51D000399AE4 /* LoginFields+Validation.swift in Sources */,
@@ -1242,6 +1256,7 @@
 				CE2D03E024E5DD4500D18942 /* UnifiedSignupViewController.swift in Sources */,
 				98CF18F7248725370047B66C /* GoogleSignupConfirmationViewController.swift in Sources */,
 				1A21EE9822832BC300C940C6 /* WordPressComOAuthClientFacade+Swift.swift in Sources */,
+				02A526CD28A3A23900FD1812 /* UIButton+Styles.swift in Sources */,
 				CEC77C6624854F2E00FB9050 /* SiteAddressViewController.swift in Sources */,
 				CEDE0D952420121D00CB3345 /* UIStoryboard+Helpers.swift in Sources */,
 				B5ED7920207E993E00A8FD8C /* WPAuthenticatorLogging.m in Sources */,
@@ -1307,6 +1322,7 @@
 				B56090D0208A4F5400399AE4 /* NUXViewControllerBase.swift in Sources */,
 				3F550D5123DA4A9C007E5897 /* LinkMailPresenter.swift in Sources */,
 				98D9A4B12474A526002E491C /* GoogleAuthenticator.swift in Sources */,
+				02A526CA28A3499C00FD1812 /* MagicLinkRequestedViewController.swift in Sources */,
 				CE1BBF8C24D48580001D2E3E /* GravatarEmailTableViewCell.swift in Sources */,
 				B56090DE208A4F9D00399AE4 /* WPWalkthroughOverlayView.m in Sources */,
 				B560910A208A54F800399AE4 /* WordPressComAccountService.swift in Sources */,

WordPressAuthenticator/Analytics/AuthenticatorAnalyticsTracker.swift

@@ -125,6 +125,10 @@ public class AuthenticatorAnalyticsTracker {
         /// Triggered when a user enters site credentials and sees the screen with instructions to verify email. (`VerifyEmailViewController`)
         ///
         case verifyEmailInstructions = "instructions_to_verify_email"
+
+        /// Triggered when a magic link is automatically requested after filling in email address and the requested screen is shown
+        ///
+        case magicLinkAutoRequested = "magic_link_auto_requested"
     }
 
     public enum ClickTarget: String {

WordPressAuthenticator/Authenticator/WordPressAuthenticatorConfiguration.swift

@@ -104,6 +104,10 @@ public struct WordPressAuthenticatorConfiguration {
     ///  Disabled by default
     let isWPComLoginRequiredForSiteCredentialsLogin: Bool
 
+    /// If enabled, a magic link is sent automatically in place of password then fall back to password.
+    /// If disabled, password is shown by default with an option to send a magic link.
+    let isWPComMagicLinkPreferredToPassword: Bool
+
     /// Designated Initializer
     ///
     public init (wpcomClientId: String,
@@ -126,7 +130,8 @@ public struct WordPressAuthenticatorConfiguration {
                  displayHintButtons: Bool = true,
                  continueWithSiteAddressFirst: Bool = false,
                  enableSiteCredentialsLoginForSelfHostedSites: Bool = false,
-                 isWPComLoginRequiredForSiteCredentialsLogin: Bool = false) {
+                 isWPComLoginRequiredForSiteCredentialsLogin: Bool = false,
+                 isWPComMagicLinkPreferredToPassword: Bool = false) {
 
         self.wpcomClientId = wpcomClientId
         self.wpcomSecret = wpcomSecret
@@ -149,5 +154,6 @@ public struct WordPressAuthenticatorConfiguration {
         self.continueWithSiteAddressFirst = continueWithSiteAddressFirst
         self.enableSiteCredentialsLoginForSelfHostedSites = enableSiteCredentialsLoginForSelfHostedSites
         self.isWPComLoginRequiredForSiteCredentialsLogin = isWPComLoginRequiredForSiteCredentialsLogin
+        self.isWPComMagicLinkPreferredToPassword = isWPComMagicLinkPreferredToPassword
     }
 }

WordPressAuthenticator/Authenticator/WordPressSupportSourceTag.swift

@@ -75,4 +75,7 @@ extension WordPressSupportSourceTag {
         return WordPressSupportSourceTag(name: "wpComSignupApple", origin: "origin:signup-apple")
     }
 
+    public static var wpComLoginMagicLinkAutoRequested: WordPressSupportSourceTag {
+        return WordPressSupportSourceTag(name: "wpComLoginMagicLinkAutoRequested", origin: "origin:login-email")
+    }
 }

WordPressAuthenticator/Extensions/UIButton+Styles.swift

@@ -0,0 +1,15 @@
+import UIKit
+
+extension UIButton {
+    /// Applies the style that looks like a plain text link.
+    func applyLinkButtonStyle() {
+        backgroundColor = .clear
+        titleLabel?.font = WPStyleGuide.fontForTextStyle(.body)
+        titleLabel?.textAlignment = .natural
+
+        let buttonTitleColor = WordPressAuthenticator.shared.unifiedStyle?.textButtonColor ?? WordPressAuthenticator.shared.style.textButtonColor
+        let buttonHighlightColor = WordPressAuthenticator.shared.unifiedStyle?.textButtonHighlightColor ?? WordPressAuthenticator.shared.style.textButtonHighlightColor
+        setTitleColor(buttonTitleColor, for: .normal)
+        setTitleColor(buttonHighlightColor, for: .highlighted)
+    }
+}

WordPressAuthenticator/Resources/Assets.xcassets/email.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "email.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WordPressAuthenticator/Resources/Assets.xcassets/email.imageset/email.pdf

@@ -73,6 +73,8 @@ class GetStartedViewController: LoginViewController, NUXKeyboardResponder {
     private let configuration = WordPressAuthenticator.shared.configuration
     private var shouldChangeVoiceOverFocus: Bool = false
 
+    private var passwordCoordinator: PasswordCoordinator?
+
     /// Sign in with site credentials button will be displayed based on the `screenMode`
     ///
     private var screenMode: ScreenMode {
@@ -499,7 +501,7 @@ private extension GetStartedViewController {
                                       success: { [weak self] passwordless in
                                         self?.configureViewLoading(false)
                                         self?.loginFields.meta.passwordless = passwordless
-                                        passwordless ? self?.requestAuthenticationLink() : self?.showPasswordView()
+                                        passwordless ? self?.requestAuthenticationLink() : self?.showPasswordOrMagicLinkView()
             },
                                       failure: { [weak self] error in
                                         WordPressAuthenticator.track(.loginFailed, error: error)
@@ -528,6 +530,26 @@ private extension GetStartedViewController {
         navigationController?.pushViewController(vc, animated: true)
     }
 
+    /// Show the password or magic link view based on the configuration.
+    ///
+    func showPasswordOrMagicLinkView() {
+        guard let navigationController = navigationController else {
+            return
+        }
+        configureViewLoading(true)
+        let coordinator = PasswordCoordinator(navigationController: navigationController,
+                                              source: source,
+                                              loginFields: loginFields,
+                                              tracker: tracker,
+                                              configuration: WordPressAuthenticator.shared.configuration)
+        passwordCoordinator = coordinator
+        Task { @MainActor [weak self] in
+            guard let self = self else { return }
+            await coordinator.start()
+            self.configureViewLoading(false)
+        }
+    }
+
     /// Handle errors when attempting to log in with an email address
     ///
     func handleLoginError(_ error: Error) {

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

@@ -0,0 +1,158 @@
+import UIKit
+import WordPressUI
+
+final class MagicLinkRequestedViewController: LoginViewController {
+
+    // MARK: Properties
+
+    @IBOutlet private weak var titleLabel: UILabel!
+    @IBOutlet private weak var subtitleLabel: UILabel!
+    @IBOutlet private weak var emailLabel: UILabel!
+    @IBOutlet private weak var cannotFindEmailLabel: UILabel!
+    @IBOutlet private weak var buttonContainerView: UIView!
+    @IBOutlet private weak var loginWithPasswordButton: UIButton!
+
+    private let email: String
+    private let loginWithPassword: () -> Void
+
+    private lazy var buttonViewController: NUXButtonViewController = .instance()
+
+    init(email: String, loginWithPassword: @escaping () -> Void) {
+        self.email = email
+        self.loginWithPassword = loginWithPassword
+        super.init(nibName: "MagicLinkRequestedViewController", bundle: WordPressAuthenticator.bundle)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override var sourceTag: WordPressSupportSourceTag {
+        .wpComLoginMagicLinkAutoRequested
+    }
+
+    // MARK: - View lifecycle
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        navigationItem.title = WordPressAuthenticator.shared.displayStrings.logInTitle
+        styleNavigationBar(forUnified: true)
+
+        setupButtons()
+        setupTitleLabel()
+        setupSubtitleLabel()
+        setupEmailLabel()
+        setupCannotFindEmailLabel()
+    }
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+
+        tracker.set(flow: .loginWithMagicLink)
+
+        if isBeingPresentedInAnyWay {
+            tracker.track(step: .magicLinkAutoRequested)
+        } else {
+            tracker.set(step: .magicLinkAutoRequested)
+        }
+    }
+
+    // MARK: - Overrides
+
+    /// Style individual ViewController backgrounds, for now.
+    ///
+    override func styleBackground() {
+        guard let unifiedBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.viewControllerBackgroundColor else {
+            return super.styleBackground()
+        }
+        view.backgroundColor = unifiedBackgroundColor
+    }
+
+    /// Style individual ViewController status bars.
+    ///
+    override var preferredStatusBarStyle: UIStatusBarStyle {
+        WordPressAuthenticator.shared.unifiedStyle?.statusBarStyle ?? WordPressAuthenticator.shared.style.statusBarStyle
+    }
+}
+
+private extension MagicLinkRequestedViewController {
+    func setupButtons() {
+        setupContinueMailButton()
+        setupLoginWithPasswordButton()
+    }
+
+    /// Configures the primary button using the shared NUXButton style without a Storyboard.
+    func setupContinueMailButton() {
+        buttonViewController.setupTopButton(title: WordPressAuthenticator.shared.displayStrings.openMailButtonTitle, isPrimary: true, onTap: { [weak self] in
+            guard let self = self else { return }
+            guard let topButton = self.buttonViewController.topButton else {
+                return
+            }
+            self.openMail(sender: topButton)
+        })
+        buttonViewController.move(to: self, into: buttonContainerView)
+    }
+
+    /// 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.applyLinkButtonStyle()
+        loginWithPasswordButton.on(.touchUpInside) { [weak self] _ in
+            self?.loginWithPassword()
+        }
+    }
+
+    func setupTitleLabel() {
+        titleLabel.text = Localization.title
+        titleLabel.font = WPStyleGuide.mediumWeightFont(forStyle: .title3)
+        titleLabel.textColor = WordPressAuthenticator.shared.unifiedStyle?.textColor
+        titleLabel.numberOfLines = 0
+    }
+
+    func setupSubtitleLabel() {
+        subtitleLabel.text = Localization.subtitle
+        subtitleLabel.font = WPStyleGuide.fontForTextStyle(.body)
+        subtitleLabel.textColor = WordPressAuthenticator.shared.unifiedStyle?.textColor
+        subtitleLabel.numberOfLines = 0
+    }
+
+    func setupEmailLabel() {
+        emailLabel.text = email
+        emailLabel.numberOfLines = 0
+        emailLabel.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .bold)
+        emailLabel.textColor = WordPressAuthenticator.shared.unifiedStyle?.textColor
+    }
+
+    func setupCannotFindEmailLabel() {
+        cannotFindEmailLabel.text = Localization.cannotFindMailLoginInstructions
+        cannotFindEmailLabel.numberOfLines = 0
+        cannotFindEmailLabel.font = WPStyleGuide.fontForTextStyle(.footnote)
+        cannotFindEmailLabel.textColor = WordPressAuthenticator.shared.unifiedStyle?.textSubtleColor
+    }
+}
+
+private extension MagicLinkRequestedViewController {
+    func openMail(sender: UIView) {
+        tracker.track(click: .openEmailClient)
+        tracker.track(step: .emailOpened)
+
+        let linkMailPresenter = LinkMailPresenter(emailAddress: email)
+        let appSelector = AppSelector(sourceView: sender)
+        linkMailPresenter.presentEmailClients(on: self, appSelector: appSelector)
+    }
+}
+
+private extension MagicLinkRequestedViewController {
+    enum Localization {
+        static let cannotFindMailLoginInstructions = NSLocalizedString("If you can’t find the email, please check your junk or spam email folder",
+                                                                       comment: "The instructions text about not being able to find the magic link email.")
+        static let title = NSLocalizedString("Check your email on this device!",
+                                             comment: "The title text on the magic link requested screen.")
+        static let subtitle = NSLocalizedString("We just sent a magic link to",
+                                                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.")
+    }
+}