MAUI MVVM Architecture, doing a login system while consuming a API - xamarin

Question

I am trying to learn MAUI in order to create a project, but it seems like i got stuck. I cant understand the MVVM architecture, as i never had any simillar experience before. I will now present my code, and would love to get answers that could explain why it is not working, and a possible solution for the problem.
I have three folders: Views, where i store the design. Models, where i store the classes. And ViewModels, that get the data. This is the xaml content page, which consists of a login page.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="thebridgeproject.Views.login"
xmlns:ViewModels="clr-namespace:thebridgeproject.ViewModels"
Shell.NavBarIsVisible="False"
Title="LoginPage" >
<ContentPage.BindingContext>
<ViewModels:LoginViewModel />
</ContentPage.BindingContext>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Image Source="loginicon.png" HeightRequest="150" WidthRequest="150" />
<VerticalStackLayout Spacing="5">
<Label Text="Welcome!" FontSize="28" TextColor="#3B7A5E" HorizontalTextAlignment="Center" />
<Label Text="Login to your account" FontSize="18" TextColor="Gray" HorizontalTextAlignment="Center" />
</VerticalStackLayout>
<StackLayout Orientation="Horizontal">
<Frame ZIndex="1" HasShadow="True" BorderColor="White" HeightRequest="56" WidthRequest="56" CornerRadius="28">
<Image Source="user.png" HeightRequest="20" WidthRequest="20" />
</Frame>
<Frame HeightRequest="45" Margin="-20,0,0,0" Padding="0" HasShadow="True" BorderColor="White" HorizontalOptions="FillAndExpand">
<Entry Text="{Binding Username}" Margin="20,0,0,0" VerticalOptions="Center" Placeholder="Username"/>
</Frame>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Frame ZIndex="1" HasShadow="True" BorderColor="White" HeightRequest="56" WidthRequest="56" CornerRadius="28">
<Image Source="lock.png" HeightRequest="20" WidthRequest="20" />
</Frame>
<Frame HeightRequest="45" Margin="-20,0,0,0" Padding="0" HasShadow="True" BorderColor="White" HorizontalOptions="FillAndExpand">
<Entry Text="{Binding Password}" Margin="20,0,0,0" VerticalOptions="Center" Placeholder="Password" IsPassword="True" />
</Frame>
</StackLayout>
<Button Text="Sign in" WidthRequest="100" CornerRadius="20" HorizontalOptions="Center" BackgroundColor="#3B7A5E" Command="{Binding LoginCommand}" />
<StackLayout Orientation="Horizontal" Spacing="5" HorizontalOptions="Center">
<Label Text="Dont have an account?" TextColor="Gray" />
<Label Text="Sign up here" TextColor="#50b3f2" />
</StackLayout>
</VerticalStackLayout>
</ContentPage>
Then i have the Model that holds the data for the API request.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace thebridgeproject.Models
{
class users
{
public class Result
{
public int NumUtente { get; set; }
public string Nome { get; set; }
public string Password { get; set; }
public string Morada { get; set; }
public string Cidade { get; set; }
public string DataNascimento { get; set; }
public string NumTlf { get; set; }
}
public class Root
{
public bool success { get; set; }
public string message { get; set; }
public List<Result> result { get; set; }
}
}
}
After that, we have the LoginViewModel:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Newtonsoft.Json;
using thebridgeproject.Models;
namespace thebridgeproject.ViewModels
{
public class LoginViewModel : INotifyPropertyChanged
{
private string _username;
public string Username
{
get { return _username; }
set
{
_username = value;
OnPropertyChanged(nameof(Username));
}
}
private string _password;
public string Password
{
get { return _password; }
set
{
_password = value;
OnPropertyChanged(nameof(Password));
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private async Task Login()
{
using (var httpClient = new HttpClient())
{
httpClient.DefaultRequestHeaders.Add("Authorization", "RaV9N");
var response = await httpClient.GetAsync("http:///bp/utentes");
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
var users = JsonConvert.DeserializeObject<users.Root>(content);
if (users.success)
{
var user = users.result.FirstOrDefault(x => x.Nome == Username);
if (user != null && VerifyPassword(user.Password, Password))
{
// Login successful
// ...
}
else
{
// Login failed
// ...
}
}
else
{
// API request failed
// ...
}
}
else
{
// API request failed
// ...
}
}
}
private bool VerifyPassword(string hashedPassword, string enteredPassword)
{
// Use the BCrypt.Net library to verify the entered password
return BCrypt.Net.BCrypt.Verify(enteredPassword, hashedPassword);
}
}
}
Ignore the API link! But that is mostly it, i have no more code. It seems like it does nothing. I think the issue might be the lack of code in the file behind the design. Im open to suggestions, and i am thankfull for any productive answer!

Answer 1

The view model implements properties and commands to which the view can data bind to, and notifies the view of any state changes through change notification events. The view model is also responsible for coordinating the view's interactions with any model classes that are required. There's typically a one-to-many relationship between the view model and the model classes. You can refer to The Model-View-ViewModel Pattern for more details.
You can refer to my sample code below on how to use LoginCommand in your LoginCommand. Notice that I put it in a Label TapGestureRecognizer, however its usage is the same as that you use it in a Button.
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ViewModel="clr-namespace:MyApp.ViewModels"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.Views.LoginPage"
BackgroundColor="#112B47"
>
<ContentPage.BindingContext>
<ViewModel:LoginViewModel/>
</ContentPage.BindingContext>
<StackLayout Padding="15" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label HorizontalOptions="Center">
<Label.FormattedText>
<FormattedString>
<Span Text="Don't have an account?" TextColor="Gray"></Span>
<Span Text="Register" TextColor="Gray" FontAttributes="Bold" TextDecorations="Underline"></Span>
</FormattedString>
</Label.FormattedText>
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoginCommand}"></TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentPage>
LoginViewModel:
public class LoginViewModel : INotifyPropertyChanged
{
public ICommand LoginCommand { get; private set; }
public event PropertyChangedEventHandler PropertyChanged;
public LoginViewModel()
{
LoginCommand = new Command(async () => await Login());
}
public async Task Login()
{
// add your logic here
}
}