Merge pull request #695 from wordpress-mobile/wcios/stackedButtonsInLoginPrologue

Login Prologue: Stacked buttons view controller

Author: selanthiraiyan

CHANGELOG.md

@@ -30,23 +30,24 @@ _None._
 
 -->
 
-## Unreleased
+## 4.1.0-beta.1 [Unreleased]
 
 ### Breaking Changes
 
 _None._
 
 ### New Features
 
-_None._
+- New `NUXStackedButtonsViewController` with two stack views and a configurable OR divider. by @selanthiraiyan [#695]
+- Add OR divider colors to `WordPressAuthenticatorStyle` with default values. @selanthiraiyan [#695]
 
 ### Bug Fixes
 
 _None._
 
 ### Internal Changes
 
-_None._
+- There have been [new changes to how `UIPasteboard` works](https://sarunw.com/posts/uipasteboard-privacy-change-ios16/) in iOS 16.0. This makes the unit tests from `PasteboardTests` fail. I have [skipped those tests for iOS 16.0](https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/pull/695/files#diff-ba468f6db6f592cdacdb632f7783a721c5eb856e8ab66765e8e59aabc2c1a7b4R13-R16) and created a GH issue [here](https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/issues/696) to keep track of this. by @selanthiraiyan [#695]
 
 ## [4.0.0](https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/releases/tag/4.0.0)
 

WordPressAuthenticator.podspec

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

WordPressAuthenticator.xcodeproj/project.pbxproj

@@ -171,6 +171,7 @@
 		D881A315256B5B5800FE5605 /* NavigateToEnterAccount.swift in Sources */ = {isa = PBXBuildFile; fileRef = D881A314256B5B5800FE5605 /* NavigateToEnterAccount.swift */; };
 		E8AF6B9EF50902F2117DFAF9 /* Pods_WordPressAuthenticatorTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 5A441EC80D2B8D2209C2E228 /* Pods_WordPressAuthenticatorTests.framework */; };
 		EE633D02287560E50002DE03 /* UITableView+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = EE633D01287560E50002DE03 /* UITableView+Helpers.swift */; };
+		EEC7A621290FAEE5007793EE /* NUXStackedButtonsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EEC7A61F290FAEE5007793EE /* NUXStackedButtonsViewController.swift */; };
 		EEEAC912289272F20066D419 /* VerifyEmailViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EEEAC911289272F20066D419 /* VerifyEmailViewController.swift */; };
 		EEEAC9142892731E0066D419 /* VerifyEmail.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = EEEAC9132892731E0066D419 /* VerifyEmail.storyboard */; };
 		F11448EC258B827B0048203D /* URL+JetpackConnect.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11448EB258B827B0048203D /* URL+JetpackConnect.swift */; };
