Edit Username, New Chat Dialog

PolyChat/MainPage.xaml

@@ -20,22 +20,30 @@
             </Grid.RowDefinitions>
             <!-- CONNECTION HEADER -->
             <StackPanel HorizontalAlignment="Stretch">
-                <Grid Margin="0 0 0 8">
+                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0 0 0 8">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="56"/>
+                    </Grid.ColumnDefinitions>
+                    <TextBlock x:Name="textUsername" Text="No Name" VerticalAlignment="Center"/>
+                    <Button Grid.Column="1" Click="OnOpenEditUsernameDialog" Content="Edit" HorizontalAlignment="Stretch"/>
+                </Grid>
+                <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
-                    <TextBlock Margin="0 0 8 0" Text="Connect to"/>
+                    <TextBlock Margin="0 0 8 0" Text="Connect to" Foreground="{ThemeResource SystemColorDisabledTextColor}"/>
                     <TextBlock x:Name="ipAddress" Grid.Column="1"/>
                 </Grid>
-                <TextBox x:Name="inputUsername" Header="Displayed Name" PlaceholderText="Robert Bosch"  Margin="0 0 0 8"/>
+                <Border BorderThickness="1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" Margin="0 8"/>
                 <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="auto"/>
+                        <ColumnDefinition Width="56"/>
                     </Grid.ColumnDefinitions>
                     <TextBlock Text="My Chats" VerticalAlignment="Center"/>
-                    <Button Grid.Column="1" Click="OnOpenNewChatDialog" Content="New"/>
+                    <Button Grid.Column="1" Click="OnOpenNewChatDialog" Content="New" HorizontalAlignment="Stretch"/>
                 </Grid>
             </StackPanel>
             <!-- CHATS LIST -->

PolyChat/MainPage.xaml.cs

@@ -1,4 +1,5 @@
 using PolyChat.Models;
+using PolyChat.Util;
 using PolyChat.Views;
 using System;
 using System.Collections.ObjectModel;
@@ -19,12 +20,13 @@ namespace PolyChat
         private Controller Controller;
         private ObservableCollection<ChatPartner> Partners;
         private ChatPartner selectedPartner;
+        private string username;
         public MainPage()
         {
             this.InitializeComponent();
             Controller = new Controller(this);
-
             Partners = new ObservableCollection<ChatPartner>();
+            //ipAddress.Text = IP.GetCodeFromIP(Controller.GetIP());
         }
 
         public void OnChatPartnerSelected(object sender, RoutedEventArgs e)
@@ -42,7 +44,7 @@ namespace PolyChat
                 DateTime.Now.ToString(),
                 false
             ));
-            Controller.sendMessage(selectedPartner.Code, inputUsername.Text, inputSend.Text);
+            Controller.sendMessage(selectedPartner.Code, username, inputSend.Text);
             // clear input
             inputSend.Text = "";
         }
@@ -53,14 +55,29 @@ namespace PolyChat
             var result = await dialog.ShowAsync();
             if (result == ContentDialogResult.Primary)
             {
-                string ip = dialog.getText();
+                string ip = dialog.getValue();
+                if (IP.ValidateIP(ip))
+                {
                     Controller.Connect(ip);
                     Partners.Add(new ChatPartner(
-                    "NO NAME",
+                        "Connecting...",
                         ip
                     ));
                 }
             }
