PS-70 added new UI to enter code manually in the QR Code scanner screen. Changed existing labels on scanner screen.

src/App/Pages/Vault/ScanPage.xaml

@@ -1,14 +1,25 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
-<pages:BaseContentPage 
+<pages:BaseContentPage
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Bit.App.Pages.ScanPage"
     xmlns:pages="clr-namespace:Bit.App.Pages"
     xmlns:u="clr-namespace:Bit.App.Utilities"
+    xmlns:controls="clr-namespace:Bit.App.Controls"
     xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
     x:Name="_page"
     Title="{u:I18n ScanQrTitle}">
-
+    
+    <ContentPage.BindingContext>
+        <pages:ScanPageViewModel />
+    </ContentPage.BindingContext>
+    
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <u:InverseBoolConverter x:Key="inverseBool" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+    
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="{u:I18n Cancel}" Clicked="Close_Clicked" Order="Primary" Priority="-1" />
     </ContentPage.ToolbarItems>
@@ -24,7 +35,40 @@
             AutomationId="zxingScannerView"
             OnScanResult="OnScanResult">
         </zxing:ZXingScannerView>
-
+        <Grid
+            VerticalOptions="FillAndExpand"
+            HorizontalOptions="FillAndExpand"
+            IsVisible="{Binding ShowScanner, Converter={StaticResource inverseBool}}"
+            BackgroundColor="{DynamicResource BackgroundColor}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <StackLayout
+                VerticalOptions="Center"
+                HorizontalOptions="FillAndExpand"
+                Grid.Column="0"
+                Grid.Row="0"
+                Grid.RowSpan="2"
+                Margin="30,0">
+                <Label
+                    Text="{u:I18n EnterCodeManually}"
+                    FontSize="30" />
+                <Label
+                    Text="{u:I18n AuthenticatorKey}"
+                    StyleClass="box-label" />
+                <controls:MonoEntry
+                    x:Name="_loginTotpEntry"
+                    Text="{Binding TotpAuthenticationKey}"
+                    IsSpellCheckEnabled="False"
+                    IsTextPredictionEnabled="False"
+                    StyleClass="box-value" />
+                <Button 
+                    Text="{u:I18n AddTotp}" 
+                    StyleClass="box-button-row"/>
+            </StackLayout>
+        </Grid>
         <Grid
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand"
@@ -34,31 +78,6 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
-
-            <BoxView
-                Grid.Column="0"
-                Grid.Row="0"
-                VerticalOptions="Fill"
-                HorizontalOptions="FillAndExpand"
-                BackgroundColor="Black"
-                Opacity="0.7" />
-
-            <Label
-                Text="{u:I18n CameraInstructionTop}"
-                AutomationId="zxingDefaultOverlay_TopTextLabel"
-                Grid.Column="0"
-                Grid.Row="0"
-                VerticalOptions="Center"
-                HorizontalOptions="Center"
-                TextColor="White" />
-
-            <BoxView
-                Grid.Column="0"
-                Grid.Row="1"
-                VerticalOptions="Fill"
-                HorizontalOptions="FillAndExpand"
-                BackgroundColor="Transparent" />
-
             <BoxView
                 Grid.Column="0"
                 Grid.Row="2"
@@ -66,17 +85,37 @@
                 HorizontalOptions="FillAndExpand"
                 BackgroundColor="Black"
                 Opacity="0.7" />
-
+            <StackLayout
+                VerticalOptions="Start"
+                HorizontalOptions="Center"
+                Grid.Column="0"
+                Grid.Row="2">
+                <Label
+                    Text="{u:I18n CameraInstructionTop}"
+                    AutomationId="zxingDefaultOverlay_TopTextLabel"
+                    Margin="0,15,0,0"
+                    HorizontalOptions="Center"
+                    StyleClass="text-sm"
+                    TextColor="White" />
+                <Label
+                    Text="{u:I18n CameraInstructionBottom}"
+                    AutomationId="zxingDefaultOverlay_TopTextLabel"
+                    HorizontalOptions="Center"
+                    StyleClass="text-sm"
+                    TextColor="White" />
+            </StackLayout>
             <Label
-                Text="{u:I18n CameraInstructionBottom}"
+                FormattedText="{Binding ToggleScanModeLabel}"
-                AutomationId="zxingDefaultOverlay_BottomTextLabel"
                 Grid.Column="0"
                 Grid.Row="2"
-                VerticalOptions="Center"
+                Margin="0,15"
-                HorizontalOptions="Center"
+                StyleClass="text-sm"
-                TextColor="White" />
+                VerticalOptions="End"
+                HorizontalOptions="Center" >
+                <Label.GestureRecognizers>
+                    <TapGestureRecognizer Tapped="ToggleScanMode_OnTapped" />
+                </Label.GestureRecognizers>
+            </Label>
         </Grid>
