Image and color updates: site address helper alert, site address header, and magic link UI (#173)

* Update `icon-url-field` image asset rendering mode to always template. Set its `UIImageView`'s tintColor to the placeholder color in `SiteInfoHeaderView` where the image is used.

* Create `WordPressAuthenticatorDisplayImages` for configurable images.

* Magic Link: configure Use Password button with text button styles and set the image based on the `WordPressAuthenticatorDisplayImages`.

* Log In with Site Address help alert: set the image based on `WordPressAuthenticatorDisplayImages`.

* Remove @objc and public for the 2 new image getters.

* Bump pod version.

* Add an outlet for the prompt label on login with username and password screen.

* Update `SiteInfoHeaderView` title and subtitle colors to `WordPressAuthenticator.shared.style.subheadlineColor`.

* Revert "Update `SiteInfoHeaderView` title and subtitle colors to `WordPressAuthenticator.shared.style.subheadlineColor`."

This reverts commit 4c6e83f.

* Revert "Add an outlet for the prompt label on login with username and password screen."

This reverts commit 9857b28.

* Bump pod version after merging the latest `develop`.

Author: jaclync

WordPressAuthenticator.podspec

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

WordPressAuthenticator.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		020BE74A23B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020BE74923B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.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, ); }; };
 		7A7A9B9CD2D81959F9AB9AF6 /* Pods_WordPressAuthenticator.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C736FF243DE333FCAB1C2614 /* Pods_WordPressAuthenticator.framework */; };
@@ -142,6 +143,7 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		020BE74923B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WordPressAuthenticatorDisplayImages.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>"; };
@@ -433,6 +435,7 @@
 				B56090F6208A533200399AE4 /* WordPressSupportSourceTag.swift */,
 				CE1B18CF20EEC41600BECC3F /* WordPressAuthenticatorConfiguration.swift */,
 				CE1B18D120EEC44400BECC3F /* WordPressAuthenticatorStyles.swift */,
+				020BE74923B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift */,
 				CE16177421B6D82200B82A47 /* WordPressAuthenticatorDisplayStrings.swift */,
 			);
 			path = Authenticator;
@@ -879,6 +882,7 @@
 				B5609139208A563800399AE4 /* LoginEmailViewController.swift in Sources */,
 				98C9195B2308E3DA00A90E12 /* AppleAuthenticator.swift in Sources */,
 				B56090F9208A533200399AE4 /* WordPressAuthenticator+Events.swift in Sources */,
+				020BE74A23B0BD2E007FE54C /* WordPressAuthenticatorDisplayImages.swift in Sources */,
 				B560913A208A563800399AE4 /* LoginLinkRequestViewController.swift in Sources */,
 				B560910C208A54F800399AE4 /* WordPressComOAuthClientFacade.m in Sources */,
 				B55272C320B2FE4100E18BC5 /* WPAuthenticatorLoggingPrivate.m in Sources */,

WordPressAuthenticator/Authenticator/WordPressAuthenticator.swift

@@ -40,6 +40,10 @@ import AuthenticationServices
     ///
     public let style: WordPressAuthenticatorStyle
 
+    /// Authenticator's Display Images.
+    ///
+    public let displayImages: WordPressAuthenticatorDisplayImages
+
     /// Authenticator's Display Texts.
     ///
     public let displayStrings: WordPressAuthenticatorDisplayStrings
@@ -65,22 +69,28 @@ import AuthenticationServices
     ///
     private init(configuration: WordPressAuthenticatorConfiguration,
                  style: WordPressAuthenticatorStyle,
+                 displayImages: WordPressAuthenticatorDisplayImages,
                  displayStrings: WordPressAuthenticatorDisplayStrings) {
         self.configuration = configuration
         self.style = style
+        self.displayImages = displayImages
         self.displayStrings = displayStrings
     }
 
     /// Initializes the WordPressAuthenticator with the specified Configuration.
     ///
     public static func initialize(configuration: WordPressAuthenticatorConfiguration,
                                   style: WordPressAuthenticatorStyle,
+                                  displayImages: WordPressAuthenticatorDisplayImages = .defaultImages,
                                   displayStrings: WordPressAuthenticatorDisplayStrings = .defaultStrings) {
         guard privateInstance == nil else {
             fatalError("WordPressAuthenticator is already initialized")
         }
 
-        privateInstance = WordPressAuthenticator(configuration: configuration, style: style, displayStrings: displayStrings)
+        privateInstance = WordPressAuthenticator(configuration: configuration,
+                                                 style: style,
+                                                 displayImages: displayImages,
+                                                 displayStrings: displayStrings)
     }
 
     // MARK: - Public Methods

WordPressAuthenticator/Authenticator/WordPressAuthenticatorDisplayImages.swift