+        }
+
+        public async void OnOpenEditUsernameDialog(object sender = null, RoutedEventArgs e = null)
+        {
+            EditUsernameDialog dialog = new EditUsernameDialog(username);
+            var result = await dialog.ShowAsync();
+            if (result == ContentDialogResult.Primary)
+            {
+                username = dialog.getValue();
+                if (username.Length == 0) textUsername.Text = "Unknown";
+                else textUsername.Text = username;
+            }
+        }
 
         public void OnIncomingMessage(MSG message)
         {

PolyChat/PolyChat.csproj

@@ -132,6 +132,10 @@
     <Compile Include="Models\Socket.cs" />
     <Compile Include="Controller.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
+    <Compile Include="Util\IP.cs" />
+    <Compile Include="Views\EditUsernameDialog.xaml.cs">
+      <DependentUpon>EditUsernameDialog.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\NewChatDialog.xaml.cs">
       <DependentUpon>NewChatDialog.xaml</DependentUpon>
     </Compile>
@@ -160,6 +164,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\EditUsernameDialog.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\NewChatDialog.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

PolyChat/Util/IP.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Text.RegularExpressions;
+
+namespace PolyChat.Util
+{
+    static class IP
+    {
+        private const string REGEX_IP = @"^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)(\.(?!$)|$)){4}$";
+
+        public static string GetIPfromCode(string code)
+        {
+            return code;
+        }
+
+        public static string GetCodeFromIP(string ip)
+        {
+            string[] arr = ip.Split('.');
+            for (int i = 0; i < arr.Length; i++)
+            {
+                arr[i] = int.Parse(arr[i]).ToString("X");
+                Console.WriteLine(arr[i]);
+            }
+            return ip;
+        }
+
+        public static bool ValidateIP(string ip)
+        {
+            return Regex.IsMatch(ip, REGEX_IP);
+        }
+    }
+}

PolyChat/Views/EditUsernameDialog.xaml

@@ -0,0 +1,21 @@
+<ContentDialog x:Class="PolyChat.Views.EditUsernameDialog"
+               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:local="using:PolyChat.Views"
+               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+               x:Name="ContentDialog"
+               Title="Change Username"
+               PrimaryButtonText="Save"
+               SecondaryButtonText="Cancel"
+               mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto"/>
+            <RowDefinition Height="16"/>
+        </Grid.RowDefinitions>
+        <TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Marco Sattler"/>
+        <TextBlock Grid.Row="1" x:Name="textError" Text="Username cannot be empty" VerticalAlignment="Center" Foreground="{ThemeResource SystemErrorTextColor}"/>
+    </Grid>
+</ContentDialog>

PolyChat/Views/EditUsernameDialog.xaml.cs

@@ -0,0 +1,51 @@
+using PolyChat.Models;
+using PolyChat.Util;
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
+
+namespace PolyChat.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class EditUsernameDialog : ContentDialog
+    {
+        public EditUsernameDialog(string initialValue)
+        {
+            this.InitializeComponent();
+            if (initialValue == null || initialValue.Length == 0) IsSecondaryButtonEnabled = false;
+            else  input.Text = initialValue;
+            validate();
+        }
+
+        public string getValue()
+        {
+            return input.Text;
+        }
+
+        private void OnKeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
+        {
+            validate();
+        }
+
+        private void validate()
+        {
+            if (input.Text.Length == 0)
+            {
+                textError.Visibility = Visibility.Visible;
+                IsPrimaryButtonEnabled = false;
+            }
+            else
+            {
+                textError.Visibility = Visibility.Collapsed;
+                IsPrimaryButtonEnabled = true;
+            }
+        }
+    }
+}

PolyChat/Views/NewChatDialog.xaml

@@ -6,13 +6,17 @@
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                x:Name="ContentDialog"
                Title="Connect to"
-               PrimaryButtonClick="OnConnect"
                PrimaryButtonText="Connect"
-               SecondaryButtonClick="OnClose"
                SecondaryButtonText="Cancel"
                mc:Ignorable="d">
 
     <Grid>
-        <TextBox x:Name="inputIP" PlaceholderText="192.168.1.1" VerticalAlignment="Center"/>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto"/>
+            <RowDefinition Height="auto"/>
+        </Grid.RowDefinitions>
+        <TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Partner Code"/>
+        <TextBlock Grid.Row="1" x:Name="textSuccess" Text="Looking good" VerticalAlignment="Top" Foreground="{ThemeResource SystemAccentColor}" Visibility="Collapsed"/>
+        <TextBlock Grid.Row="1" x:Name="textError" Text="Invalid or empty Code" VerticalAlignment="Top" Foreground="{ThemeResource SystemErrorTextColor}" Visibility="Collapsed"/>
     </Grid>
 </ContentDialog>

PolyChat/Views/NewChatDialog.xaml.cs

@@ -1,9 +1,11 @@
 using PolyChat.Models;
+using PolyChat.Util;
 using System;
 using System.Collections.ObjectModel;
 using System.Linq;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
 
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
@@ -17,19 +19,27 @@ namespace PolyChat.Views
         public NewChatDialog()
         {
             this.InitializeComponent();
+            IsPrimaryButtonEnabled = false;
         }
 
-        public string getText()
+        public string getValue()
         {
-            return inputIP.Text;
+            return input.Text;
         }
 
-        public void OnConnect(ContentDialog sender, ContentDialogButtonClickEventArgs args)
+        private void OnKeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
         {
-        }
+            if (!IP.ValidateIP(IP.GetIPfromCode(input.Text)))
-
-        public void OnClose(ContentDialog sender, ContentDialogButtonClickEventArgs args)
             {
+                textSuccess.Visibility = Visibility.Collapsed;
+                textError.Visibility = Visibility.Visible;
+                IsPrimaryButtonEnabled = false;
+            } else
+            {
+                textSuccess.Visibility = Visibility.Visible;
+                textError.Visibility = Visibility.Collapsed;
+                IsPrimaryButtonEnabled = true;
+            }
         }
     }
 }