ui changes export vault screen for key connector (#1651)

* ui changes export vault screen for key connector

* update label and remove period

src/App/Pages/Settings/ExportVaultPage.xaml

@@ -25,22 +25,27 @@
     </ContentPage.ToolbarItems>
 
     <ScrollView>
-        <StackLayout>
+        <StackLayout
-            <StackLayout StyleClass="box"
+            StyleClass="box"
-                         Spacing="20">
+            Spacing="20">
-                <Frame
+            <Frame
-                    IsVisible="{Binding DisablePrivateVaultPolicyEnabled}"
+                IsVisible="{Binding DisablePrivateVaultPolicyEnabled}"
-                    Padding="10"
+                Padding="10"
-                    Margin="0, 12, 0, 0"
+                Margin="0, 12, 0, 0"
-                    HasShadow="False"
+                HasShadow="False"
-                    BackgroundColor="Transparent"
+                BackgroundColor="Transparent"
-                    BorderColor="Accent">
+                BorderColor="Accent">
-                    <Label
+                <Label
-                        Text="{u:I18n DisablePersonalVaultExportPolicyInEffect}"
+                    Text="{u:I18n DisablePersonalVaultExportPolicyInEffect}"
-                        StyleClass="text-muted, text-sm, text-bold"
+                    StyleClass="text-muted, text-sm, text-bold"
-                        HorizontalTextAlignment="Center" />
+                    HorizontalTextAlignment="Center" />
-                </Frame>
+            </Frame>
-                <StackLayout StyleClass="box-row">
+            <Grid
+                RowSpacing="10"
+                RowDefinitions="70, Auto, Auto">
+                <StackLayout
+                    StyleClass="box-row"
+                    Grid.Row="0">
                     <Label
                         Text="{u:I18n FileFormat}"
                         StyleClass="box-label" />
@@ -52,31 +57,34 @@
                         StyleClass="box-value"
                         IsEnabled="{Binding DisablePrivateVaultPolicyEnabled, Converter={StaticResource inverseBool}}" />
                 </StackLayout>
-                <Grid StyleClass="box-row">
+                <StackLayout
-                    <Grid.RowDefinitions>
+                    StyleClass="box-row"
-                        <RowDefinition Height="Auto" />
+                    Grid.Row="1"
-                        <RowDefinition Height="Auto" />
+                    IsVisible="{Binding UseOTPVerification}">
-                        <RowDefinition Height="*" />
+                    <Label
-                    </Grid.RowDefinitions>
+                        Text="{u:I18n SendVerificationCodeToEmail}"
-                    <Grid.ColumnDefinitions>
+                        StyleClass="box-label"
-                        <ColumnDefinition Width="*" />
+                        LineBreakMode="WordWrap"
-                        <ColumnDefinition Width="Auto" />
+                        Margin="0,0,0,10" />
-                    </Grid.ColumnDefinitions>
                     <Button x:Name="_requestOTP"
-                        Text="{u:I18n RequestOTP}"
+                        Text="{u:I18n SendCode}"
                         Clicked="RequestOTP_Clicked"
                         HorizontalOptions="Fill"
                         VerticalOptions="End"
                         IsEnabled="{Binding DisablePrivateVaultPolicyEnabled, Converter={StaticResource inverseBool}}"
-                        IsVisible="{Binding UseOTPVerification}"
-                        Grid.Row="0"
-                        Grid.ColumnSpan="2"
                         Margin="0,0,0,10"/>
+                </StackLayout>
+                <Grid
+                    StyleClass="box-row"
+                    Grid.Row="2"
+                    RowDefinitions="Auto,Auto,Auto"
+                    ColumnDefinitions="*,Auto"
+                    Padding="0">
                     <Label
                         Text="{Binding SecretName}"
                         StyleClass="box-label"
-                        Grid.Row="1"
+                        Grid.Row="0"
-                        Grid.Column="0" />
+                        Grid.ColumnSpan="2" />
                     <controls:MonoEntry
                         x:Name="_secret"
                         Text="{Binding Secret}"
@@ -85,7 +93,7 @@
                         IsTextPredictionEnabled="False"
                         IsPassword="{Binding ShowPassword, Converter={StaticResource inverseBool}}"
                         IsEnabled="{Binding DisablePrivateVaultPolicyEnabled, Converter={StaticResource inverseBool}}"
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="0"
                         ReturnType="Go"
                         ReturnCommand="{Binding ExportVaultCommand}" />
@@ -93,22 +101,33 @@
                         StyleClass="box-row-button, box-row-button-platform"
                         Text="{Binding ShowPasswordIcon}"
                         Command="{Binding TogglePasswordCommand}"
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         AutomationProperties.IsInAccessibleTree="True"
                         AutomationProperties.Name="{u:I18n ToggleVisibility}"
                         IsVisible="{Binding UseOTPVerification, Converter={StaticResource inverseBool}}"/>
-                </Grid>
-                <StackLayout StyleClass="box-row">
                     <Label
-                        Text="{Binding InstructionText}"
+                        Text="{u:I18n ConfirmYourIdentity}"
-                        StyleClass="box-footer-label, box-footer-label-switch" />
+                        StyleClass="box-footer-label"
-                    <Button Text="{u:I18n ExportVault}"
+                        LineBreakMode="WordWrap"
-                            Clicked="ExportVault_Clicked"
+                        Grid.Row="2"
-                            HorizontalOptions="Fill"
+                        Margin="0,10,0,0"
-                            VerticalOptions="End"
+                        IsVisible="{Binding UseOTPVerification}" />
-                            IsEnabled="{Binding DisablePrivateVaultPolicyEnabled, Converter={StaticResource inverseBool}}"/>
+                </Grid>
-                </StackLayout>
+                
+            </Grid>
+            <StackLayout
+                StyleClass="box-row">
+                <Label
+                    Text="{u:I18n ExportVaultMasterPasswordDescription}"
+                    StyleClass="box-footer-label, box-footer-label-switch"
+                    IsVisible="{Binding UseOTPVerification, Converter={StaticResource inverseBool}}"/>
+                <Button
+                    Text="{u:I18n ExportVault}"
+                    Clicked="ExportVault_Clicked"
+                    HorizontalOptions="Fill"
+                    VerticalOptions="End"
+                    IsEnabled="{Binding DisablePrivateVaultPolicyEnabled, Converter={StaticResource inverseBool}}"/>
             </StackLayout>
         </StackLayout>
     </ScrollView>

src/App/Pages/Settings/ExportVaultPageViewModel.cs

@@ -7,6 +7,7 @@ using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
 using Bit.Core.Enums;
+using Bit.Core.Exceptions;
 #if !FDROID
 using Microsoft.AppCenter.Crashes;
 #endif
@@ -195,7 +196,23 @@ namespace Bit.App.Pages
 
         public async Task RequestOTP()
         {
-            await _apiService.PostAccountRequestOTP();
+            try
+            {
+                await _deviceActionService.ShowLoadingAsync(AppResources.Sending);
+                await _apiService.PostAccountRequestOTP();
+                await _deviceActionService.HideLoadingAsync();
+                _platformUtilsService.ShowToast("success", null, AppResources.CodeSent);
+            }
+            catch (ApiException e)
+            {
+                await _deviceActionService.HideLoadingAsync();
+                if (e?.Error != null)
+                {
+                    await _platformUtilsService.ShowDialogAsync(e.Error.GetSingleMessage(),
+                        AppResources.AnErrorHasOccurred);
+                }
+            }
+
         }
 
         public async void SaveFileSelected(string contentUri, string filename)

src/App/Resources/AppResources.Designer.cs

@@ -2837,9 +2837,21 @@ namespace Bit.App.Resources {
             }
         }
         
