bb-avnui: update Avalonia-based Bitbucket UI

Update the Avalonia-based UI for Bitbucket authentication to use a
tabbed interface, showing each authentication mode in a separate tab.
The new "credentials" prompt can offer and serve all authentication
modes in a simpler way that pushes users who can to authenticate using a
more secure method (where we don't capture the user/pass).

Author: mjcheetham

src/shared/Atlassian.Bitbucket.UI.Avalonia/Commands/OAuthCommandImpl.cs

@@ -6,8 +6,24 @@
         x:Class="Atlassian.Bitbucket.UI.Controls.TesterWindow"
         Title="Bitbucket Authentication Dialog Tester"
         Height="240" Width="420" CanResize="False">
-    <DockPanel>
-        <Button Content="Show Credentials Dialog" Padding="10" Click="ShowCredentials" />
-        <Button Content="Show OAuth Dialog" Padding="10" Click="ShowOAuth" />
-    </DockPanel>
+    <StackPanel Margin="10">
+        <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*">
+            <Label Grid.Row="0" Grid.Column="0"
+                   Content="Auth Modes" />
+            <StackPanel Grid.Row="0" Grid.Column="1"
+                        Orientation="Horizontal" VerticalAlignment="Center">
+                <CheckBox Content="OAuth" x:Name="showOAuth" MinWidth="90" IsChecked="True" />
+                <CheckBox Content="Basic" x:Name="showBasic" MinWidth="80" IsChecked="True" />
+            </StackPanel>
+            <Label Grid.Row="1" Grid.Column="0"
+                   Content="URL" />
+            <TextBox Grid.Row="1" Grid.Column="1"
+                     x:Name="url" />
+            <Label Grid.Row="2" Grid.Column="0"
+                   Content="Username" />
+            <TextBox Grid.Row="2" Grid.Column="1"
+                     x:Name="username" />
+        </Grid>
+        <Button Classes="accent" Content="Show" Click="ShowCredentials" />
+    </StackPanel>
 </Window>

src/shared/Atlassian.Bitbucket.UI.Avalonia/Controls/TesterWindow.axaml

@@ -1,3 +1,4 @@
+using System;
 using Atlassian.Bitbucket.UI.ViewModels;
 using Atlassian.Bitbucket.UI.Views;
 using Avalonia;
@@ -53,17 +54,17 @@ private void ShowCredentials(object sender, RoutedEventArgs e)
         {
             var vm = new CredentialsViewModel(_environment)
             {
-                ShowOAuth = true
+                ShowOAuth = this.FindControl<CheckBox>("showOAuth").IsChecked ?? false,
+                ShowBasic = this.FindControl<CheckBox>("showBasic").IsChecked ?? false,
+                UserName = this.FindControl<TextBox>("username").Text
             };
-            var view = new CredentialsView();
-            var window = new DialogWindow(view) {DataContext = vm};
-            window.ShowDialog(this);
-        }
 
-        private void ShowOAuth(object sender, RoutedEventArgs e)
-        {
-            var vm = new OAuthViewModel(_environment);
-            var view = new OAuthView();
+            if (Uri.TryCreate(this.FindControl<TextBox>("url").Text, UriKind.Absolute, out Uri uri))
+            {
+                vm.Url = uri;
+            }
+
+            var view = new CredentialsView();
             var window = new DialogWindow(view) {DataContext = vm};
             window.ShowDialog(this);
         }

src/shared/Atlassian.Bitbucket.UI.Avalonia/Controls/TesterWindow.axaml.cs

@@ -50,7 +50,6 @@ private static void AppMain(object o)
             using (var app = new HelperApplication(context))
             {
                 app.RegisterCommand(new CredentialsCommandImpl(context));
-                app.RegisterCommand(new OAuthCommandImpl(context));
 
                 int exitCode = app.RunAsync(args)
                     .ConfigureAwait(false)

src/shared/Atlassian.Bitbucket.UI.Avalonia/Program.cs

@@ -3,50 +3,79 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="clr-namespace:Atlassian.Bitbucket.UI.ViewModels;assembly=Atlassian.Bitbucket.UI.Shared"
+             xmlns:converters="clr-namespace:GitCredentialManager.UI.Converters;assembly=gcmcoreuiavn"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Atlassian.Bitbucket.UI.Views.CredentialsView">
     <Design.DataContext>
         <vm:CredentialsViewModel/>
     </Design.DataContext>
     <DockPanel LastChildFill="True">
         <StackPanel DockPanel.Dock="Bottom">
-            <Button HorizontalAlignment="Center" Margin="0,30,0,10"
+            <Button HorizontalAlignment="Center" Margin="0,0,0,10"
                     Classes="hyperlink"
                     Command="{Binding ForgotPasswordCommand}"
                     Content="Can't log in?"/>
-            <Button HorizontalAlignment="Center" Margin="0,0,0,10"
+            <Button HorizontalAlignment="Center" Margin="0,0,0,8"
                     Classes="hyperlink"
                     Command="{Binding SignUpCommand}"
                     Content="Sign up for an account" />
         </StackPanel>
 
-        <StackPanel DockPanel.Dock="Top" Margin="0,0,0,30">
-            <Image HorizontalAlignment="Center" Source="/Assets/atlassian-logo.png" />
-            <TextBlock HorizontalAlignment="Center" Text="Log in to your account"/>
+        <StackPanel DockPanel.Dock="Top">
+            <Image HorizontalAlignment="Center" Source="/Assets/atlassian-logo.png" Height="90" />
+            <TextBlock HorizontalAlignment="Center" Text="Log in to your account" Margin="0,-10,0,0" />
             <TextBlock HorizontalAlignment="Center" Text="{Binding Url}"
                        IsVisible="{Binding Url, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                        Margin="0,10,0,0"/>
         </StackPanel>
 
-        <StackPanel Width="288">
-            <TextBox x:Name="userNameTextBox" Margin="0,0,0,10"
-                     HorizontalAlignment="Stretch"
-                     Watermark="Email or username"
-                     Text="{Binding UserName}" />
-            <TextBox x:Name="passwordTextBox" Margin="0,0,0,20"
-                     HorizontalAlignment="Stretch"
-                     Watermark="Password" PasswordChar="●"
-                     Text="{Binding Password}" />
-            <Button IsDefault="True" Margin="0,0,0,10"
-                    HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
-                    Command="{Binding LoginCommand}"
-                    Content="Continue" Width="140" Height="40"
-                    Classes="accent" />
-            <Button HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
-                    IsVisible="{Binding ShowOAuth}"
-                    Command="{Binding OAuthCommand}"
-                    Classes="hyperlink"
-                    Content="Sign in with OAuth" />
-        </StackPanel>
+        <TabControl x:Name="authModesTabControl"
+                    VerticalContentAlignment="Center"
+                    AutoScrollToSelectedItem="True"
+                    Width="288"
+                    Margin="0,20">
+            <TabControl.Styles>
+                <Style Selector="TabItem">
+                    <Setter Property="MinHeight" Value="30" />
+                </Style>
+                <Style Selector="DockPanel > ItemsPresenter > WrapPanel">
+                    <Setter Property="HorizontalAlignment" Value="Center"/>
+                </Style>
+            </TabControl.Styles>
+
+            <TabItem IsVisible="{Binding ShowOAuth}">
+                <TabItem.Header>
+                    <TextBlock Text="Browser" FontSize="12" />
+                </TabItem.Header>
+                <StackPanel Margin="0,15">
+                    <Button x:Name="oauthLoginButton" IsDefault="True"
+                            HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
+                            Command="{Binding OAuthCommand}"
+                            Classes="accent" Height="40" Padding="15,5"
+                            Content="Sign in with your browser" />
+                </StackPanel>
+            </TabItem>
+
+            <TabItem IsVisible="{Binding ShowBasic}">
+                <TabItem.Header>
+                    <TextBlock Text="Password/Token" FontSize="12" />
+                </TabItem.Header>
+                <StackPanel Margin="0,15">
+                    <TextBox x:Name="userNameTextBox" Margin="0,0,0,10"
+                             HorizontalAlignment="Stretch"
+                             Watermark="Email or username"
+                             Text="{Binding UserName}" />
+                    <TextBox x:Name="passwordTextBox" Margin="0,0,0,10"
+                             HorizontalAlignment="Stretch"
+                             Watermark="Password or token" PasswordChar="●"
+                             Text="{Binding Password}" />
+                    <Button IsDefault="True"
+                            HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
+                            Command="{Binding LoginCommand}"
+                            Content="Sign in" Width="140" Height="40"
+                            Classes="accent" />
+                </StackPanel>
+            </TabItem>
+        </TabControl>
     </DockPanel>
 </UserControl>

src/shared/Atlassian.Bitbucket.UI.Avalonia/Views/CredentialsView.axaml

@@ -7,6 +7,8 @@ namespace Atlassian.Bitbucket.UI.Views
 {
     public class CredentialsView : UserControl, IFocusable
     {
+        private TabControl _tabControl;
+        private Button _oauthLoginButton;
         private TextBox _userNameTextBox;
         private TextBox _passwordTextBox;
 
@@ -19,6 +21,8 @@ private void InitializeComponent()
         {
             AvaloniaXamlLoader.Load(this);
 
+            _tabControl = this.FindControl<TabControl>("authModesTabControl");
+            _oauthLoginButton = this.FindControl<Button>("oauthLoginButton");
             _userNameTextBox = this.FindControl<TextBox>("userNameTextBox");
             _passwordTextBox = this.FindControl<TextBox>("passwordTextBox");
         }
@@ -30,13 +34,22 @@ public void SetFocus()
                 return;
             }
 
-            if (string.IsNullOrWhiteSpace(vm.UserName))
+            if (vm.ShowOAuth)
             {
-                _userNameTextBox.Focus();
+                _tabControl.SelectedIndex = 0;
+                _oauthLoginButton.Focus();
             }
-            else
+            else if (vm.ShowBasic)
             {
-                _passwordTextBox.Focus();
+                _tabControl.SelectedIndex = 1;
+                if (string.IsNullOrWhiteSpace(vm.UserName))
+                {
+                    _userNameTextBox.Focus();
+                }
+                else
+                {
+                    _passwordTextBox.Focus();
+                }
             }
         }
     }

src/shared/Atlassian.Bitbucket.UI.Avalonia/Views/CredentialsView.axaml.cs

@@ -7,5 +7,8 @@ public static class BoolConvertersEx
     {
         public static readonly IMultiValueConverter Or =
             new FuncMultiValueConverter<bool,bool>(x => x.Aggregate(false, (a, b) => a || b));
+
+        public static readonly IMultiValueConverter And =
+            new FuncMultiValueConverter<bool,bool>(x => x.Aggregate(true, (a, b) => a && b));
     }
 }