[Woo Brand Update] Add more customization options to the prologue (#867)

Author: hichamboushaba

CHANGELOG.md

@@ -18,7 +18,8 @@ _None._
 
 ### New Features
 
-_None._
+- Allow setting both a color and an image as prologue background simultaneously [#867]
+- Add support for customizing the tertiary button style on the prologue screen [#867]
 
 ### Bug Fixes
 

WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift

@@ -107,6 +107,12 @@ public struct WordPressAuthenticatorStyle {
     ///
     public let prologueSecondaryButtonStyle: NUXButtonStyle?
 
+    /// Style: tertiary button on the prologue view
+    /// When `nil` it will use the default link style
+    /// Defaults to `nil`
+    ///
+    public let prologueTertiaryButtonStyle: NUXButtonStyle?
+
     /// Style: prologue top container child view controller
     /// When nil, `LoginProloguePageViewController` is displayed in the top container
     ///
@@ -163,6 +169,7 @@ public struct WordPressAuthenticatorStyle {
                 prologueButtonsBlurEffect: UIBlurEffect? = nil,
                 prologuePrimaryButtonStyle: NUXButtonStyle? = nil,
                 prologueSecondaryButtonStyle: NUXButtonStyle? = nil,
+                prologueTertiaryButtonStyle: NUXButtonStyle? = nil,
                 prologueTopContainerChildViewController: @autoclosure @escaping () -> UIViewController? = nil,
                 statusBarStyle: UIStatusBarStyle = .lightContent,
                 orDividerSeparatorColor: UIColor = .tertiaryLabel,
@@ -200,6 +207,7 @@ public struct WordPressAuthenticatorStyle {
         self.prologueButtonsBlurEffect = prologueButtonsBlurEffect
         self.prologuePrimaryButtonStyle = prologuePrimaryButtonStyle
         self.prologueSecondaryButtonStyle = prologueSecondaryButtonStyle
+        self.prologueTertiaryButtonStyle = prologueTertiaryButtonStyle
         self.prologueTopContainerChildViewController = prologueTopContainerChildViewController
         self.statusBarStyle = statusBarStyle
         self.orDividerSeparatorColor = orDividerSeparatorColor
@@ -250,6 +258,10 @@ public struct WordPressAuthenticatorUnifiedStyle {
     /// Style: optional auth Prologue view background image
     public let prologueBackgroundImage: UIImage?
 
+    /// Style: optional resizing policy for the prologue background image
+    ///
+    public let prologueBackgroundScaleMode: UIView.ContentMode
+
     /// Style: optional blur effect for the buttons view
     public let prologueButtonsBlurEffect: UIBlurEffect?
 
@@ -279,6 +291,7 @@ public struct WordPressAuthenticatorUnifiedStyle {
                 prologueButtonsBackgroundColor: UIColor = .clear,
                 prologueViewBackgroundColor: UIColor? = nil,
                 prologueBackgroundImage: UIImage? = nil,
+                prologueBackgroundScaleMode: UIView.ContentMode = .scaleToFill,
                 prologueButtonsBlurEffect: UIBlurEffect? = nil,
                 statusBarStyle: UIStatusBarStyle = .default,
                 navBarBackgroundColor: UIColor,
@@ -295,6 +308,7 @@ public struct WordPressAuthenticatorUnifiedStyle {
         self.prologueButtonsBackgroundColor = prologueButtonsBackgroundColor
         self.prologueViewBackgroundColor = prologueViewBackgroundColor ?? viewControllerBackgroundColor
         self.prologueBackgroundImage = prologueBackgroundImage
+        self.prologueBackgroundScaleMode = prologueBackgroundScaleMode
         self.prologueButtonsBlurEffect = prologueButtonsBlurEffect
         self.statusBarStyle = statusBarStyle
         self.navBarBackgroundColor = navBarBackgroundColor

WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift

@@ -150,13 +150,18 @@ private extension NUXStackedButtonsViewController {
         buttons = []
         topStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() })
         bottomStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() })
+        topStackView?.isHidden = true
+        bottomStackView?.isHidden = true
+
         for config in buttonConfigs {
             let button = NUXButton()
             switch config.stackView {
             case .top:
                 topStackView?.addArrangedSubview(button)
+                topStackView?.isHidden = false
             case .bottom:
                 bottomStackView?.addArrangedSubview(button)
+                bottomStackView?.isHidden = false
             }
             button.configure(withConfig: config.config, and: config.style)
             buttons.append(button)

WordPressAuthenticator/Signin/LoginPrologueViewController.swift

@@ -13,11 +13,6 @@ class LoginPrologueViewController: LoginViewController {
     var showCancel = false
 
     @IBOutlet private weak var buttonContainerView: UIView!
-    /// Blur effect on button container view
-    ///
-    private var blurEffect: UIBlurEffect.Style {
-        return .systemChromeMaterial
-    }
 
     /// Constraints on the button view container.
     /// Used to adjust the button width in unified views.
@@ -66,12 +61,10 @@ class LoginPrologueViewController: LoginViewController {
             topContainerView.pinSubviewToAllEdges(topContainerChildViewController.view)
         }
 
+        setupViewBackground()
         createButtonViewController()
 
         defaultButtonViewMargin = buttonViewLeadingConstraint?.constant ?? 0
-        if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage {
-            view.layer.contents = backgroundImage.cgImage
-        }
     }
 
     override func styleBackground() {
@@ -266,6 +259,7 @@ class LoginPrologueViewController: LoginViewController {
 
         let primaryButtonStyle = WordPressAuthenticator.shared.style.prologuePrimaryButtonStyle
         let secondaryButtonStyle = WordPressAuthenticator.shared.style.prologueSecondaryButtonStyle
+        let tertiaryButtonStyle = WordPressAuthenticator.shared.style.prologueTertiaryButtonStyle ?? NUXButtonStyle.linkButtonStyle
 
         setButtonViewMargins(forWidth: view.frame.width)
         let displayStrings = WordPressAuthenticator.shared.displayStrings
@@ -324,7 +318,7 @@ class LoginPrologueViewController: LoginViewController {
                                  isPrimary: false,
                                  configureBodyFontForTitle: true,
                                  accessibilityIdentifier: "Prologue Site Creation Guide button",
-                                 style: NUXButtonStyle.linkButtonStyle,
+                                 style: tertiaryButtonStyle,
                                  onTap: siteCreationGuideCallback())
         }()
 
@@ -386,26 +380,27 @@ class LoginPrologueViewController: LoginViewController {
         }
     }
 
+    private func setupViewBackground() {
+        if let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor {
+            view.backgroundColor = prologueViewBackgroundColor
+        }
+
+        if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage {
+            let backgroundImageView = UIImageView(image: backgroundImage)
+            backgroundImageView.contentMode = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundScaleMode ?? .scaleAspectFill
+            backgroundImageView.translatesAutoresizingMaskIntoConstraints = false
+            view.insertSubview(backgroundImageView, at: 0)
+            view.pinSubviewToAllEdges(backgroundImageView)
+		}
+    }
+
     private func setButtonViewControllerBackground() {
         // Fallback to setting the button background color to clear so the blur effect blurs the Prologue background color.
         let buttonsBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueButtonsBackgroundColor ?? .clear
         buttonViewController?.backgroundColor = buttonsBackgroundColor
         buttonBackgroundView?.backgroundColor = buttonsBackgroundColor
         stackedButtonsViewController?.backgroundColor = buttonsBackgroundColor
 
-        /// If host apps provide a background color for the prologue buttons:
-        /// 1. Hide the blur effect
-        /// 2. Set the background color of the view controller to prologueViewBackgroundColor
-        let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor ?? .clear
-
-        guard prologueViewBackgroundColor.cgColor == buttonsBackgroundColor.cgColor else {
-            buttonBlurEffectView.effect = UIBlurEffect(style: blurEffect)
-            return
-        }
-        // do not set background color if we've set a background image earlier
-        if WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage == nil {
-            view.backgroundColor = prologueViewBackgroundColor
-        }
         // if a blur effect for the buttons was passed, use it; otherwise hide the view.
         guard let blurEffect = WordPressAuthenticator.shared.unifiedStyle?.prologueButtonsBlurEffect else {
             buttonBlurEffectView.isHidden = true