-        public static string ExportVaultOTPDescription {
+        public static string SendVerificationCodeToEmail {
             get {
-                return ResourceManager.GetString("ExportVaultOTPDescription", resourceCulture);
+                return ResourceManager.GetString("SendVerificationCodeToEmail", resourceCulture);
+            }
+        }
+        
+        public static string CodeSent {
+            get {
+                return ResourceManager.GetString("CodeSent", resourceCulture);
+            }
+        }
+        
+        public static string ConfirmYourIdentity {
+            get {
+                return ResourceManager.GetString("ConfirmYourIdentity", resourceCulture);
             }
         }
         
@@ -3701,9 +3713,15 @@ namespace Bit.App.Resources {
             }
         }
         
-        public static string RequestOTP {
+        public static string SendCode {
             get {
-                return ResourceManager.GetString("RequestOTP", resourceCulture);
+                return ResourceManager.GetString("SendCode", resourceCulture);
+            }
+        }
+        
+        public static string Sending {
+            get {
+                return ResourceManager.GetString("Sending", resourceCulture);
             }
         }
     }

src/App/Resources/AppResources.resx

@@ -1611,8 +1611,14 @@
   <data name="ExportVaultMasterPasswordDescription" xml:space="preserve">
     <value>Enter your master password to export your vault data.</value>
   </data>
-    <data name="ExportVaultOTPDescription" xml:space="preserve">
+  <data name="SendVerificationCodeToEmail" xml:space="preserve">
-    <value>Enter the verification code to export your vault data.</value>
+    <value>Send a verification code to your email</value>
+  </data>
+  <data name="CodeSent" xml:space="preserve">
+    <value>Code Sent!</value>
+  </data>
+  <data name="ConfirmYourIdentity" xml:space="preserve">
+    <value>Confirm your identity to continue.</value>
   </data>
   <data name="ExportVaultWarning" xml:space="preserve">
     <value>This export contains your vault data in an unencrypted format. You should not store or send the exported file over unsecure channels (such as email). Delete it immediately after you are done using it.</value>
@@ -2084,7 +2090,10 @@
   <data name="InvalidVerificationCode" xml:space="preserve">
     <value>Invalid Verification Code.</value>
   </data>
-    <data name="RequestOTP" xml:space="preserve">
+  <data name="SendCode" xml:space="preserve">
-    <value>Request one-time password</value>
+    <value>Send Code</value>
+  </data>
+  <data name="Sending" xml:space="preserve">
+    <value>Sending</value>
   </data>
 </root>