Episode 27: Login Page Design

Author: LetsCreateSeries

TimeTrackerTutorial.Android/Properties/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.letscreateseries.timetrackertutorial">
-	<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
+	<uses-sdk android:minSdkVersion="25" android:targetSdkVersion="28" />
 	<application android:label="TimeTrackerTutorial.Android"></application>
 	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 	<uses-permission android:name="android.permission.INTERNET" />

TimeTrackerTutorial/PageModels/LoginPageModel.cs

@@ -1,7 +1,9 @@
 using System;
 using TimeTrackerTutorial.PageModels.Base;
+using TimeTrackerTutorial.Services.Account;
 using TimeTrackerTutorial.Services.Navigation;
 using TimeTrackerTutorial.ViewModels;
+using TimeTrackerTutorial.ViewModels.Buttons;
 using Xamarin.Forms;
 
 namespace TimeTrackerTutorial.PageModels
@@ -18,13 +20,43 @@ public string Icon
         public LoginEntryViewModel EmailEntryViewModel { get; set; }
         public LoginEntryViewModel PasswordEntryViewModel { get; set; }
 
+        public ButtonModel ForgotPasswordModel { get; set; }
+        public ButtonModel LogInModel { get; set; }
+        public ButtonModel UsePhoneModel { get; set; }
+
+        private IAccountService _accountService;
         private INavigationService _navigationService;
 
-        public LoginPageModel(INavigationService navigationService)
+        public LoginPageModel(INavigationService navigationService,
+            IAccountService accountService)
         {
+            _accountService = accountService;
             _navigationService = navigationService;
             EmailEntryViewModel = new LoginEntryViewModel("email", false);
             PasswordEntryViewModel = new LoginEntryViewModel("password", true);
+
+            ForgotPasswordModel = new ButtonModel("forgot password", OnForgotPassword);
+            LogInModel = new ButtonModel("LOG IN", OnLogin);
+            UsePhoneModel = new ButtonModel("USE PHONE NUMBER", GoToPhoneLogin);
+        }
+
+        private async void OnLogin()
+        {
+            var loginAttempt = await _accountService.LoginAsync(EmailEntryViewModel.Text, PasswordEntryViewModel.Text);
+            if (loginAttempt)
+            {
+                // navigate to the Dashboard.
+                await _navigationService.NavigateToAsync<DashboardPageModel>();
+            }
+            else
+            {
+                // TODO: Display an Alert for Failure!
+            }
+        }
+
+        private void OnForgotPassword()
+        {
+
         }
 
         private void GoToPhoneLogin()

TimeTrackerTutorial/Pages/LoginPage.xaml

@@ -5,20 +5,31 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:views="clr-namespace:TimeTrackerTutorial.Views" mc:Ignorable="d"
         NavigationPage.HasNavigationBar="False"
+        xmlns:buttons="clr-namespace:TimeTrackerTutorial.Views.Buttons"
         xmlns:skViews="clr-namespace:TimeTrackerTutorial.Views.SKViews"
         x:Class="TimeTrackerTutorial.Pages.LoginPage">
     <ContentPage.Content>
         <Grid>
             <skViews:RectGradientView StartColor="{StaticResource GradientStartColor}"
                     EndColor="{StaticResource GradientEndColor}"
                     VerticalOptions="FillAndExpand" />
-            <StackLayout>
+            <StackLayout WidthRequest="220" HorizontalOptions="Center">
                 <!-- App Icon -->
                 <Image WidthRequest="200" Aspect="AspectFit"
-                        HorizontalOptions="Center" Margin="20,80,20,20"
+                        VerticalOptions="EndAndExpand"
+                        HorizontalOptions="Center" Margin="20,0,20,40"
                         Source="history" />
                 <views:LoginEntryView BindingContext="{Binding EmailEntryViewModel}" />
                 <views:LoginEntryView BindingContext="{Binding PasswordEntryViewModel}" />
+
+                <buttons:BindableButton BackgroundColor="Transparent"
+                        TextColor="White" FontFamily="Nunito-Regular"
+                        BindingContext="{Binding ForgotPasswordModel}"
+                        HorizontalOptions="End" WidthRequest="140" />
+                <buttons:BindableButton BindingContext="{Binding LogInModel}" />
+                <buttons:BindableButton BindingContext="{Binding UsePhoneModel}"
+                        BackgroundColor="Transparent" TextColor="White"
+                        VerticalOptions="StartAndExpand" />
             </StackLayout>
         </Grid>
     </ContentPage.Content>

TimeTrackerTutorial/Views/Buttons/BindableButton.xaml

@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<Button xmlns="http://xamarin.com/schemas/2014/forms" 
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d"
-        Text="{Binding Text}"
-        IsVisible="{Binding IsVisible}"
-        IsEnabled="{Binding IsEnabled}"
-        Command="{Binding Command}"
-             x:Class="TimeTrackerTutorial.Views.Buttons.BindableButton" />
+<Button xmlns="http://xamarin.com/schemas/2014/forms"
+        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        mc:Ignorable="d" FontFamily="Nunito-ExtraBold" BackgroundColor="White"
+        HeightRequest="50" CornerRadius="25"
+        TextColor="{StaticResource GradientEndColor}" Text="{Binding Text}"
+        IsVisible="{Binding IsVisible}" IsEnabled="{Binding IsEnabled}"
+        Command="{Binding Command}" WidthRequest="220"
+        HorizontalOptions="CenterAndExpand"
+        x:Class="TimeTrackerTutorial.Views.Buttons.BindableButton" />

TimeTrackerTutorial/Views/LoginEntryView.xaml

@@ -5,7 +5,7 @@
         xmlns:skViews="clr-namespace:TimeTrackerTutorial.Views.SKViews"
         x:Class="TimeTrackerTutorial.Views.LoginEntryView">
     <ContentView.Content>
-        <Grid RowDefinitions="40,2">
+        <Grid RowDefinitions="40,2" RowSpacing="0">
             <entries:PlainEntry Placeholder="{Binding Placeholder}"
                     PlaceholderColor="#AFFF" FontFamily="Nunito-Regular"
                     x:Name="entInput" Text="{Binding Text}" TextColor="White"