UL&S: SiteCredentialsViewController username and password fields

WordPressAuthenticator.podspec

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

WordPressAuthenticator/Authenticator/WordPressAuthenticatorDisplayStrings.swift

@@ -9,6 +9,7 @@ public struct WordPressAuthenticatorDisplayStrings {
     public let emailLoginInstructions: String
     public let jetpackLoginInstructions: String
     public let siteLoginInstructions: String
+	public let siteCredentialInstructions: String
 
     /// Strings: primary call-to-action button titles.
     ///
@@ -25,26 +26,37 @@ public struct WordPressAuthenticatorDisplayStrings {
     public let findSiteButtonTitle: String
     public let resetPasswordButtonTitle: String
 
+	/// Placeholder text for textfields.
+	///
+	public let usernamePlaceholder: String
+	public let passwordPlaceholder: String
+
     /// Designated initializer.
     ///
     public init(emailLoginInstructions: String,
                 jetpackLoginInstructions: String,
                 siteLoginInstructions: String,
+				siteCredentialInstructions: String,
                 continueButtonTitle: String,
                 findSiteButtonTitle: String,
                 resetPasswordButtonTitle: String,
                 gettingStartedTitle: String,
                 logInTitle: String,
-                signUpTitle: String) {
+                signUpTitle: String,
+				usernamePlaceholder: String,
+				passwordPlaceholder: String) {
         self.emailLoginInstructions = emailLoginInstructions
         self.jetpackLoginInstructions = jetpackLoginInstructions
         self.siteLoginInstructions = siteLoginInstructions
+		self.siteCredentialInstructions = siteCredentialInstructions
         self.continueButtonTitle = continueButtonTitle
         self.findSiteButtonTitle = findSiteButtonTitle
         self.resetPasswordButtonTitle = resetPasswordButtonTitle
         self.gettingStartedTitle = gettingStartedTitle
         self.logInTitle = logInTitle
         self.signUpTitle = signUpTitle
+		self.usernamePlaceholder = usernamePlaceholder
+		self.passwordPlaceholder = passwordPlaceholder
     }
 }
 
@@ -57,6 +69,8 @@ public extension WordPressAuthenticatorDisplayStrings {
                                                         comment: "Instruction text on the login's email address screen."),
             siteLoginInstructions: NSLocalizedString("Enter the address of the WordPress site you'd like to connect.",
                                                      comment: "Instruction text on the login's site addresss screen."),
+			siteCredentialInstructions: NSLocalizedString("Enter your account information for %@.",
+														  comment: "Enter your account information for {site url}. Asks the user to enter a username and password for their self-hosted site."),
             continueButtonTitle: NSLocalizedString("Continue",
                                                     comment: "The button title text when there is a next step for logging in or signing up."),
             findSiteButtonTitle: NSLocalizedString("Find your site address",
@@ -68,7 +82,11 @@ public extension WordPressAuthenticatorDisplayStrings {
             logInTitle: NSLocalizedString("Log In",
                                           comment: "View title during the log in process."),
             signUpTitle: NSLocalizedString("Sign Up",
-                                           comment: "View title during the sign up process.")
+                                           comment: "View title during the sign up process."),
+			usernamePlaceholder: NSLocalizedString("Username",
+												   comment: "Placeholder for the username textfield."),
+			passwordPlaceholder: NSLocalizedString("Password",
+												   comment: "Placeholder for the password textfield.")
         )
     }
 }

WordPressAuthenticator/Unified Auth/View Related/Reusable Views/TextFieldTableViewCell.swift

