Merge pull request #131 from woocommerce/feature/96-authenticator-appearance

Configure NUXButton using UIAppearance in AppDelegate

Author: mindgraffiti

Podfile

@@ -18,7 +18,7 @@ target 'WooCommerce' do
   #
   pod 'Automattic-Tracks-iOS', :git => 'https://github.com/Automattic/Automattic-Tracks-iOS.git', :tag => '0.2.3'
   pod 'Gridicons', '0.15'
-  pod 'WordPressAuthenticator', :git => 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', :commit => '58ed623'
+  pod 'WordPressAuthenticator', '~> 1.0'
 
 
   # External Libraries

Podfile.lock

@@ -13,9 +13,9 @@ PODS:
     - CocoaLumberjack/Default
   - CocoaLumberjack/Swift (3.4.2):
     - CocoaLumberjack/Default
-  - Crashlytics (3.10.3):
-    - Fabric (~> 1.7.8)
-  - Fabric (1.7.8)
+  - Crashlytics (3.10.4):
+    - Fabric (~> 1.7.9)
+  - Fabric (1.7.9)
   - FormatterKit/Resources (1.8.2)
   - FormatterKit/TimeIntervalFormatter (1.8.2):
     - FormatterKit/Resources
@@ -38,7 +38,7 @@ PODS:
   - Reachability (3.2)
   - SVProgressHUD (2.2.5)
   - UIDeviceIdentifier (0.5.0)
-  - WordPressAuthenticator (1.0.0):
+  - WordPressAuthenticator (1.0.1):
     - 1PasswordExtension (= 1.8.5)
     - Alamofire (= 4.7.2)
     - CocoaLumberjack (= 3.4.2)
@@ -62,7 +62,7 @@ PODS:
   - WordPressShared (1.0.8):
     - CocoaLumberjack (~> 3.4)
     - FormatterKit/TimeIntervalFormatter (= 1.8.2)
-  - WordPressUI (1.0.5)
+  - WordPressUI (1.0.6)
   - wpxmlrpc (0.8.3)
 
 DEPENDENCIES:
@@ -72,7 +72,7 @@ DEPENDENCIES:
   - Crashlytics (~> 3.10)
   - Gridicons (= 0.15)
   - KeychainAccess (~> 3.1)
-  - WordPressAuthenticator (from `https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git`, commit `58ed623`)
+  - WordPressAuthenticator (~> 1.0)
 
 SPEC REPOS:
   https://github.com/cocoapods/specs.git:
@@ -92,6 +92,7 @@ SPEC REPOS:
     - Reachability
     - SVProgressHUD
     - UIDeviceIdentifier
+    - WordPressAuthenticator
     - WordPressKit
     - WordPressShared
     - WordPressUI
@@ -101,25 +102,19 @@ EXTERNAL SOURCES:
   Automattic-Tracks-iOS:
     :git: https://github.com/Automattic/Automattic-Tracks-iOS.git
     :tag: 0.2.3
-  WordPressAuthenticator:
-    :commit: 58ed623
-    :git: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git
 
 CHECKOUT OPTIONS:
   Automattic-Tracks-iOS:
     :git: https://github.com/Automattic/Automattic-Tracks-iOS.git
     :tag: 0.2.3
-  WordPressAuthenticator:
-    :commit: 58ed623
-    :git: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git
 
 SPEC CHECKSUMS:
   1PasswordExtension: 0e95bdea64ec8ff2f4f693be5467a09fac42a83d
   Alamofire: e4fa87002c137ba2d8d634d2c51fabcda0d5c223
   Automattic-Tracks-iOS: d8c6c6c1351b1905a73e45f431b15598d71963b5
   CocoaLumberjack: db7cc9e464771f12054c22ff6947c5a58d43a0fd
-  Crashlytics: 2aea305161a2122492698c75af27f2b98aa49a25
-  Fabric: fba4684a95df789565b0b27fc5b6e68f1755af32
+  Crashlytics: 915a7787b84f635fb2a81f92a90e265c2c413f76
+  Fabric: a2917d3895e4c1569b9c3170de7320ea1b1e6661
   FormatterKit: 4b8f29acc9b872d5d12a63efb560661e8f2e1b98
   GoogleSignInRepacked: d357702618c555f38923576924661325eb1ef22b
   GoogleToolboxForMac: 91c824d21e85b31c2aae9bb011c5027c9b4e738f