@@ -0,0 +1,22 @@
+// MARK: - WordPress Authenticator Display Images
+//
+public struct WordPressAuthenticatorDisplayImages {
+    public let magicLink: UIImage
+    public let siteAddressModalPlaceholder: UIImage
+
+    /// Designated initializer.
+    ///
+    public init(magicLink: UIImage, siteAddressModalPlaceholder: UIImage) {
+        self.magicLink = magicLink
+        self.siteAddressModalPlaceholder = siteAddressModalPlaceholder
+    }
+}
+
+public extension WordPressAuthenticatorDisplayImages {
+    static var defaultImages: WordPressAuthenticatorDisplayImages {
+        return WordPressAuthenticatorDisplayImages(
+            magicLink: .magicLinkImage,
+            siteAddressModalPlaceholder: .siteAddressModalPlaceholder
+        )
+    }
+}

WordPressAuthenticator/Extensions/FancyAlertViewController+LoginError.swift

@@ -34,7 +34,7 @@ extension FancyAlertViewController {
             }
         }
 
-        let image = UIImage.siteAddressModalPlaceholder
+        let image = WordPressAuthenticator.shared.displayImages.siteAddressModalPlaceholder
 
         let config = FancyAlertViewController.Config(titleText: Strings.titleText,
                                                      bodyText: Strings.bodyText,

WordPressAuthenticator/Extensions/UIImage+Assets.swift

@@ -4,6 +4,17 @@ import Foundation
 // MARK: - Named Assets
 //
 extension UIImage {
+    /// Returns the Link Image.
+    ///
+    static var linkFieldImage: UIImage {
+        return UIImage(named: "icon-url-field", in: bundle, compatibleWith: nil)!
+    }
+
+    /// Returns the Default Magic Link Image.
+    ///
+    static var magicLinkImage: UIImage {
+        return UIImage(named: "login-magic-link", in: bundle, compatibleWith: nil)!
+    }
 
     /// Returns the Default Site Icon Placeholder Image.
     ///

WordPressAuthenticator/NUX/NUXLinkMailViewController.swift

@@ -7,6 +7,7 @@ import WordPressShared
 /// app to look for the emailed authentication link.
 ///
 class NUXLinkMailViewController: LoginViewController {
+    @IBOutlet private weak var imageView: UIImageView!
     @IBOutlet var label: UILabel?
     @IBOutlet var openMailButton: NUXButton?
     @IBOutlet var usePasswordButton: UIButton?
@@ -27,6 +28,8 @@ class NUXLinkMailViewController: LoginViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
 
+        imageView.image = WordPressAuthenticator.shared.displayImages.magicLink
+
         let email = loginFields.username
         if !email.isValidEmail() {
             assert(email.isValidEmail(), "The value of loginFields.username was not a valid email address.")
@@ -35,6 +38,7 @@ class NUXLinkMailViewController: LoginViewController {
         emailMagicLinkSource = loginFields.meta.emailMagicLinkSource
         assert(emailMagicLinkSource != nil, "Must have an email link source.")
 
+        styleUsePasswordButton()
         localizeControls()
     }
 
@@ -44,6 +48,13 @@ class NUXLinkMailViewController: LoginViewController {
 
     // MARK: - Configuration
 
+    private func styleUsePasswordButton() {
+        guard let usePasswordButton = usePasswordButton else {
+            return
+        }
+        WPStyleGuide.configureTextButton(usePasswordButton)
+    }
+
     /// Assigns localized strings to various UIControl defined in the storyboard.
     ///
     @objc func localizeControls() {

WordPressAuthenticator/Resources/Assets.xcassets/icon-url-field.imageset/Contents.json

@@ -8,5 +8,9 @@
   "info" : {
     "version" : 1,
     "author" : "xcode"
+  },
+  "properties" : {
+    "template-rendering-intent" : "template",
+    "preserves-vector-representation" : true
   }
 }

WordPressAuthenticator/Signin/EmailMagicLink.storyboard

@@ -152,6 +152,7 @@
                         </variation>
                     </view>
                     <connections>
+                        <outlet property="imageView" destination="upR-OL-iQF" id="yFk-fN-VV9"/>
                         <outlet property="label" destination="pkM-xx-821" id="nOS-5r-86h"/>
                         <outlet property="openMailButton" destination="0Iy-9H-ykD" id="Xwh-40-c65"/>
                         <outlet property="usePasswordButton" destination="b0O-LO-6ax" id="mqE-R7-rGj"/>

WordPressAuthenticator/Signin/LoginSelfHostedViewController.swift

@@ -208,7 +208,7 @@ class LoginSelfHostedViewController: LoginViewController, NUXKeyboardResponder {
         siteHeaderView.subtitleIsHidden = true
 
         siteHeaderView.blavatarBorderIsHidden = true
-        siteHeaderView.blavatarImage = UIImage.linkFieldImage.imageWithTintColor(WordPressAuthenticator.shared.style.placeholderColor)
+        siteHeaderView.blavatarImage = .linkFieldImage
     }