Merge pull request #7748 from woocommerce/issue/7745-account-mismatch-login-site-credentials

Login: Handle Jetpack connection for WP.com login

Author: itsmeichigo

Podfile

@@ -52,7 +52,7 @@ target 'WooCommerce' do
   pod 'Gridicons', '~> 1.2.0'
 
   # To allow pod to pick up beta versions use -beta. E.g., 1.1.7-beta.1
-  pod 'WordPressAuthenticator', '~> 3.1.0'
+  pod 'WordPressAuthenticator', '~> 3.2.0-beta.1'
 #   pod 'WordPressAuthenticator', :git => 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', :commit => ''
   # pod 'WordPressAuthenticator', :git => 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', :branch => ''
   # pod 'WordPressAuthenticator', :path => '../WordPressAuthenticator-iOS'

Podfile.lock

@@ -42,7 +42,7 @@ PODS:
   - WordPress-Aztec-iOS (1.11.0)
   - WordPress-Editor-iOS (1.11.0):
     - WordPress-Aztec-iOS (= 1.11.0)
-  - WordPressAuthenticator (3.1.0):
+  - WordPressAuthenticator (3.2.0-beta.2):
     - Alamofire (~> 4.8)
     - CocoaLumberjack (~> 3.5)
     - GoogleSignIn (~> 6.0.1)
@@ -92,7 +92,7 @@ DEPENDENCIES:
   - Sourcery (~> 1.0.3)
   - StripeTerminal (~> 2.7)
   - WordPress-Editor-iOS (~> 1.11.0)
-  - WordPressAuthenticator (~> 3.1.0)
+  - WordPressAuthenticator (~> 3.2.0-beta.1)
   - WordPressKit (~> 4.49.0)
   - WordPressShared (~> 1.15)
   - WordPressUI (~> 1.12.5)
@@ -163,7 +163,7 @@ SPEC CHECKSUMS:
   UIDeviceIdentifier: af4e11e25a2ea670078e2bd677bb0e8144f9f063
   WordPress-Aztec-iOS: 050b34d4c3adfb7c60363849049b13d60683b348
   WordPress-Editor-iOS: 304098424f1051cb271546c99f906aac296b1b81
-  WordPressAuthenticator: 6e20b44d9743aa26e5089c16fbec35cd55748642
+  WordPressAuthenticator: 74f808d6cef4e261843f50d9378dc8bdb5ef1299
   WordPressKit: 96deb6ba37ea5eaec4ddcaa53eca04d653246152
   WordPressShared: 5477f179c7fe03b5d574f91adda66f67d131827e
   WordPressUI: c5be816f6c7b3392224ac21de9e521e89fa108ac
@@ -179,6 +179,6 @@ SPEC CHECKSUMS:
   ZendeskSupportProvidersSDK: 2bdf8544f7cd0fd4c002546f5704b813845beb2a
   ZendeskSupportSDK: 3a8e508ab1d9dd22dc038df6c694466414e037ba
 
-PODFILE CHECKSUM: a49b41520538bf9a2976016136166162186d972a
+PODFILE CHECKSUM: c8a3ba7544776c3fac1ba06550b2597fc5a03ba6
 
 COCOAPODS: 1.11.3

RELEASE-NOTES.txt