@@ -131,12 +126,12 @@ SPEC CHECKSUMS:
   Reachability: 33e18b67625424e47b6cde6d202dce689ad7af96
   SVProgressHUD: 1428aafac632c1f86f62aa4243ec12008d7a51d6
   UIDeviceIdentifier: a959a6d4f51036b4180dd31fb26483a820f1cc46
-  WordPressAuthenticator: 4c802aa18781858253daf984f873e3efe0dac7ef
+  WordPressAuthenticator: 60c07bcfb6f1578afaf17621ae4393d688c2ede9
   WordPressKit: a24baaa783c3a221f2d9a51c19318cbb27333373
   WordPressShared: 063e1e8b1a7aaf635abf17f091a2d235a068abdc
-  WordPressUI: ab90086350f1e26bf39e578e443d0abf0347e542
+  WordPressUI: af141587ec444f9af753a00605bd0d3f14d8d8a3
   wpxmlrpc: bfc572f62ce7ee897f6f38b098d2ba08732ecef4
 
-PODFILE CHECKSUM: b0058ebc467be802babc234b85e02282da5d9d42
+PODFILE CHECKSUM: 60104ed4eaf82cee487f83818dceb80f392ce97f
 
 COCOAPODS: 1.5.3

WooCommerce/Classes/AppDelegate.swift

@@ -116,19 +116,18 @@ private extension AppDelegate {
         UINavigationBar.appearance().isTranslucent = false
         UINavigationBar.appearance().tintColor = .white
         UIApplication.shared.statusBarStyle = .lightContent
+
+        UIButton.appearance().setTitleColor(StyleManager.wooCommerceBrandColor, for: .normal)
     }
 
     /// Sets up FancyButton's UIAppearance.
     ///
     func setupFancyButtonAppearance() {
         let appearance = FancyButton.appearance()
-        appearance.titleFont = UIFont.font(forStyle: .headline, weight: .bold)
         appearance.primaryNormalBackgroundColor = StyleManager.buttonPrimaryColor
         appearance.primaryNormalBorderColor = StyleManager.buttonPrimaryHighlightedColor
         appearance.primaryHighlightBackgroundColor = StyleManager.buttonPrimaryHighlightedColor
         appearance.primaryHighlightBorderColor = StyleManager.buttonPrimaryHighlightedColor
-        appearance.disabledBorderColor = StyleManager.buttonPrimaryHighlightedColor
-        appearance.disabledBackgroundColor = StyleManager.buttonPrimaryHighlightedColor
     }
 
     /// Sets up the WordPress Authenticator.

WooCommerce/Classes/Authentication/AuthenticationManager.swift

@@ -19,10 +19,23 @@ class AuthenticationManager {
                                                                 googleLoginClientId: ApiCredentials.googleClientId,
                                                                 googleLoginServerClientId: ApiCredentials.googleServerId,
                                                                 googleLoginScheme: ApiCredentials.googleAuthScheme,
-                                                                userAgent: UserAgent.defaultUserAgent,
-                                                                supportNotificationIndicatorFeatureFlag: false)
-
-        WordPressAuthenticator.initialize(configuration: configuration)
+                                                                userAgent: UserAgent.defaultUserAgent)
+
+        let style = WordPressAuthenticatorStyle(primaryNormalBackgroundColor: StyleManager.buttonPrimaryColor,
+                                                primaryNormalBorderColor: StyleManager.buttonPrimaryHighlightedColor,
+                                                primaryHighlightBackgroundColor: StyleManager.buttonPrimaryHighlightedColor,
+                                                primaryHighlightBorderColor: StyleManager.buttonPrimaryHighlightedColor,
+                                                secondaryNormalBackgroundColor: StyleManager.buttonSecondaryColor,
+                                                secondaryNormalBorderColor: StyleManager.buttonSecondaryHighlightedColor,
+                                                secondaryHighlightBackgroundColor: StyleManager.buttonSecondaryHighlightedColor,
+                                                secondaryHighlightBorderColor: StyleManager.buttonSecondaryHighlightedColor,
+                                                disabledBackgroundColor: StyleManager.buttonDisabledColor,
+                                                disabledBorderColor: StyleManager.buttonDisabledHighlightedColor,
+                                                primaryTitleColor: StyleManager.buttonPrimaryTitleColor,
+                                                secondaryTitleColor: StyleManager.buttonSecondaryTitleColor,
+                                                disabledTitleColor: StyleManager.buttonDisabledTitleColor)
+
+        WordPressAuthenticator.initialize(configuration: configuration, style: style)
         WordPressAuthenticator.shared.delegate = self
     }
 
