DodoSSH/src/DodoSSH.Client.Android/Views/ConnectPrompt.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
             xmlns:views="using:DodoSSH.Client.Android.Views"
             x:Class="DodoSSH.Client.Android.Views.ConnectPrompt"
             x:DataType="vm:MainWindowViewModel">

  <!--
    The phone's half of the desktop's empty-terminal prompt, drawn on Connections while nothing is open: the
    same two lines, over the same view-model state — MainWindowViewModel.PromptText and its siblings — so a
    name or an address typed here is read, refused and dialled exactly as it is on the desktop. See the
    desktop's ConnectPrompt.axaml for the reasoning; what is here is only what a phone changes.

    THREE THINGS A PHONE CHANGES.

    No Tab and no Escape. The matches under the first line are buttons sized for a thumb instead of a
    completion list for a key, and a tap on one takes it outright — completing to a name and then pressing
    CONNECT is two taps for what one already says. The way off the password line is BACK beside CONNECT,
    and the system back gesture, which PhoneShell routes to the same command.

    A CONNECT button, because the software keyboard's own return key may commit or may only close the
    keyboard — that is the IME's choice, as the files screen's GO button already says. Enter is still bound,
    for every keyboard that does send it.

    The password's label on its own line. ssh's wording — "deploy@build.internal:2222's password:" — is a
    third of a phone's width before anything is typed, so the box goes under it rather than beside it.
  -->
  <Border Background="{StaticResource Pane}" BorderBrush="{StaticResource Border}" BorderThickness="1"
          CornerRadius="12" Padding="14,12">
    <StackPanel Spacing="6">

      <TextBlock Classes="mono" FontSize="12" Foreground="{StaticResource TextFaint}" TextWrapping="Wrap"
                 Text="Type a saved host's name, or user@host[:port] for a machine that is not saved." />

      <!-- ============ what to connect to ============ -->
      <Grid ColumnDefinitions="Auto,*" Margin="0,4,0,0">
        <TextBlock Grid.Column="0" Classes="mono" FontSize="14" FontWeight="Bold"
                   Foreground="{StaticResource AccentText}" Text="connect to:" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" x:Name="Target" Classes="prompt" Margin="8,0,0,0"
                 AutomationProperties.Name="Connect to"
                 Text="{Binding PromptText}" IsReadOnly="{Binding IsPromptAskingForPassword}">
          <TextBox.KeyBindings>
            <KeyBinding Gesture="Enter" Command="{Binding SubmitPromptCommand}" />
          </TextBox.KeyBindings>
        </TextBox>
      </Grid>

      <!-- The saved hosts that match so far, best first. A tap takes one: it connects, or asks its password. -->
      <ItemsControl ItemsSource="{Binding PromptMatches}" IsVisible="{Binding ShowsPromptMatches}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <WrapPanel />
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
          <DataTemplate x:DataType="vm:HostRowViewModel">
            <Button Classes="chiptoggle" MinHeight="44" Margin="0,0,6,6"
                    Command="{Binding $parent[views:ConnectPrompt].((vm:MainWindowViewModel)DataContext).ChoosePromptMatchCommand}"
                    CommandParameter="{Binding}">
              <TextBlock Classes="mono" FontSize="13" Text="{Binding Label}" />
            </Button>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>

      <!-- ============ the password, when one is needed ============ -->
      <StackPanel x:Name="PasswordLine" Spacing="0" IsVisible="{Binding IsPromptAskingForPassword}">
        <TextBlock Classes="mono" FontSize="13" Foreground="{StaticResource Text}" TextWrapping="Wrap"
                   Text="{Binding PromptPasswordLabel}" />
        <!--
          Classes="secret" for what it tells the software keyboard, not only for the dots: see Phone.axaml.
        -->
        <TextBox x:Name="Password" Classes="prompt secret" AutomationProperties.Name="Password"
                 Text="{Binding PromptPassword}">
          <TextBox.KeyBindings>
            <KeyBinding Gesture="Enter" Command="{Binding SubmitPromptCommand}" />
          </TextBox.KeyBindings>
        </TextBox>
      </StackPanel>

      <TextBlock Classes="mono" FontSize="12" TextWrapping="Wrap" Foreground="{StaticResource WarnText}"
                 Text="{Binding PromptRefusal}" IsVisible="{Binding HasPromptRefusal}" />

      <!--
        CONNECT always; BACK only on the password line, where there is a line to go back from. Side by side,
        CONNECT on the right where the thumb ends up, the order the hosts screen's own panels use.
      -->
      <Grid ColumnDefinitions="*,8,*" Margin="0,6,0,0">
        <Button Grid.Column="0" Classes="secondary" Height="44" Content="BACK"
                Command="{Binding CancelPromptCommand}" IsVisible="{Binding IsPromptAskingForPassword}" />
        <Button Grid.Column="2" Classes="primary" Height="44" Content="CONNECT"
                Command="{Binding SubmitPromptCommand}" />
      </Grid>

    </StackPanel>
  </Border>

</UserControl>