-
     </Grid>
-
+</pages:BaseContentPage>
-</pages:BaseContentPage>

src/App/Pages/Vault/ScanPage.xaml.cs

@@ -11,6 +11,7 @@ namespace Bit.App.Pages
 {
     public partial class ScanPage : BaseContentPage
     {
+        private ScanPageViewModel ViewModel => BindingContext as ScanPageViewModel;
         private readonly Action<string> _callback;
 
         private CancellationTokenSource _autofocusCts;
@@ -119,5 +120,10 @@ namespace Bit.App.Pages
                 await Navigation.PopModalAsync();
             }
         }
+
+        private void ToggleScanMode_OnTapped(object sender, EventArgs e)
+        {
+            ViewModel.ToggleScanModeCommand.Execute(null);
+        }
     }
 }

src/App/Pages/Vault/ScanPageViewModel.cs

@@ -0,0 +1,64 @@
+using Bit.App.Resources;
+using Bit.App.Utilities;
+using Bit.Core.Abstractions;
+using Xamarin.Forms;
+
+namespace Bit.App.Pages
+{
+    public class ScanPageViewModel: BaseViewModel
+    {
+        private bool _showScanner;
+        private string _totpAuthenticationKey;
+
+        public ScanPageViewModel()
+        {
+            ShowScanner = true;
+            ToggleScanModeCommand = new Command(ToggleScanAsync);
+        }
+
+        public Command ToggleScanModeCommand { get; set; }
+
+        public string TotpAuthenticationKey
+        {
+            get => _totpAuthenticationKey;
+            set => SetProperty(ref _totpAuthenticationKey, value,
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ToggleScanModeLabel)
+                });
+        }
+        public bool ShowScanner
+        {
+            get => _showScanner;
+            set => SetProperty(ref _showScanner, value,
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ToggleScanModeLabel)
+                });
+        }
+        
+        public FormattedString ToggleScanModeLabel
+        {
+            get
+            {
+                var fs = new FormattedString();
+                fs.Spans.Add(new Span
+                {
+                    Text = ShowScanner ? AppResources.CannotScanQRCode : AppResources.CannotAddAuthenticatorKey,
+                    TextColor = ThemeManager.GetResourceColor("BackgroundColor")
+                });
+                fs.Spans.Add(new Span
+                {
+                    Text = ShowScanner ? AppResources.EnterCodeManually : AppResources.ScanQRCode,
+                    TextColor = ThemeManager.GetResourceColor("PrimaryColor")
+                });
+                return fs;
+            }
+        }
+        
+        private void ToggleScanAsync()
+        {
+            ShowScanner = !ShowScanner;
+        }
+    }
+}

src/App/Resources/AppResources.Designer.cs

@@ -4040,5 +4040,35 @@ namespace Bit.App.Resources {
                 return ResourceManager.GetString("ToViewVerificationCodes", resourceCulture);
             }
         }
+        
+        public static string CannotAddAuthenticatorKey {
+            get {
+                return ResourceManager.GetString("CannotAddAuthenticatorKey", resourceCulture);
+            }
+        }
+        
+        public static string ScanQRCode {
+            get {
+                return ResourceManager.GetString("ScanQRCode", resourceCulture);
+            }
+        }
+        
+        public static string CannotScanQRCode {
+            get {
+                return ResourceManager.GetString("CannotScanQRCode", resourceCulture);
+            }
+        }
+        
+        public static string EnterCodeManually {
+            get {
+                return ResourceManager.GetString("EnterCodeManually", resourceCulture);
+            }
+        }
+        
+        public static string AddTotp {
+            get {
+                return ResourceManager.GetString("AddTotp", resourceCulture);
+            }
+        }
     }
 }

src/App/Resources/AppResources.resx

@@ -2257,4 +2257,19 @@
   <data name="ToViewVerificationCodes" xml:space="preserve">
     <value>to view verification codes</value>
   </data>
+  <data name="CannotAddAuthenticatorKey" xml:space="preserve">
+    <value>Cannot add authenticator key? </value>
+  </data>
+  <data name="ScanQRCode" xml:space="preserve">
+    <value>Scan QR Code</value>
+  </data>
+  <data name="CannotScanQRCode" xml:space="preserve">
+    <value>Cannot scan QR Code? </value>
+  </data>
+  <data name="EnterCodeManually" xml:space="preserve">
+    <value>Enter code manually</value>
+  </data>
+  <data name="AddTotp" xml:space="preserve">
+    <value>Add TOTP</value>
+  </data>
 </root>