Burak Kaan Köse
274 lines
12 KiB
XML
274 lines
12 KiB
XML
<ContentDialog
|
|
x:Class="Wino.Dialogs.WinoAccountLoginDialog"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:domain="using:Wino.Core.Domain"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
Title="{x:Bind domain:Translator.WinoAccount_LoginDialog_Title}"
|
|
PrimaryButtonClick="LoginClicked"
|
|
PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
|
|
PrimaryButtonText="{x:Bind domain:Translator.Buttons_SignIn}"
|
|
SecondaryButtonText="{x:Bind domain:Translator.Buttons_Cancel}"
|
|
Style="{StaticResource WinoDialogStyle}"
|
|
mc:Ignorable="d">
|
|
|
|
<ContentDialog.Resources>
|
|
<x:Double x:Key="ContentDialogMinWidth">520</x:Double>
|
|
<x:Double x:Key="ContentDialogMaxWidth">520</x:Double>
|
|
</ContentDialog.Resources>
|
|
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
|
<StackPanel Spacing="20">
|
|
|
|
<!-- Hero illustration area -->
|
|
<Border
|
|
Height="140"
|
|
CornerRadius="12">
|
|
<Border.Background>
|
|
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
|
<GradientStop Offset="0" Color="#1A6EE7B7" />
|
|
<GradientStop Offset="0.5" Color="#2038BDF8" />
|
|
<GradientStop Offset="1" Color="#1A818CF8" />
|
|
</LinearGradientBrush>
|
|
</Border.Background>
|
|
<Canvas>
|
|
<!-- Background decorative circles -->
|
|
<Ellipse
|
|
Canvas.Left="340"
|
|
Canvas.Top="-20"
|
|
Width="100"
|
|
Height="100"
|
|
Opacity="0.15">
|
|
<Ellipse.Fill>
|
|
<RadialGradientBrush>
|
|
<GradientStop Offset="0" Color="#38BDF8" />
|
|
<GradientStop Offset="1" Color="Transparent" />
|
|
</RadialGradientBrush>
|
|
</Ellipse.Fill>
|
|
</Ellipse>
|
|
<Ellipse
|
|
Canvas.Left="20"
|
|
Canvas.Top="80"
|
|
Width="80"
|
|
Height="80"
|
|
Opacity="0.1">
|
|
<Ellipse.Fill>
|
|
<RadialGradientBrush>
|
|
<GradientStop Offset="0" Color="#6EE7B7" />
|
|
<GradientStop Offset="1" Color="Transparent" />
|
|
</RadialGradientBrush>
|
|
</Ellipse.Fill>
|
|
</Ellipse>
|
|
|
|
<!-- Shield with lock illustration -->
|
|
<Canvas Canvas.Left="190" Canvas.Top="16">
|
|
<!-- Shield shape -->
|
|
<Path
|
|
Data="M46 4 L82 18 L82 48 C82 66 65 80 46 84 C27 80 10 66 10 48 L10 18 Z"
|
|
Opacity="0.9">
|
|
<Path.Fill>
|
|
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
|
<GradientStop Offset="0" Color="#6EE7B7" />
|
|
<GradientStop Offset="1" Color="#059669" />
|
|
</LinearGradientBrush>
|
|
</Path.Fill>
|
|
</Path>
|
|
<!-- Inner shield -->
|
|
<Path
|
|
Data="M46 12 L76 24 L76 48 C76 64 62 76 46 80 C30 76 16 64 16 48 L16 24 Z"
|
|
Opacity="0.5">
|
|
<Path.Fill>
|
|
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Offset="0" Color="#A7F3D0" />
|
|
<GradientStop Offset="1" Color="#34D399" />
|
|
</LinearGradientBrush>
|
|
</Path.Fill>
|
|
</Path>
|
|
<!-- Lock body -->
|
|
<Rectangle
|
|
Canvas.Left="32"
|
|
Canvas.Top="44"
|
|
Width="28"
|
|
Height="20"
|
|
Fill="White"
|
|
RadiusX="5"
|
|
RadiusY="5" />
|
|
<!-- Lock shackle -->
|
|
<Path
|
|
Data="M38 44 L38 38 A8 8 0 0 1 54 38 L54 44"
|
|
Stroke="White"
|
|
StrokeEndLineCap="Round"
|
|
StrokeStartLineCap="Round"
|
|
StrokeThickness="4"
|
|
Fill="Transparent" />
|
|
<!-- Keyhole -->
|
|
<Ellipse
|
|
Canvas.Left="42"
|
|
Canvas.Top="49"
|
|
Width="8"
|
|
Height="8"
|
|
Fill="#059669" />
|
|
<Rectangle
|
|
Canvas.Left="44"
|
|
Canvas.Top="55"
|
|
Width="4"
|
|
Height="6"
|
|
Fill="#059669"
|
|
RadiusX="2"
|
|
RadiusY="2" />
|
|
</Canvas>
|
|
|
|
<!-- Decorative sparkles -->
|
|
<Ellipse
|
|
Canvas.Left="150"
|
|
Canvas.Top="30"
|
|
Width="6"
|
|
Height="6"
|
|
Fill="{ThemeResource AccentTextFillColorPrimaryBrush}"
|
|
Opacity="0.5" />
|
|
<Ellipse
|
|
Canvas.Left="320"
|
|
Canvas.Top="50"
|
|
Width="5"
|
|
Height="5"
|
|
Fill="#6EE7B7"
|
|
Opacity="0.6" />
|
|
<Ellipse
|
|
Canvas.Left="130"
|
|
Canvas.Top="100"
|
|
Width="4"
|
|
Height="4"
|
|
Fill="#38BDF8"
|
|
Opacity="0.4" />
|
|
<Ellipse
|
|
Canvas.Left="360"
|
|
Canvas.Top="100"
|
|
Width="4"
|
|
Height="4"
|
|
Fill="#A78BFA"
|
|
Opacity="0.5" />
|
|
</Canvas>
|
|
</Border>
|
|
|
|
<!-- Benefits cards -->
|
|
<StackPanel
|
|
x:Name="BenefitsPanel"
|
|
Spacing="8">
|
|
<Border
|
|
Padding="14"
|
|
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
|
CornerRadius="12">
|
|
<Grid ColumnSpacing="12">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
</Grid.ColumnDefinitions>
|
|
<Border
|
|
Width="36"
|
|
Height="36"
|
|
Background="{ThemeResource AccentFillColorDefaultBrush}"
|
|
CornerRadius="8"
|
|
Opacity="0.15" />
|
|
<FontIcon
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
FontSize="16"
|
|
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
|
|
Glyph="" />
|
|
<StackPanel Grid.Column="1" Spacing="2">
|
|
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_BenefitsTitle}" />
|
|
<TextBlock
|
|
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
|
Style="{StaticResource CaptionTextBlockStyle}"
|
|
Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_BenefitsDescription}"
|
|
TextWrapping="WrapWholeWords" />
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<Border
|
|
Padding="14"
|
|
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
|
CornerRadius="12">
|
|
<Grid ColumnSpacing="12">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
</Grid.ColumnDefinitions>
|
|
<Border
|
|
Width="36"
|
|
Height="36"
|
|
Background="{ThemeResource AccentFillColorDefaultBrush}"
|
|
CornerRadius="8"
|
|
Opacity="0.15" />
|
|
<FontIcon
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
FontSize="16"
|
|
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
|
|
Glyph="" />
|
|
<StackPanel Grid.Column="1" Spacing="2">
|
|
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_DifferenceTitle}" />
|
|
<TextBlock
|
|
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
|
Style="{StaticResource CaptionTextBlockStyle}"
|
|
Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_DifferenceDescription}"
|
|
TextWrapping="WrapWholeWords" />
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
</StackPanel>
|
|
|
|
<!-- Input fields -->
|
|
<StackPanel Spacing="12">
|
|
<TextBox
|
|
x:Name="EmailTextBox"
|
|
Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
|
|
KeyDown="EmailTextBox_KeyDown"
|
|
PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
|
|
TextChanging="InputChanged" />
|
|
|
|
<StackPanel x:Name="PasswordPanel">
|
|
<PasswordBox
|
|
x:Name="PasswordBox"
|
|
Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
|
|
KeyDown="PasswordBox_KeyDown"
|
|
PasswordChanged="InputChanged" />
|
|
</StackPanel>
|
|
|
|
<Border
|
|
x:Name="ForgotPasswordInfoPanel"
|
|
Padding="14"
|
|
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
|
CornerRadius="12"
|
|
Visibility="Collapsed">
|
|
<TextBlock
|
|
Text="{x:Bind domain:Translator.WinoAccount_ForgotPasswordDialog_Description}"
|
|
TextWrapping="WrapWholeWords" />
|
|
</Border>
|
|
</StackPanel>
|
|
|
|
<HyperlinkButton
|
|
x:Name="ModeToggleButton"
|
|
HorizontalAlignment="Left"
|
|
Click="ModeToggleButton_Click"
|
|
Content="{x:Bind domain:Translator.WinoAccount_LoginDialog_ForgotPasswordLink}" />
|
|
|
|
<ProgressRing
|
|
x:Name="BusyRing"
|
|
Width="20"
|
|
Height="20"
|
|
HorizontalAlignment="Left"
|
|
IsActive="False"
|
|
Visibility="Collapsed" />
|
|
|
|
<TextBlock
|
|
x:Name="ErrorTextBlock"
|
|
Foreground="{ThemeResource SystemFillColorCriticalBrush}"
|
|
TextWrapping="WrapWholeWords"
|
|
Visibility="Collapsed" />
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</ContentDialog>
|