@@ -3,6 +3,7 @@
 10.5
 -----
 - [**] Products: Now you can duplicate products from the More menu of the product detail screen. [https://github.com/woocommerce/woocommerce-ios/pull/7727]
+- [**] Login: Added Jetpack connection support from the Account Mismatch error screen. [https://github.com/woocommerce/woocommerce-ios/pull/7748]
 - [*] Orders: We are bringing back the ability to add/edit customer notes and addresses from the main order screen [https://github.com/woocommerce/woocommerce-ios/pull/7750]
 - [*] Help center: Added help center web page with FAQs for "Wrong WordPress.com account error" screen. [https://github.com/woocommerce/woocommerce-ios/pull/7747]
 - [*] Widgets: The Today's Stat Widget adds support for bigger fonts. [https://github.com/woocommerce/woocommerce-ios/pull/7752]

WooCommerce/Classes/Authentication/AuthenticationManager.swift

@@ -195,14 +195,8 @@ class AuthenticationManager: Authentication {
 
         /// Account mismatched case
         guard matcher.match(originalURL: siteURL) else {
-            /// Account mismatch experiment iteration 1: show jetpack connection error
-            /// if the error happens during site credential login.
-            if let credentials = credentials?.wporg {
-                DDLogWarn("⚠️ Present Jetpack connection error for site: \(String(describing: siteURL))")
-                return jetpackConnectionUI(for: siteURL, with: credentials, in: navigationController)
-            }
             DDLogWarn("⚠️ Present account mismatch error for site: \(String(describing: siteURL))")
-            return accountMismatchUI(for: siteURL, with: matcher)
+            return accountMismatchUI(for: siteURL, siteCredentials: credentials?.wporg, with: matcher, in: navigationController)
         }
 
         /// No Woo found
@@ -618,30 +612,29 @@ private extension AuthenticationManager {
         return ULErrorViewController(viewModel: viewModel)
     }
 
-    /// The error screen to be displayed when the user tries to enter as site
-    /// whose Jetpack is not connected to their WP.com account.
-    /// This screen is currently displayed when user logged in with site credentials.
-    ///
-    func jetpackConnectionUI(for siteURL: String,
-                             with credentials: WordPressOrgCredentials,
-                             in navigationController: UINavigationController) -> UIViewController {
-        let viewModel = JetpackConnectionErrorViewModel(siteURL: siteURL, credentials: credentials, onJetpackSetupCompletion: { email in
-            return WordPressAuthenticator.showVerifyEmailForWPCom(
+    /// The error screen to be displayed when the user tries to enter a site
+    /// whose Jetpack is not associated with their account.
+    /// - Parameters:
+    ///     - siteURL: URL for the site to log in to.
+    ///     - siteCredentials: WP.org credentials used to log in to the site if available.
+    ///     - matcher: the matcher used to check for matching sites.
+    ///     - navigationController: the controller that will present the view.
+    ///
+    func accountMismatchUI(for siteURL: String,
+                           siteCredentials: WordPressOrgCredentials?,
+                           with matcher: ULAccountMatcher,
+                           in navigationController: UINavigationController) -> UIViewController {
+        let viewModel = WrongAccountErrorViewModel(siteURL: siteURL,
+                                                   showsConnectedStores: matcher.hasConnectedStores,
+                                                   siteCredentials: siteCredentials,
+                                                   onJetpackSetupCompletion: { email, xmlrpc in
+            WordPressAuthenticator.showVerifyEmailForWPCom(
                 from: navigationController,
-                xmlrpc: credentials.xmlrpc,
+                xmlrpc: xmlrpc,
                 connectedEmail: email,
                 siteURL: siteURL
             )
         })
-        return ULErrorViewController(viewModel: viewModel)
-    }
-
-    /// The error screen to be displayed when the user tries to enter a site
-    /// whose Jetpack is not associated with their account.
-    /// This screen is currently displayed when user logged in with a WP.com account.
-    ///
-    func accountMismatchUI(for siteURL: String, with matcher: ULAccountMatcher) -> UIViewController {
-        let viewModel = WrongAccountErrorViewModel(siteURL: siteURL, showsConnectedStores: matcher.hasConnectedStores)
         let mismatchAccountUI = ULAccountMismatchViewController(viewModel: viewModel)
         return mismatchAccountUI
     }
@@ -682,15 +675,15 @@ private extension AuthenticationManager {
 
         guard !site.isWPCom else {
             // The site doesn't belong to the current account since it was not included in the site picker.
-            return accountMismatchUI(for: site.url, with: matcher)
+            return accountMismatchUI(for: site.url, siteCredentials: nil, with: matcher, in: navigationController)
         }
 
         /// Jetpack is required. Present an error if we don't detect a valid installation.
-        guard site.isJetpackConnected == true else {
+        guard site.hasJetpack && site.isJetpackActive else {
             return jetpackErrorUI(for: site.url, with: matcher, in: navigationController)
         }
 
-        return accountMismatchUI(for: site.url, with: matcher)
+        return accountMismatchUI(for: site.url, siteCredentials: nil, with: matcher, in: navigationController)
     }
 }
 

WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewController.swift

@@ -1,3 +1,4 @@
+import Combine
 import UIKit
 import WordPressAuthenticator
 import SafariServices
@@ -17,12 +18,17 @@ final class ULAccountMismatchViewController: UIViewController {
         return AccountHeaderView.instantiateFromNib()
     }()
 
+    private var subscriptions: Set<AnyCancellable> = []
+
     @IBOutlet private weak var gravatarImageView: CircularImageView!
     @IBOutlet private weak var userNameLabel: UILabel!
     @IBOutlet private weak var singedInAsLabel: UILabel!
     @IBOutlet private weak var wrongAccountLabel: UILabel!
     @IBOutlet private weak var logOutButton: UIButton!
     @IBOutlet private weak var primaryButton: NUXButton!
+    @IBOutlet private weak var secondaryButton: NUXButton!
+    @IBOutlet private weak var activityIndicator: UIActivityIndicatorView!
+
     @IBOutlet private weak var imageView: UIImageView!
     @IBOutlet private weak var errorMessage: UILabel!
     @IBOutlet private weak var extraInfoButton: UIButton!
@@ -58,8 +64,12 @@ final class ULAccountMismatchViewController: UIViewController {
         configureExtraInfoButton()
 
         configurePrimaryButton()
+        configureSecondaryButon()
+        configureActivityIndicator()
 
         setUnifiedMargins(forWidth: view.frame.width)
+
+        viewModel.viewDidLoad(self)
     }
 
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
@@ -142,13 +152,46 @@ private extension ULAccountMismatchViewController {
 
     func configurePrimaryButton() {
         primaryButton.isPrimary = true
-        primaryButton.isHidden = viewModel.isPrimaryButtonHidden
         primaryButton.setTitle(viewModel.primaryButtonTitle, for: .normal)
         primaryButton.on(.touchUpInside) { [weak self] _ in
             self?.didTapPrimaryButton()
         }
+
+        viewModel.isPrimaryButtonLoading
+            .sink { [weak self] isLoading in
+                self?.primaryButton.showActivityIndicator(isLoading)
+            }
+            .store(in: &subscriptions)
+
+        viewModel.isPrimaryButtonHidden
+            .sink { [weak self] isHidden in
+                self?.primaryButton.isHidden = isHidden
+            }
+            .store(in: &subscriptions)
+    }
+
+    func configureSecondaryButon() {
+        secondaryButton.isPrimary = false
+        secondaryButton.isHidden = viewModel.isSecondaryButtonHidden
+        secondaryButton.setTitle(viewModel.secondaryButtonTitle, for: .normal)
+        secondaryButton.on(.touchUpInside) { [weak self] _ in
+            self?.didTapSecondaryButton()
+        }
     }
 
+    func configureActivityIndicator() {
+        activityIndicator.hidesWhenStopped = true
+
+        viewModel.isShowingActivityIndicator
+            .sink { [weak self] showing in
+                if showing {
+                    self?.activityIndicator.startAnimating()
+                } else {
+                    self?.activityIndicator.stopAnimating()
+                }
+            }
+            .store(in: &subscriptions)
+    }
 
     /// This logic is lifted from WPAuthenticator's LoginPrologueViewController
     /// This View Controller will be provided to WPAuthenticator. WPAuthenticator
@@ -192,6 +235,10 @@ private extension ULAccountMismatchViewController {
         viewModel.didTapPrimaryButton(in: self)
     }
 
+    func didTapSecondaryButton() {
+        viewModel.didTapSecondaryButton(in: self)
+    }
+
     func didTapLogOutButton() {
         viewModel.didTapLogOutButton(in: self)
     }
@@ -231,6 +278,14 @@ extension ULAccountMismatchViewController {
         return primaryButton
     }
 
+    func getSecondaryActionButton() -> UIButton {
+        return secondaryButton
+    }
+
+    func getActivityIndicator() -> UIActivityIndicatorView {
+        return activityIndicator
+    }
+
     func getUserNameLabel() -> UILabel {
         return userNameLabel
     }

WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewController.xib

@@ -1,16 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="ULAccountMismatchViewController" customModule="WooCommerce" customModuleProvider="target">
             <connections>
+                <outlet property="activityIndicator" destination="GcM-pl-Wag" id="SyY-Mz-h3S"/>
                 <outlet property="buttonViewLeadingConstraint" destination="r9Z-y5-j3W" id="bWb-vV-0U2"/>
                 <outlet property="buttonViewTrailingConstraint" destination="3Fe-tr-bmb" id="DjF-95-KFx"/>
                 <outlet property="errorMessage" destination="a2d-le-aKc" id="YgT-Ex-Gwh"/>
@@ -19,6 +20,7 @@
                 <outlet property="imageView" destination="Osv-Wo-lxW" id="yIN-vL-DOA"/>
                 <outlet property="logOutButton" destination="s2i-wr-qJf" id="yxc-ia-1rX"/>
                 <outlet property="primaryButton" destination="ZHa-is-GJK" id="wzn-TJ-1Sm"/>
+                <outlet property="secondaryButton" destination="0ZR-ma-6pq" id="W3d-H4-h81"/>
                 <outlet property="singedInAsLabel" destination="emS-Tp-OXA" id="ajb-UO-YDy"/>
                 <outlet property="stackViewLeadingConstraint" destination="jMe-jj-6Bt" id="JnU-my-QgI"/>
                 <outlet property="stackViewTrailingConstraint" destination="Z7E-hC-lbB" id="RHp-Ac-R58"/>
@@ -33,23 +35,34 @@
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="10Z-y1-ZQ6" userLabel="Action Background View">
-                    <rect key="frame" x="0.0" y="772" width="414" height="90"/>
+                    <rect key="frame" x="0.0" y="662" width="414" height="200"/>
                     <subviews>
                         <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="mhI-fa-Yzw">
-                            <rect key="frame" x="20" y="20" width="374" height="50"/>
+                            <rect key="frame" x="20" y="20" width="374" height="160"/>
                             <subviews>
+                                <activityIndicatorView opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" style="medium" id="GcM-pl-Wag">
+                                    <rect key="frame" x="0.0" y="0.0" width="374" height="20"/>
+                                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                </activityIndicatorView>
                                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZHa-is-GJK" userLabel="secondary action button" customClass="NUXButton" customModule="WordPressAuthenticator">
-                                    <rect key="frame" x="0.0" y="0.0" width="374" height="50"/>
+                                    <rect key="frame" x="0.0" y="40" width="374" height="50"/>
                                     <constraints>
                                         <constraint firstAttribute="height" constant="50" id="Gcd-Af-CS9"/>
                                     </constraints>
                                     <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="17"/>
                                     <state key="normal" title="Primary Action Button">
                                         <color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                     </state>
-                                    <userDefinedRuntimeAttributes>
-                                        <userDefinedRuntimeAttribute type="boolean" keyPath="isPrimary" value="YES"/>
-                                    </userDefinedRuntimeAttributes>
+                                </button>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0ZR-ma-6pq" userLabel="secondary action button" customClass="NUXButton" customModule="WordPressAuthenticator">
+                                    <rect key="frame" x="0.0" y="110" width="374" height="50"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="50" id="BTA-bw-h4s"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="17"/>
+                                    <state key="normal" title="Primary Action Button">
+                                        <color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    </state>
                                 </button>
                             </subviews>
                         </stackView>
@@ -62,7 +75,7 @@
                     </constraints>
                 </view>
                 <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="32" translatesAutoresizingMaskIntoConstraints="NO" id="jIt-xb-rrN">
-                    <rect key="frame" x="34" y="190" width="346" height="486"/>
+                    <rect key="frame" x="34" y="176" width="346" height="486"/>
                     <subviews>
                         <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Np4-PU-IRZ" customClass="CircularImageView" customModule="WooCommerce" customModuleProvider="target">
                             <rect key="frame" x="143" y="0.0" width="60" height="60"/>
@@ -131,12 +144,12 @@
             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
             <constraints>
                 <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="10Z-y1-ZQ6" secondAttribute="trailing" id="3Fe-tr-bmb"/>
-                <constraint firstItem="jIt-xb-rrN" firstAttribute="top" relation="greaterThanOrEqual" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="8" id="4vu-ll-3S2"/>
                 <constraint firstAttribute="trailing" secondItem="jIt-xb-rrN" secondAttribute="trailing" constant="34" id="Z7E-hC-lbB"/>
-                <constraint firstItem="jIt-xb-rrN" firstAttribute="centerY" secondItem="fnl-2z-Ty3" secondAttribute="centerY" constant="-20" id="ZZg-jd-e4d"/>
                 <constraint firstItem="jIt-xb-rrN" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="34" id="jMe-jj-6Bt"/>
                 <constraint firstItem="10Z-y1-ZQ6" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="r9Z-y5-j3W"/>
                 <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="10Z-y1-ZQ6" secondAttribute="bottom" id="rPP-rT-zVR"/>
+                <constraint firstItem="10Z-y1-ZQ6" firstAttribute="top" relation="greaterThanOrEqual" secondItem="jIt-xb-rrN" secondAttribute="bottom" id="yet-32-SBz"/>
+                <constraint firstItem="jIt-xb-rrN" firstAttribute="centerY" secondItem="fnl-2z-Ty3" secondAttribute="centerY" priority="250" constant="-20" id="z5R-69-jBg"/>
             </constraints>
             <point key="canvasLocation" x="137.68115942028987" y="86.383928571428569"/>
         </view>