added instruction label to pin code screens

src/App/Controls/PinControl.cs

@@ -12,7 +12,7 @@ namespace Bit.App.Controls
             Label = new Label
             {
                 HorizontalTextAlignment = TextAlignment.Center,
-                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
+                FontSize = 35,
                 FontFamily = "Courier"
             };
 

src/App/Pages/Lock/LockPinPage.cs

@@ -32,6 +32,15 @@ namespace Bit.App.Pages
 
         public void Init()
         {
+            var instructionLabel = new Label
+            {
+                Text = "Enter your PIN code.",
+                LineBreakMode = LineBreakMode.WordWrap,
+                FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
+                HorizontalTextAlignment = TextAlignment.Center,
+                Style = (Style)Application.Current.Resources["text-muted"]
+            };
+
             PinControl = new PinControl();
             PinControl.OnPinEntered += PinEntered;
             PinControl.Label.SetBinding<PinPageModel>(Label.TextProperty, s => s.LabelText);
@@ -48,13 +57,14 @@ namespace Bit.App.Pages
             var stackLayout = new StackLayout
             {
                 Padding = new Thickness(30, 40),
-                Spacing = 10,
+                Spacing = 20,
-                Children = { PinControl.Label, logoutButton, PinControl.Entry }
+                Children = { PinControl.Label, instructionLabel, logoutButton, PinControl.Entry }
             };
 
             var tgr = new TapGestureRecognizer();
             tgr.Tapped += Tgr_Tapped;
             PinControl.Label.GestureRecognizers.Add(tgr);
+            instructionLabel.GestureRecognizers.Add(tgr);
 
             Title = "Verify PIN";
             Content = stackLayout;

src/App/Pages/Settings/SettingsPinPage.cs

@@ -30,6 +30,15 @@ namespace Bit.App.Pages
 
         public void Init()
         {
+            var instructionLabel = new Label
+            {
+                Text = "Enter a 4 digit PIN code to unlock the app with.",
+                LineBreakMode = LineBreakMode.WordWrap,
+                FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
+                HorizontalTextAlignment = TextAlignment.Center,
+                Style = (Style)Application.Current.Resources["text-muted"]
+            };
+
             PinControl = new PinControl();
             PinControl.OnPinEntered += PinEntered;
             PinControl.Label.SetBinding<PinPageModel>(Label.TextProperty, s => s.LabelText);
@@ -38,13 +47,14 @@ namespace Bit.App.Pages
             var stackLayout = new StackLayout
             {
                 Padding = new Thickness(30, 40),
-                Spacing = 10,
+                Spacing = 20,
-                Children = { PinControl.Label, PinControl.Entry }
+                Children = { PinControl.Label, instructionLabel, PinControl.Entry }
             };
 
             var tgr = new TapGestureRecognizer();
             tgr.Tapped += Tgr_Tapped;
             PinControl.Label.GestureRecognizers.Add(tgr);
+            instructionLabel.GestureRecognizers.Add(tgr);
 
             Title = "Set PIN";
             Content = stackLayout;

src/iOS.Extension/LockPinViewController.cs

@@ -39,7 +39,12 @@ namespace Bit.iOS.Extension
             View.BackgroundColor = new UIColor(red: 0.94f, green: 0.94f, blue: 0.96f, alpha: 1.0f);
 
             var descriptor = UIFontDescriptor.PreferredBody;
-            PinLabel.Font = UIFont.FromName("Courier", descriptor.PointSize * 1.3f);
+            PinLabel.Font = UIFont.FromName("Courier", 35);
+
+            InstructionLabel.LineBreakMode = UILineBreakMode.WordWrap;
+            InstructionLabel.Lines = 0;
+            InstructionLabel.Font = UIFont.FromDescriptor(descriptor, descriptor.PointSize * 0.8f);
+            InstructionLabel.TextColor = new UIColor(red: 0.47f, green: 0.47f, blue: 0.47f, alpha: 1.0f);
 
             PinTextField.EditingChanged += PinTextField_EditingChanged;
 

src/iOS.Extension/LockPinViewController.designer.cs

@@ -11,39 +11,51 @@ using UIKit;
 
 namespace Bit.iOS.Extension
 {
-	[Register ("LockPinViewController")]
+    [Register ("LockPinViewController")]
-	partial class LockPinViewController
+    partial class LockPinViewController
-	{
+    {
-		[Outlet]
+        [Outlet]
-		[GeneratedCode ("iOS Designer", "1.0")]
+        [GeneratedCode ("iOS Designer", "1.0")]
-		UIBarButtonItem CancelButton { get; set; }
+        UIKit.UIBarButtonItem CancelButton { get; set; }
 
-		[Outlet]
+        [Outlet]
-		[GeneratedCode ("iOS Designer", "1.0")]
+        [GeneratedCode ("iOS Designer", "1.0")]
-		UILabel PinLabel { get; set; }
+        UIKit.UILabel InstructionLabel { get; set; }
 
-		[Outlet]
+        [Outlet]
-		[GeneratedCode ("iOS Designer", "1.0")]
+        [GeneratedCode ("iOS Designer", "1.0")]
-		UITextField PinTextField { get; set; }
+        UIKit.UILabel PinLabel { get; set; }
 
-		[Action ("CancelButton_Activated:")]
+        [Outlet]
-		[GeneratedCode ("iOS Designer", "1.0")]
+        [GeneratedCode ("iOS Designer", "1.0")]
-		partial void CancelButton_Activated (UIBarButtonItem sender);
+        UIKit.UITextField PinTextField { get; set; }
 
-		void ReleaseDesignerOutlets ()
+
-		{
+        [Action ("CancelButton_Activated:")]
-			if (CancelButton != null) {
+        [GeneratedCode ("iOS Designer", "1.0")]
-				CancelButton.Dispose ();
+        partial void CancelButton_Activated (UIBarButtonItem sender);
-				CancelButton = null;
+
-			}
+        void ReleaseDesignerOutlets ()
-			if (PinLabel != null) {
+        {
-				PinLabel.Dispose ();
+            if (CancelButton != null) {
-				PinLabel = null;
+                CancelButton.Dispose ();
-			}
+                CancelButton = null;
-			if (PinTextField != null) {
+            }
-				PinTextField.Dispose ();
+
-				PinTextField = null;
+            if (InstructionLabel != null) {
-			}
+                InstructionLabel.Dispose ();
-		}
+                InstructionLabel = null;
-	}
+            }
+
+            if (PinLabel != null) {
+                PinLabel.Dispose ();
+                PinLabel = null;
+            }
+
+            if (PinTextField != null) {
+                PinTextField.Dispose ();
+                PinTextField = null;
+            }
+        }
+    }
 }

src/iOS.Extension/MainInterface.storyboard

@@ -373,14 +373,14 @@
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                         <subviews>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="- - - -" lineBreakMode="tailTruncation" minimumFontSize="10" id="7373" translatesAutoresizingMaskIntoConstraints="NO" textAlignment="center">
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="- - - -" lineBreakMode="tailTruncation" minimumFontSize="10" id="7373" translatesAutoresizingMaskIntoConstraints="NO" textAlignment="center" misplaced="YES">
                                 <rect key="frame" x="30" y="104" width="540" height="17"/>
                                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
-                                <fontDescription key="fontDescription" name="Courier" family="Courier" pointSize="17"/>
+                                <fontDescription key="fontDescription" name="Courier" family="Courier" pointSize="40"/>
                                 <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" minimumFontSize="17" id="7350" translatesAutoresizingMaskIntoConstraints="NO" textAlignment="center">
+                            <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" minimumFontSize="17" id="7350" translatesAutoresizingMaskIntoConstraints="NO" textAlignment="center" misplaced="YES">
                                 <rect key="frame" x="30" y="79" width="540" height="77"/>
                                 <fontDescription key="fontDescription" name="Courier-BoldOblique" family="Courier" pointSize="14"/>
                                 <textInputTraits key="textInputTraits" keyboardType="numberPad"/>
@@ -388,6 +388,13 @@
                                 <color key="tintColor" colorSpace="calibratedWhite" white="0" alpha="0"/>
                                 <color key="textColor" colorSpace="calibratedWhite" white="0" alpha="0"/>
                             </textField>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Enter your PIN Code." lineBreakMode="tailTruncation" minimumFontSize="10" id="10516" translatesAutoresizingMaskIntoConstraints="NO" textAlignment="center">
+                                <rect key="frame" x="30" y="179" width="540" height="20.5"/>
+                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" colorSpace="calibratedWhite" white="0.333333333333333" alpha="1"/>
+                                <nil key="highlightedColor"/>
+                            </label>
                         </subviews>
                         <constraints>
                             <constraint id="7351" firstItem="7350" firstAttribute="leading" secondItem="6805" secondAttribute="leading" constant="30"/>
@@ -397,6 +404,9 @@
                             <constraint id="7375" firstItem="6805" firstAttribute="trailing" secondItem="7373" secondAttribute="trailing" constant="30"/>
                             <constraint id="7376" firstItem="7373" firstAttribute="top" secondItem="6812" secondAttribute="bottom" constant="40"/>
                             <constraint id="7394" firstItem="7350" firstAttribute="height" secondItem="7373" secondAttribute="height" constant="60"/>
+                            <constraint id="10517" firstItem="10516" firstAttribute="leading" secondItem="6805" secondAttribute="leading" constant="30"/>
+                            <constraint id="10518" firstItem="6805" firstAttribute="trailing" secondItem="10516" secondAttribute="trailing" constant="30"/>
+                            <constraint id="10519" firstItem="10516" firstAttribute="top" secondItem="7350" secondAttribute="bottom"/>
                         </constraints>
                     </view>
                     <navigationItem key="navigationItem" title="Verify PIN" id="6803">
@@ -410,6 +420,7 @@
                         <outlet property="CancelButton" destination="6804" id="name-outlet-6804"/>
                         <outlet property="PinTextField" destination="7350" id="name-outlet-7350"/>
                         <outlet property="PinLabel" destination="7373" id="name-outlet-7373"/>
+                        <outlet property="InstructionLabel" destination="10516" id="name-outlet-10516"/>
                     </connections>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="6813" userLabel="First Responder" sceneMemberID="firstResponder"/>

src/iOS/Controls/CustomLabelRenderer.cs

@@ -60,6 +60,11 @@ namespace Bit.iOS.Controls
             {
                 pointSize *= .6f;
             }
+            else
+            {
+                // not using dyanmic font sizes, return
+                return;
+            }
 
             Control.Font = UIFont.FromDescriptor(Element.Font.ToUIFont().FontDescriptor, pointSize);
         }