Implements Login Prologue

WooCommerce/Classes/AppDelegate.swift

@@ -1,10 +1,13 @@
 import UIKit
 import CoreData
+
 import CocoaLumberjack
+import WordPressUI
 import WordPressKit
 import WordPressAuthenticator
 
 
+
 // MARK: - Woo's App Delegate!
 //
 @UIApplicationMain
@@ -30,7 +33,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
         // Setup the Interface!
         setupMainWindow()
-        setupInterfaceAppearance()
+        setupComponentsAppearance()
 
         // Setup Components
         setupAuthenticationManager()
@@ -88,16 +91,36 @@ private extension AppDelegate {
         window?.makeKeyAndVisible()
     }
 
+    /// Sets up all of the component(s) Appearance.
+    ///
+    func setupComponentsAppearance() {
+        setupWooAppearance()
+        setupFancyButtonAppearance()
+    }
+
     /// Sets up WooCommerce's UIAppearance.
     ///
-    func setupInterfaceAppearance() {
+    func setupWooAppearance() {
         UINavigationBar.appearance().barTintColor = StyleManager.wooCommerceBrandColor
         UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.white]
         UINavigationBar.appearance().isTranslucent = false
         UINavigationBar.appearance().tintColor = .white
         UIApplication.shared.statusBarStyle = .lightContent
     }
 
+    /// 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.
     ///
     func setupAuthenticationManager() {
@@ -135,7 +158,7 @@ private extension AppDelegate {
             fatalError()
         }
 
-        authenticationManager.showLogin(from: rootViewController)
+        authenticationManager.displayAuthentication(from: rootViewController)
     }
 
     /// Indicates if there's a default WordPress.com account.

WooCommerce/Classes/Authentication/AuthenticationManager.swift

@@ -1,5 +1,6 @@
 import Foundation
 import WordPressAuthenticator
+import WordPressUI
 
 
 