@@ -58,6 +71,14 @@ class AuthenticationManager {
 // MARK: - WordPressAuthenticator Delegate
 //
 extension AuthenticationManager: WordPressAuthenticatorDelegate {
+    func presentSupportRequest(from sourceViewController: UIViewController, sourceTag: WordPressSupportSourceTag) {
+        // TODO: wire Zendesk
+    }
+
+    func presentSupport(from sourceViewController: UIViewController, sourceTag: WordPressSupportSourceTag) {
+        // TODO: wire Zendesk
+    }
+
 
     /// Indicates if the active Authenticator can be dismissed or not.
     ///

WooCommerce/Classes/Authentication/Prologue/LoginPrologueViewController.swift

@@ -82,6 +82,11 @@ private extension LoginPrologueViewController {
     func setupDisclaimerLabel() {
         disclaimerTextView.attributedText = disclaimerAttributedText
         disclaimerTextView.textContainerInset = .zero
+        disclaimerTextView.linkTextAttributes = [
+            NSAttributedStringKey.foregroundColor.rawValue: StyleManager.wooCommerceBrandColor,
+            NSAttributedStringKey.underlineColor.rawValue: StyleManager.wooCommerceBrandColor,
+            NSAttributedStringKey.underlineStyle.rawValue: NSUnderlineStyle.styleSingle.rawValue
+        ]
     }
 
     func setupLoginButton() {
@@ -118,8 +123,7 @@ extension LoginPrologueViewController {
     /// Proceeds with the Login Flow.
     ///
     @IBAction func loginWasPressed() {
-        let loginViewController = WordPressAuthenticator.signinForWordPress()
-        loginViewController.restrictToWPCom = true
+        let loginViewController = WordPressAuthenticator.signinForWPCom()
         loginViewController.offerSignupOption = false
 
         navigationController?.pushViewController(loginViewController, animated: true)
@@ -136,14 +140,16 @@ private extension LoginPrologueViewController {
     ///
     var disclaimerAttributedText: NSAttributedString {
         let disclaimerText = NSLocalizedString("This app requires Jetpack to be able to connect to your WooCommerce Store.\nRead the ", comment: "Login Disclaimer Text and Jetpack config instructions")
-        let disclaimerAttributes: [NSAttributedStringKey: Any] =  [
+        let disclaimerAttributes: [NSAttributedStringKey: Any] = [
             .font: UIFont.font(forStyle: .caption1, weight: .thin),
             .foregroundColor: UIColor.black
         ]
 
         let readText = NSLocalizedString("configuration instructions", comment: "Login Disclaimer Linked Text")
-        var readAttributes = disclaimerAttributes
-        readAttributes[.link] = URL(string: WooConstants.jetpackSetupUrl)
+        let readAttributes: [NSAttributedStringKey: Any] = [
+            .link: URL(string: WooConstants.jetpackSetupUrl) as Any,
+            .font: UIFont.font(forStyle: .caption1, weight: .thin)
+        ]
         let readAttrText = NSMutableAttributedString(string: readText, attributes: readAttributes)
 
         let endSentenceText = "."

WooCommerce/Classes/Authentication/Prologue/LoginPrologueViewController.xib

@@ -38,7 +38,7 @@
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="o29-Vv-KDs" userLabel="Container View">
                     <rect key="frame" x="0.0" y="601.66666666666663" width="375" height="176.33333333333337"/>
                     <subviews>
-                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="6pL-xH-OzE" customClass="FancyButton" customModule="WordPressUI">
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="6pL-xH-OzE" customClass="NUXButton" customModule="WordPressAuthenticator">
                             <rect key="frame" x="20" y="106.33333333333337" width="335" height="50"/>
                             <color key="backgroundColor" red="0.58823529409999997" green="0.34509803919999998" blue="0.54117647059999996" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                             <constraints>

WooCommerce/Classes/Styles/Style.swift

@@ -17,8 +17,16 @@ protocol Style {
     var sectionTitleColor: UIColor { get }
     var buttonPrimaryColor: UIColor { get }
     var buttonPrimaryHighlightedColor: UIColor { get }
+    var buttonPrimaryTitleColor: UIColor { get }
+    var buttonSecondaryColor: UIColor { get }
+    var buttonSecondaryHighlightedColor: UIColor { get }
+    var buttonSecondaryTitleColor: UIColor { get }
+    var buttonDisabledColor: UIColor { get }
+    var buttonDisabledHighlightedColor: UIColor { get }
+    var buttonDisabledTitleColor: UIColor { get }
     var cellSeparatorColor: UIColor { get }
     var wooGreyMid: UIColor { get }
+    var alternativeLoginsTitleFont: UIFont { get }
 }
 
 // MARK: - WooCommerce's Default Style
@@ -37,8 +45,16 @@ class DefaultStyle: Style {
     let sectionTitleColor = UIColor.darkGray
     let buttonPrimaryColor = UIColor(red: 0x96/255.0, green: 0x58/255.0, blue: 0x8A/255.0, alpha: 0xFF/255.0)
     let buttonPrimaryHighlightedColor = UIColor(red: 0x6E/255.0, green: 0x29/255.0, blue: 0x67/255.0, alpha: 0xFF/255.0)
+    let buttonPrimaryTitleColor = UIColor.white
+    let buttonSecondaryColor = UIColor.white
+    let buttonSecondaryHighlightedColor = UIColor.gray
+    let buttonSecondaryTitleColor = UIColor.gray
+    let buttonDisabledColor = UIColor.white
+    let buttonDisabledHighlightedColor = UIColor(red: 233.0/255.0, green: 239.0/255.0, blue: 234.0/255.0, alpha: 1.0) // equivalent to WPStyle.greyLighten30()
+    let buttonDisabledTitleColor = UIColor(red: 233.0/255.0, green: 239.0/255.0, blue: 234.0/255.0, alpha: 1.0) // equivalent to WPStyle.greyLighten30()
     let cellSeparatorColor = UIColor.lightGray
     let wooGreyMid = UIColor(red: 150.0/255.0, green: 150.0/255.0, blue: 150.0/255.0, alpha: 1.0)
+    let alternativeLoginsTitleFont = UIFont.font(forStyle: .subheadline, weight: .semibold)
 }
 
 
@@ -111,11 +127,43 @@ class StyleManager {
         return active.buttonPrimaryHighlightedColor
     }
 
+    static var buttonPrimaryTitleColor: UIColor {
+        return active.buttonPrimaryTitleColor
+    }
+
+    static var buttonSecondaryColor: UIColor {
+        return active.buttonSecondaryColor
+    }
+
+    static var buttonSecondaryHighlightedColor: UIColor {
+        return active.buttonSecondaryHighlightedColor
+    }
+
+    static var buttonSecondaryTitleColor: UIColor {
+        return active.buttonSecondaryTitleColor
+    }
+
+    static var buttonDisabledColor: UIColor {
+        return active.buttonDisabledColor
+    }
+
+    static var buttonDisabledHighlightedColor: UIColor {
+        return active.buttonDisabledHighlightedColor
+    }
+
+    static var buttonDisabledTitleColor: UIColor {
+        return active.buttonDisabledTitleColor
+    }
+
     static var cellSeparatorColor: UIColor {
         return active.cellSeparatorColor
     }
 
     static var wooGreyMid: UIColor {
         return active.wooGreyMid
     }
+
+    static var alternativeLoginsTitleFont: UIFont {
+        return active.alternativeLoginsTitleFont
+    }
 }