From c564a343177b1154691293e1d6a9b5ead86f1f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Bispo?= <abispo@bitwarden.com>
Date: Mon, 20 Jun 2022 18:41:50 +0100
Subject: [PATCH] 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          | 115 ++++++++++++++-------
 src/App/Pages/Vault/ScanPage.xaml.cs       |   6 ++
 src/App/Pages/Vault/ScanPageViewModel.cs   |  64 ++++++++++++
 src/App/Resources/AppResources.Designer.cs |  30 ++++++
 src/App/Resources/AppResources.resx        |  15 +++
 5 files changed, 192 insertions(+), 38 deletions(-)
 create mode 100644 src/App/Pages/Vault/ScanPageViewModel.cs

diff --git a/src/App/Pages/Vault/ScanPage.xaml b/src/App/Pages/Vault/ScanPage.xaml
index d90c5a2b7..b7dd30ef0 100644
--- a/src/App/Pages/Vault/ScanPage.xaml
+++ b/src/App/Pages/Vault/ScanPage.xaml
@@ -1,14 +1,25 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<pages:BaseContentPage 
+<?xml version="1.0" encoding="utf-8"?>
+<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}"
-                AutomationId="zxingDefaultOverlay_BottomTextLabel"
+                FormattedText="{Binding ToggleScanModeLabel}"
                 Grid.Column="0"
                 Grid.Row="2"
-                VerticalOptions="Center"
-                HorizontalOptions="Center"
-                TextColor="White" />
+                Margin="0,15"
+                StyleClass="text-sm"
+                VerticalOptions="End"
+                HorizontalOptions="Center" >
+                <Label.GestureRecognizers>
+                    <TapGestureRecognizer Tapped="ToggleScanMode_OnTapped" />
+                </Label.GestureRecognizers>
+            </Label>
         </Grid>
-
     </Grid>
-
-</pages:BaseContentPage>
+</pages:BaseContentPage>
\ No newline at end of file
diff --git a/src/App/Pages/Vault/ScanPage.xaml.cs b/src/App/Pages/Vault/ScanPage.xaml.cs
index 7ae607fe5..56148c14a 100644
--- a/src/App/Pages/Vault/ScanPage.xaml.cs
+++ b/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);
+        }
     }
 }
diff --git a/src/App/Pages/Vault/ScanPageViewModel.cs b/src/App/Pages/Vault/ScanPageViewModel.cs
new file mode 100644
index 000000000..d7b80067c
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/src/App/Resources/AppResources.Designer.cs b/src/App/Resources/AppResources.Designer.cs
index 4ce17e622..011964cc5 100644
--- a/src/App/Resources/AppResources.Designer.cs
+++ b/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);
+            }
+        }
     }
 }
diff --git a/src/App/Resources/AppResources.resx b/src/App/Resources/AppResources.resx
index 75a400dd3..ca48379ef 100644
--- a/src/App/Resources/AppResources.resx
+++ b/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>