@@ -5,18 +5,27 @@ import UIKit
 ///
 final class TextFieldTableViewCell: UITableViewCell {
 
-    /// Private properties
+    /// Private properties.
     ///
     @IBOutlet private weak var borderView: UIView!
     @IBOutlet private weak var borderWidth: NSLayoutConstraint!
+	private var secureTextEntryToggle: UIButton?
+	private var secureTextEntryImageVisible: UIImage?
+	private var secureTextEntryImageHidden: UIImage?
 
     private var hairlineBorderWidth: CGFloat {
         return 1.0 / UIScreen.main.scale
     }
 
-    /// Public properties
+    /// Public properties.
     ///
     @IBOutlet public weak var textField: UITextField! // public so it can be the first responder
+	@IBInspectable public var showSecureTextEntryToggle: Bool = false {
+		didSet {
+			configureSecureTextEntryToggle()
+		}
+	}
+
     public static let reuseIdentifier = "TextFieldTableViewCell"
 
     override func awakeFromNib() {
@@ -52,23 +61,93 @@ private extension TextFieldTableViewCell {
     func setCommonTextFieldStyles() {
         textField.font = UIFont.preferredFont(forTextStyle: .body)
         textField.autocorrectionType = .no
-        textField.returnKeyType = .continue
     }
 
     /// Sets the textfield keyboard type and applies common traits.
     /// - note: Don't assign first responder here. It's too early in the view lifecycle.
     ///
     func applyTextFieldStyle(_ style: TextFieldStyle) {
-        switch style {
+		switch style {
         case .url:
             textField.keyboardType = .URL
-        default:
-            setCommonTextFieldStyles()
+			textField.returnKeyType = .continue
+		case .username:
+			textField.keyboardType = .default
+			textField.returnKeyType = .next
+		case .password:
+			textField.keyboardType = .default
+			textField.returnKeyType = .continue
+			setSecureTextEntry(true)
+			showSecureTextEntryToggle = true
+			configureSecureTextEntryToggle()
         }
     }
 }
 
 
+// MARK: - Secure Text Entry
+/// Methods ported from WPWalkthroughTextField.h/.m
+///
+private extension TextFieldTableViewCell {
+
+	/// Build the show / hide icon in the textfield.
+	///
+	func configureSecureTextEntryToggle() {
+		guard showSecureTextEntryToggle else {
+			return
+		}
+
+		secureTextEntryImageVisible = UIImage.gridicon(.visible)
+		secureTextEntryImageHidden = UIImage.gridicon(.notVisible)
+
+		secureTextEntryToggle = UIButton(type: .custom)
+		secureTextEntryToggle?.clipsToBounds = true
+		// The icon should match the border color.
+		let tintColor = WordPressAuthenticator.shared.unifiedStyle?.borderColor ?? WordPressAuthenticator.shared.style.primaryNormalBorderColor
+		secureTextEntryToggle?.tintColor = tintColor
+
+		secureTextEntryToggle?.addTarget(self,
+										 action: #selector(secureTextEntryToggleAction),
+										 for: .touchUpInside)
+
+		updateSecureTextEntryToggleImage()
+		updateSecureTextEntryForAccessibility()
+		textField.rightView = secureTextEntryToggle
+		textField.rightViewMode = .always
+	}
+
+	func setSecureTextEntry(_ secureTextEntry: Bool) {
+		textField.font = UIFont.preferredFont(forTextStyle: .body)
+
+		textField.isSecureTextEntry = secureTextEntry
+		updateSecureTextEntryToggleImage()
+		updateSecureTextEntryForAccessibility()
+	}
+
+	@objc func secureTextEntryToggleAction(_ sender: Any) {
+		textField.isSecureTextEntry = !textField.isSecureTextEntry
+
+		// Save and re-apply the current selection range to save the cursor position
+		let currentTextRange = textField.selectedTextRange
+		textField.becomeFirstResponder()
+		textField.selectedTextRange = currentTextRange
+		updateSecureTextEntryToggleImage()
+		updateSecureTextEntryForAccessibility()
+	}
+
+	func updateSecureTextEntryToggleImage() {
+		let image = textField.isSecureTextEntry ? secureTextEntryImageHidden : secureTextEntryImageVisible
+		secureTextEntryToggle?.setImage(image, for: .normal)
+		secureTextEntryToggle?.sizeToFit()
+	}
+
+	func updateSecureTextEntryForAccessibility() {
+		secureTextEntryToggle?.accessibilityLabel = Constants.showPassword
+		secureTextEntryToggle?.accessibilityValue = textField.isSecureTextEntry ? Constants.passwordHidden : Constants.passwordShown
+	}
+}
+
+
 // MARK: - Constants
 extension TextFieldTableViewCell {
 
@@ -79,4 +158,16 @@ extension TextFieldTableViewCell {
         case username
         case password
     }
+
+	struct Constants {
+		/// Accessibility Hints
+		///
+		static let passwordHidden = NSLocalizedString("Hidden",
+													  comment: "Accessibility value if login page's password field is hiding the password (i.e. with asterisks).")
+		static let passwordShown = NSLocalizedString("Shown",
+													 comment: "Accessibility value if login page's password field is displaying the password.")
+		static let showPassword = NSLocalizedString("Show password",
+													comment:"Accessibility label for the 'Show password' button in the login page's password field.")
+
+	}
 }

WordPressAuthenticator/Unified Auth/View Related/Reusable Views/TextFieldTableViewCell.xib

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="16097" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="16097.2" 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"/>

WordPressAuthenticator/Unified Auth/View Related/Reusable Views/TextLabelTableViewCell.xib

@@ -17,7 +17,7 @@
                 <rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i98-6g-rDP" userLabel="text label">
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i98-6g-rDP" userLabel="text label">
                         <rect key="frame" x="16" y="11" width="288" height="22"/>
                         <fontDescription key="fontDescription" style="UICTFontTextStyleBody"/>
                         <nil key="textColor"/>