Wino-Mail/Wino.Core.UWP/Dialogs/NewAccountDialog.xaml

<ContentDialog
    x:Class="Wino.Core.UWP.Dialogs.NewAccountDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:accounts="using:Wino.Core.Domain.Models.Accounts"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    Title="{x:Bind domain:Translator.NewAccountDialog_Title}"
    HorizontalContentAlignment="Stretch"
    DefaultButton="Primary"
    IsPrimaryButtonEnabled="False"
    Opened="DialogOpened"
    PrimaryButtonClick="CreateClicked"
    PrimaryButtonText="{x:Bind domain:Translator.Buttons_CreateAccount}"
    SecondaryButtonClick="CancelClicked"
    SecondaryButtonText="{x:Bind domain:Translator.Buttons_Cancel}"
    Style="{StaticResource WinoDialogStyle}"
    mc:Ignorable="d">

    <ContentDialog.Resources>
        <DataTemplate x:Key="NewMailProviderTemplate" x:DataType="accounts:ProviderDetail">
            <Grid Margin="0,8" Padding="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image
                    Width="35"
                    Height="35"
                    Source="{x:Bind ProviderImage}" />
                <StackPanel
                    Grid.Column="1"
                    Margin="12,0"
                    VerticalAlignment="Center"
                    Spacing="2">
                    <TextBlock FontWeight="Bold" Text="{x:Bind Name}" />
                    <TextBlock Text="{x:Bind Description}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ContentDialog.Resources>

    <Grid MinWidth="400" RowSpacing="12">
        <Grid Visibility="{x:Bind IsProviderSelectionVisible, Mode=OneWay}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!--  Account Name  -->

            <Grid ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <TextBox
                    x:Name="AccountNameTextbox"
                    Header="{x:Bind domain:Translator.NewAccountDialog_AccountName}"
                    PlaceholderText="{x:Bind domain:Translator.NewAccountDialog_AccountNamePlaceholder}"
                    TextChanged="InputChanged" />

                <Button Grid.Column="1" VerticalAlignment="Bottom">
                    <Grid>
                        <Ellipse
                            x:Name="SelectedColorEllipse"
                            Width="16"
                            Height="16" />

                        <TextBlock x:Name="PickColorTextblock" Text="{x:Bind domain:Translator.CalendarDisplayOptions_Color}" />
                    </Grid>

                    <Button.Flyout>
                        <Flyout Placement="TopEdgeAlignedLeft">
                            <GridView
                                Width="150"
                                ItemTemplate="{StaticResource AccountColorTemplate}"
                                ItemsSource="{x:Bind AvailableColors, Mode=OneWay}"
                                SelectedItem="{x:Bind SelectedColor, Mode=TwoWay}" />
                        </Flyout>
                    </Button.Flyout>
                </Button>

            </Grid>


            <ListView
                Grid.Row="2"
                Margin="0,12"
                Padding="0"
                ItemTemplate="{StaticResource NewMailProviderTemplate}"
                ItemsSource="{x:Bind Providers}"
                SelectedItem="{x:Bind SelectedMailProvider, Mode=TwoWay}"
                SelectionMode="Single" />
        </Grid>

        <!--  Known special IMAP login details.  -->
        <Grid RowSpacing="12" Visibility="{x:Bind IsSpecialImapServerPartVisible, Mode=OneWay}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Button Click="BackClicked">
                <Button.Content>
                    <Viewbox Width="16">
                        <PathIcon Data="F1 M 20 9.375 C 20 9.544271 19.93815 9.690756 19.814453 9.814453 C 19.690754 9.938151 19.54427 10 19.375 10 L 2.138672 10 L 9.814453 17.685547 C 9.93815 17.809244 10 17.955729 10 18.125 C 10 18.294271 9.93815 18.440756 9.814453 18.564453 C 9.690755 18.68815 9.544271 18.75 9.375 18.75 C 9.205729 18.75 9.059244 18.68815 8.935547 18.564453 L 0.214844 9.84375 C 0.143229 9.772136 0.089518 9.700521 0.053711 9.628906 C 0.017904 9.557292 0 9.472656 0 9.375 C 0 9.277344 0.017904 9.192709 0.053711 9.121094 C 0.089518 9.049479 0.143229 8.977865 0.214844 8.90625 L 8.935547 0.185547 C 9.059244 0.06185 9.205729 0 9.375 0 C 9.544271 0 9.690755 0.06185 9.814453 0.185547 C 9.93815 0.309246 10 0.45573 10 0.625 C 10 0.794271 9.93815 0.940756 9.814453 1.064453 L 2.138672 8.75 L 19.375 8.75 C 19.54427 8.75 19.690754 8.81185 19.814453 8.935547 C 19.93815 9.059245 20 9.205729 20 9.375 Z " />
                    </Viewbox>
                </Button.Content>
            </Button>

            <Image
                Width="150"
                Height="50"
                HorizontalAlignment="Center"
                Source="{x:Bind SelectedMailProvider.ProviderImage, Mode=OneWay}" />

            <TextBox
                x:Name="DisplayNameTextBox"
                Grid.Row="1"
                Header="Display Name"
                PlaceholderText="eg. John Doe"
                TextChanged="InputChanged" />

            <TextBox
                x:Name="SpecialImapAddress"
                Grid.Row="2"
                Header="E-mail Address"
                PlaceholderText="eg. johndoe@testmail.com"
                TextChanged="InputChanged" />

            <PasswordBox
                x:Name="AppSpecificPassword"
                Grid.Row="3"
                Header="App-Specific Password"
                PasswordChanged="ImapPasswordChanged" />

            <HyperlinkButton
                Grid.Row="4"
                HorizontalAlignment="Right"
                Click="AppSpecificHelpButtonClicked"
                Content="How do I get app-specific password?" />
        </Grid>
    </Grid>
</ContentDialog>