@@ -390,6 +391,7 @@
 		D881A314256B5B5800FE5605 /* NavigateToEnterAccount.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigateToEnterAccount.swift; sourceTree = "<group>"; };
 		E9414A95E29F3297555AC92B /* Pods-WordPressAuthenticator.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WordPressAuthenticator.debug.xcconfig"; path = "Pods/Target Support Files/Pods-WordPressAuthenticator/Pods-WordPressAuthenticator.debug.xcconfig"; sourceTree = "<group>"; };
 		EE633D01287560E50002DE03 /* UITableView+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UITableView+Helpers.swift"; sourceTree = "<group>"; };
+		EEC7A61F290FAEE5007793EE /* NUXStackedButtonsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NUXStackedButtonsViewController.swift; sourceTree = "<group>"; };
 		EEEAC911289272F20066D419 /* VerifyEmailViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VerifyEmailViewController.swift; sourceTree = "<group>"; };
 		EEEAC9132892731E0066D419 /* VerifyEmail.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = VerifyEmail.storyboard; sourceTree = "<group>"; };
 		F11448EB258B827B0048203D /* URL+JetpackConnect.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "URL+JetpackConnect.swift"; sourceTree = "<group>"; };
@@ -613,9 +615,7 @@
 		B5609097208A4EAF00399AE4 /* NUX */ = {
 			isa = PBXGroup;
 			children = (
-				B56090C4208A4F5400399AE4 /* NUXButton.swift */,
-				B56090BC208A4F5300399AE4 /* NUXButtonView.storyboard */,
-				B56090B8208A4F5300399AE4 /* NUXButtonViewController.swift */,
+				EEC7A623290FAEED007793EE /* Button */,
 				B56090B9208A4F5300399AE4 /* NUXKeyboardResponder.swift */,
 				B56090C5208A4F5400399AE4 /* NUXLinkAuthViewController.swift */,
 				B56090BB208A4F5300399AE4 /* NUXLinkMailViewController.swift */,
@@ -934,6 +934,17 @@
 			path = Navigation;
 			sourceTree = "<group>";
 		};
+		EEC7A623290FAEED007793EE /* Button */ = {
+			isa = PBXGroup;
+			children = (
+				EEC7A61F290FAEE5007793EE /* NUXStackedButtonsViewController.swift */,
+				B56090C4208A4F5400399AE4 /* NUXButton.swift */,
+				B56090BC208A4F5300399AE4 /* NUXButtonView.storyboard */,
+				B56090B8208A4F5300399AE4 /* NUXButtonViewController.swift */,
+			);
+			path = Button;
+			sourceTree = "<group>";
+		};
 		EEEAC91028926F7D0066D419 /* VerifyEmail */ = {
 			isa = PBXGroup;
 			children = (
@@ -1294,6 +1305,7 @@
 				B560913D208A563800399AE4 /* LoginProloguePageViewController.swift in Sources */,
 				B5609117208A555600399AE4 /* SearchTableViewCell.swift in Sources */,
 				BA70352424F70C9F00B3AA1C /* ModalViewControllerPresenting.swift in Sources */,
+				EEC7A621290FAEE5007793EE /* NUXStackedButtonsViewController.swift in Sources */,
 				B56090C9208A4F5400399AE4 /* NUXLinkMailViewController.swift in Sources */,
 				B56090F1208A527000399AE4 /* String+Underline.swift in Sources */,
 				B56052A42090B2ED001B91FD /* CircularImageView.swift in Sources */,

WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift

@@ -116,6 +116,18 @@ public struct WordPressAuthenticatorStyle {
     ///
     public let statusBarStyle: UIStatusBarStyle
 
+    /// Style: OR divider separator color
+    ///
+    /// Used in `NUXStackedButtonsViewController`
+    ///
+    public let orDividerSeparatorColor: UIColor
+
+    /// Style: OR divider text color
+    ///
+    /// Used in `NUXStackedButtonsViewController`
+    ///
+    public let orDividerTextColor: UIColor
+
     /// Designated initializer
     ///
     public init(primaryNormalBackgroundColor: UIColor,
@@ -152,7 +164,9 @@ public struct WordPressAuthenticatorStyle {
                 prologuePrimaryButtonStyle: NUXButtonStyle? = nil,
                 prologueSecondaryButtonStyle: NUXButtonStyle? = nil,
                 prologueTopContainerChildViewController: @autoclosure @escaping () -> UIViewController? = nil,
-                statusBarStyle: UIStatusBarStyle = .lightContent) {
+                statusBarStyle: UIStatusBarStyle = .lightContent,
+                orDividerSeparatorColor: UIColor = .tertiaryLabel,
+                orDividerTextColor: UIColor = .secondaryLabel) {
         self.primaryNormalBackgroundColor = primaryNormalBackgroundColor
         self.primaryNormalBorderColor = primaryNormalBorderColor
         self.primaryHighlightBackgroundColor = primaryHighlightBackgroundColor
@@ -188,6 +202,8 @@ public struct WordPressAuthenticatorStyle {
         self.prologueSecondaryButtonStyle = prologueSecondaryButtonStyle
         self.prologueTopContainerChildViewController = prologueTopContainerChildViewController
         self.statusBarStyle = statusBarStyle
+        self.orDividerSeparatorColor = orDividerSeparatorColor
+        self.orDividerTextColor = orDividerTextColor
     }
 }
 

WordPressAuthenticator/Extensions/UIStoryboard+Helpers.swift

@@ -14,6 +14,7 @@ enum Storyboard: String {
     case twoFA = "TwoFA"
     case password = "Password"
     case verifyEmail = "VerifyEmail"
+    case nuxButtonView = "NUXButtonView"
 
     var instance: UIStoryboard {
         return UIStoryboard(name: self.rawValue, bundle: WordPressAuthenticator.bundle)

WordPressAuthenticator/NUX/NUXButton.swift renamed to WordPressAuthenticator/NUX/Button/NUXButton.swift

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -104,6 +104,98 @@
             </objects>
             <point key="canvasLocation" x="-164" y="171"/>
         </scene>
+        <!--Stacked Buttons View Controller-->
+        <scene sceneID="VNG-c8-zXS">
+            <objects>
+                <viewController storyboardIdentifier="NUXStackedButtonsViewController" id="FOH-1G-yiQ" customClass="NUXStackedButtonsViewController" customModule="WordPressAuthenticator" customModuleProvider="target" sceneMemberID="viewController">
+                    <view key="view" opaque="NO" contentMode="scaleToFill" id="81o-0r-4rj">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="300"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="darkgrey-shadow" translatesAutoresizingMaskIntoConstraints="NO" id="ZpB-VQ-0YP">
+                                <rect key="frame" x="0.0" y="-10" width="375" height="10"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="10" id="YJn-bW-Pcy"/>
+                                </constraints>
+                            </imageView>
+                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="Cmh-Hf-ebC">
+                                <rect key="frame" x="16" y="16" width="343" height="268"/>
+                                <subviews>
+                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="kYV-uw-1rK">
+                                        <rect key="frame" x="0.0" y="0.0" width="343" height="50"/>
+                                        <constraints>
+                                            <constraint firstAttribute="height" constant="50" placeholder="YES" id="9p8-s1-UPN"/>
+                                        </constraints>
+                                    </stackView>
+                                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="wPk-KA-x7P" userLabel="Divider Stack View">
+                                        <rect key="frame" x="0.0" y="66" width="343" height="136"/>
+                                        <subviews>
+                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4mw-Sl-dbO" userLabel="Leading LIne">
+                                                <rect key="frame" x="0.0" y="67.5" width="157.5" height="1"/>
+                                                <color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                <constraints>
+                                                    <constraint firstAttribute="height" constant="1" id="Az3-0f-MbX"/>
+                                                </constraints>
+                                            </view>
+                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="OR" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="f7F-3D-knR" userLabel="Divider Label">
+                                                <rect key="frame" x="162.5" y="60" width="18.5" height="16"/>
+                                                <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
+                                                <color key="textColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                <nil key="highlightedColor"/>
+                                            </label>
+                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1bE-GD-Cld" userLabel="Trailing LIne">
+                                                <rect key="frame" x="186" y="67.5" width="157" height="1"/>
+                                                <color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                <constraints>
+                                                    <constraint firstAttribute="height" constant="1" id="YzK-VG-TYj"/>
+                                                </constraints>
+                                            </view>
+                                        </subviews>
+                                        <constraints>
+                                            <constraint firstItem="f7F-3D-knR" firstAttribute="centerX" secondItem="wPk-KA-x7P" secondAttribute="centerX" id="RHe-Kh-jCQ"/>
+                                        </constraints>
+                                    </stackView>
+                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="C2O-Sa-BW6">
+                                        <rect key="frame" x="0.0" y="218" width="343" height="50"/>
+                                        <constraints>
+                                            <constraint firstAttribute="height" constant="50" placeholder="YES" id="3A2-9r-1Fa"/>
+                                        </constraints>
+                                    </stackView>
+                                </subviews>
+                            </stackView>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="CR4-fu-90a"/>
+                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="ZpB-VQ-0YP" firstAttribute="top" secondItem="CR4-fu-90a" secondAttribute="top" constant="-10" id="6up-Qb-ZhY"/>
+                            <constraint firstItem="CR4-fu-90a" firstAttribute="trailing" secondItem="Cmh-Hf-ebC" secondAttribute="trailing" constant="16" id="PqD-Xn-Ikk"/>
+                            <constraint firstItem="ZpB-VQ-0YP" firstAttribute="leading" secondItem="CR4-fu-90a" secondAttribute="leading" id="XfU-ez-sdI"/>
+                            <constraint firstItem="Cmh-Hf-ebC" firstAttribute="top" secondItem="ZpB-VQ-0YP" secondAttribute="bottom" constant="16" id="c15-tL-vmM"/>
+                            <constraint firstItem="CR4-fu-90a" firstAttribute="trailing" secondItem="ZpB-VQ-0YP" secondAttribute="trailing" id="c8q-z5-2H9"/>
+                            <constraint firstItem="Cmh-Hf-ebC" firstAttribute="leading" secondItem="CR4-fu-90a" secondAttribute="leading" constant="16" id="fMg-2K-w2a"/>
+                            <constraint firstItem="CR4-fu-90a" firstAttribute="bottom" secondItem="Cmh-Hf-ebC" secondAttribute="bottom" constant="16" id="txG-G9-tgZ"/>
+                        </constraints>
+                    </view>
+                    <size key="freeformSize" width="375" height="300"/>
+                    <connections>
+                        <outlet property="bottomStackView" destination="C2O-Sa-BW6" id="mzt-0i-PrK"/>
+                        <outlet property="buttonHolder" destination="81o-0r-4rj" id="42k-Ve-XRt"/>
+                        <outlet property="dividerLabel" destination="f7F-3D-knR" id="Rec-qu-Lhp"/>
+                        <outlet property="dividerStackView" destination="wPk-KA-x7P" id="Fd8-hd-TCi"/>
+                        <outlet property="leadingDividerLine" destination="4mw-Sl-dbO" id="bLI-3e-g2H"/>
+                        <outlet property="leadingDividerLineHeight" destination="Az3-0f-MbX" id="HIN-fq-3Vq"/>
+                        <outlet property="shadowView" destination="ZpB-VQ-0YP" id="j8o-x2-cug"/>
+                        <outlet property="topStackView" destination="kYV-uw-1rK" id="zpC-3T-wYT"/>
+                        <outlet property="trailingDividerLine" destination="1bE-GD-Cld" id="etK-XK-pIp"/>
+                        <outlet property="trailingDividerLineHeight" destination="YzK-VG-TYj" id="lVa-1V-WB8"/>
+                        <outletCollection property="shadowViewEdgeConstraints" destination="c8q-z5-2H9" collectionClass="NSMutableArray" id="fad-28-QVc"/>
+                        <outletCollection property="shadowViewEdgeConstraints" destination="XfU-ez-sdI" collectionClass="NSMutableArray" id="jcL-Lf-Evb"/>
+                    </connections>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="a8h-kS-4e5" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="-164" y="516"/>
+        </scene>
     </scenes>
     <resources>
         <image name="darkgrey-shadow" width="10" height="10"/>

WordPressAuthenticator/NUX/NUXButtonView.storyboard renamed to WordPressAuthenticator/NUX/Button/NUXButtonView.storyboard

@@ -8,7 +8,7 @@ import WordPressKit
 }
 
 
-private struct NUXButtonConfig {
+struct NUXButtonConfig {
     typealias CallBackType = () -> Void
 
     let title: String?
@@ -46,7 +46,7 @@ open class NUXButtonViewController: UIViewController {
 
     /// Used to constrain the shadow view outside of the
     /// bounds of this view controller.
-    weak var shadowLayoutGuide: UILayoutGuide? {
+    var shadowLayoutGuide: UILayoutGuide? {
         didSet {
             updateShadowViewEdgeConstraints()
         }