@@ -13,7 +14,7 @@ class AuthenticationManager {
         let configuration = WordPressAuthenticatorConfiguration(wpcomClientId: ApiCredentials.dotcomAppId,
                                                                 wpcomSecret: ApiCredentials.dotcomSecret,
                                                                 wpcomScheme: ApiCredentials.dotcomAuthScheme,
-                                                                wpcomTermsOfServiceURL: Constants.termsOfServiceURL,
+                                                                wpcomTermsOfServiceURL: WooConstants.termsOfServiceUrl,
                                                                 googleLoginClientId: ApiCredentials.googleClientId,
                                                                 googleLoginServerClientId: ApiCredentials.googleServerId,
                                                                 googleLoginScheme: ApiCredentials.googleAuthScheme,
@@ -26,12 +27,10 @@ class AuthenticationManager {
 
     /// Displays the Login Flow using the specified UIViewController as presenter.
     ///
-    func showLogin(from presenter: UIViewController) {
-        let loginViewController = WordPressAuthenticator.signinForWordPress()
-        loginViewController.restrictToWPCom = true
-        loginViewController.offerSignupOption = false
+    func displayAuthentication(from presenter: UIViewController) {
+        let prologueViewController = LoginPrologueViewController()
+        let navigationController = LoginNavigationController(rootViewController: prologueViewController)
 
-        let navigationController = LoginNavigationController(rootViewController: loginViewController)
         presenter.present(navigationController, animated: true, completion: nil)
     }
 
@@ -169,16 +168,3 @@ extension AuthenticationManager: WordPressAuthenticatorDelegate {
         // TODO: Integrate Tracks
     }
 }
-
-
-/// Nested Types
-///
-extension AuthenticationManager {
-
-    struct Constants {
-
-        /// Terms of Service Website. Displayed by the Authenticator (when / if needed).
-        ///
-        static let termsOfServiceURL = "https://wordpress.com/tos/"
-    }
-}

WooCommerce/Classes/Authentication/Prologue/LoginPrologueViewController.swift

@@ -0,0 +1,154 @@
+import Foundation
+import UIKit
+import SafariServices
+import WordPressAuthenticator
+
+
+/// Displays the WooCommerce Prologue UI.
+///
+class LoginPrologueViewController: UIViewController {
+
+    /// White-Background View, to be placed surrounding the bottom area.
+    ///
+    @IBOutlet var backgroundView: UIView!
+
+    /// Label to be displayed at the top of the Prologue.
+    ///
+    @IBOutlet var upperLabel: UILabel!
+
+    /// Disclaimer Label
+    ///
+    @IBOutlet var disclaimerTextView: UITextView!
+
+    /// Jetpack Logo ImageVIew
+    ///
+    @IBOutlet var jetpackImageView: UIImageView!
+
+    /// Default Action Button.
+    ///
+    @IBOutlet var loginButton: UIButton!
+
+
+    // MARK: - Overridden Properties
+
+    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
+        return .portrait
+    }
+
+
+    // MARK: - Overridden Methods
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        setupMainView()
+        setupBackgroundView()
+        setupJetpackImage()
+        setupDisclaimerLabel()
+        setupUpperLabel()
+        setupLoginButton()
+    }
+
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        navigationController?.setNavigationBarHidden(true, animated: animated)
+    }
+}
+
+
+// MARK: - Initialization Methods
+//
+private extension LoginPrologueViewController {
+
+    func setupMainView() {
+        view.backgroundColor = StyleManager.wooCommerceBrandColor
+    }
+
+    func setupBackgroundView() {
+        backgroundView.layer.masksToBounds = false
+        backgroundView.layer.shadowOpacity = 0.2
+    }
+
+    func setupUpperLabel() {
+        upperLabel.text = NSLocalizedString("Check your WooCommerce store on the go, fulfill your orders and get notifications of new sales.", comment: "Login Prologue Legend")
+        upperLabel.font = UIFont.font(forStyle: .subheadline, weight: .bold)
+        upperLabel.textColor = .white
+    }
+
+    func setupJetpackImage() {
+        jetpackImageView.image = UIImage.jetpackLogoImage.imageWithTintColor(.jetpackGreen)
+    }
+
+    func setupDisclaimerLabel() {
+        disclaimerTextView.attributedText = disclaimerAttributedText
+        disclaimerTextView.textContainerInset = .zero
+    }
+
+    func setupLoginButton() {
+        let title = NSLocalizedString("Log in with Jetpack", comment: "Authentication Login Button")
+        loginButton.setTitle(title, for: .normal)
+        loginButton.backgroundColor = .clear
+    }
+}
+
+
+// MARK: - UITextViewDeletgate Conformance
+//
+extension LoginPrologueViewController: UITextViewDelegate {
+
+    func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
+        displaySafariViewController(at: URL)
+        return false
+    }
+}
+
+
+// MARK: - Action Handlers
+//
+extension LoginPrologueViewController {
+
+    /// Opens SafariViewController at the specified URL.
+    ///
+    func displaySafariViewController(at url: URL) {
+        let safariViewController = SafariViewController(url: url)
+        safariViewController.modalPresentationStyle = .pageSheet
+        present(safariViewController, animated: true, completion: nil)
+    }
+
+    /// Proceeds with the Login Flow.
+    ///
+    @IBAction func loginWasPressed() {
+        let loginViewController = WordPressAuthenticator.signinForWordPress()
+        loginViewController.restrictToWPCom = true
+        loginViewController.offerSignupOption = false
+
+        navigationController?.pushViewController(loginViewController, animated: true)
+        navigationController?.setNavigationBarHidden(false, animated: true)
+    }
+}
+
+
+// MARK: - Private Methods
+//
+private extension LoginPrologueViewController {
+
+    /// Returns the Disclaimer Attributed Text (which contains a link to the Jetpack Setup URL).
+    ///
+    var disclaimerAttributedText: NSAttributedString {
+        let disclaimerText = NSLocalizedString("This app requires Jetpack to be able to connect to your WooCommerce Store.\nFor configuration instructions, ", comment: "Login Disclaimer Text")
+        let disclaimerAttributes: [NSAttributedStringKey: Any] =  [
+            .font: UIFont.font(forStyle: .caption1, weight: .thin),
+            .foregroundColor: UIColor.black
+        ]
+
+        let readText = NSLocalizedString("read here.", comment: "Login Disclaimer Linked Text")
+        var readAttributes = disclaimerAttributes
+        readAttributes[.link] = URL(string: WooConstants.jetpackSetupUrl)
+
+        let readAttrText = NSMutableAttributedString(string: readText, attributes: readAttributes)
+        let disclaimerAttrText = NSMutableAttributedString(string: disclaimerText, attributes: disclaimerAttributes)
+        disclaimerAttrText.append(readAttrText)
+
+        return disclaimerAttrText
+    }
+}