From cf30d35aca287448f7f7b6ba5ae1dbe3ee4c285e Mon Sep 17 00:00:00 2001
From: akv3sic <antekvesic2@gmail.com>
Date: Sat, 11 Nov 2023 22:40:31 +0100
Subject: [PATCH] Add feature to toggle password visibility

---
 .../Converters/BoolToPasswordIconConverter.cs | 26 +++++++++++++++++
 MauiStoreApp/Resources/Images/eye_off.svg     |  8 ++++++
 MauiStoreApp/Resources/Images/eye_show.svg    |  5 ++++
 MauiStoreApp/ViewModels/LoginViewModel.cs     | 15 ++++++++++
 MauiStoreApp/Views/LoginPage.xaml             | 28 +++++++++++++++----
 5 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 MauiStoreApp/Converters/BoolToPasswordIconConverter.cs
 create mode 100644 MauiStoreApp/Resources/Images/eye_off.svg
 create mode 100644 MauiStoreApp/Resources/Images/eye_show.svg

diff --git a/MauiStoreApp/Converters/BoolToPasswordIconConverter.cs b/MauiStoreApp/Converters/BoolToPasswordIconConverter.cs
new file mode 100644
index 0000000..1750ebf
--- /dev/null
+++ b/MauiStoreApp/Converters/BoolToPasswordIconConverter.cs
@@ -0,0 +1,26 @@
+// -----------------------------------------------------------------------
+// <copyright file="BoolToPasswordIconConverter.cs" company="Kvesic, Matkovic, FSRE">
+// Copyright (c) Kvesic, Matkovic, FSRE. All rights reserved.
+// </copyright>
+// -----------------------------------------------------------------------
+
+using System.Globalization;
+
+namespace MauiStoreApp.Converters
+{
+    /// <summary>
+    /// Converts a boolean value to a password icon.
+    /// </summary>
+    public class BoolToPasswordIconConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return (bool)value ? "eye_off.svg" : "eye_show.svg";
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
diff --git a/MauiStoreApp/Resources/Images/eye_off.svg b/MauiStoreApp/Resources/Images/eye_off.svg
new file mode 100644
index 0000000..5a0b98a
--- /dev/null
+++ b/MauiStoreApp/Resources/Images/eye_off.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.4955 7.44088C3.54724 8.11787 2.77843 8.84176 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C13.2958 19 14.4799 18.8108 15.5523 18.4977L13.8895 16.8349C13.2936 16.9409 12.6638 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366C4.23754 10.2097 4.99526 9.50784 5.93214 8.87753L4.4955 7.44088Z" fill="#0F0F0F"/>
+<path d="M8.53299 11.4784C8.50756 11.6486 8.49439 11.8227 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5C12.1716 15.5 12.3458 15.4868 12.516 15.4614L8.53299 11.4784Z" fill="#0F0F0F"/>
+<path d="M15.4661 12.4471L11.5473 8.52829C11.6937 8.50962 11.8429 8.5 11.9944 8.5C13.9274 8.5 15.4944 10.067 15.4944 12C15.4944 12.1515 15.4848 12.3007 15.4661 12.4471Z" fill="#0F0F0F"/>
+<path d="M18.1118 15.0928C19.0284 14.4702 19.7715 13.7805 20.3413 13.1634C20.9657 12.4872 20.9657 11.5128 20.3413 10.8366C18.8117 9.18002 16.0331 7 12 7C11.3594 7 10.7505 7.05499 10.1732 7.15415L8.50483 5.48582C9.5621 5.1826 10.7272 5 12 5C16.8112 5 20.0833 7.60905 21.8107 9.47978C23.1426 10.9222 23.1426 13.0778 21.8107 14.5202C21.2305 15.1486 20.476 15.8603 19.5474 16.5284L18.1118 15.0928Z" fill="#0F0F0F"/>
+<path d="M2.00789 3.42207C1.61736 3.03155 1.61736 2.39838 2.00789 2.00786C2.39841 1.61733 3.03158 1.61733 3.4221 2.00786L22.0004 20.5862C22.391 20.9767 22.391 21.6099 22.0004 22.0004C21.6099 22.3909 20.9767 22.3909 20.5862 22.0004L2.00789 3.42207Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/MauiStoreApp/Resources/Images/eye_show.svg b/MauiStoreApp/Resources/Images/eye_show.svg
new file mode 100644
index 0000000..87a0df3
--- /dev/null
+++ b/MauiStoreApp/Resources/Images/eye_show.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9944 15.5C13.9274 15.5 15.4944 13.933 15.4944 12C15.4944 10.067 13.9274 8.5 11.9944 8.5C10.0614 8.5 8.49439 10.067 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5ZM11.9944 13.4944C11.1691 13.4944 10.5 12.8253 10.5 12C10.5 11.1747 11.1691 10.5056 11.9944 10.5056C12.8197 10.5056 13.4888 11.1747 13.4888 12C13.4888 12.8253 12.8197 13.4944 11.9944 13.4944Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C7.18879 5 3.9167 7.60905 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C16.8112 19 20.0833 16.391 21.8107 14.5202C23.1426 13.0778 23.1426 10.9222 21.8107 9.47978C20.0833 7.60905 16.8112 5 12 5ZM3.65868 10.8366C5.18832 9.18002 7.9669 7 12 7C16.0331 7 18.8117 9.18002 20.3413 10.8366C20.9657 11.5128 20.9657 12.4872 20.3413 13.1634C18.8117 14.82 16.0331 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/MauiStoreApp/ViewModels/LoginViewModel.cs b/MauiStoreApp/ViewModels/LoginViewModel.cs
index ed39d66..c62a584 100644
--- a/MauiStoreApp/ViewModels/LoginViewModel.cs
+++ b/MauiStoreApp/ViewModels/LoginViewModel.cs
@@ -41,6 +41,12 @@ public LoginViewModel()
         [ObservableProperty]
         string password;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether the password is visible.
+        /// </summary>
+        [ObservableProperty]
+        bool isPasswordVisible;
+
         private LoginResponse loginResponse = new LoginResponse();
 
         /// <summary>
@@ -92,5 +98,14 @@ public async Task Login()
                 IsBusy = false;
             }
         }
+
+        /// <summary>
+        /// Toggles the password visibility.
+        /// </summary>
+        [RelayCommand]
+        public void TogglePasswordVisibility()
+        {
+            this.IsPasswordVisible = !this.IsPasswordVisible;
+        }
     }
 }
diff --git a/MauiStoreApp/Views/LoginPage.xaml b/MauiStoreApp/Views/LoginPage.xaml
index b90fd19..72bfa2f 100644
--- a/MauiStoreApp/Views/LoginPage.xaml
+++ b/MauiStoreApp/Views/LoginPage.xaml
@@ -3,9 +3,11 @@
     x:Class="MauiStoreApp.Views.LoginPage"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:converters="clr-namespace:MauiStoreApp.Converters"
     xmlns:local="clr-namespace:MauiStoreApp.ViewModels"
     xmlns:model="clr-namespace:MauiStoreApp.Models"
     xmlns:modelroot="clr-namespace:MauiStoreApp.Models"
+    xmlns:toolkit="clr-namespace:CommunityToolkit.Maui.Converters;assembly=CommunityToolkit.Maui"
     x:DataType="local:LoginViewModel"
     BackgroundColor="#FFF"
     Shell.NavBarIsVisible="True">
@@ -29,6 +31,8 @@
                 <Setter Property="CornerRadius" Value="20" />
                 <Setter Property="Margin" Value="20" />
             </Style>
+            <converters:BoolToPasswordIconConverter x:Key="BoolToPasswordIconConverter" />
+            <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter" />
         </ResourceDictionary>
     </ContentPage.Resources>
 
@@ -60,11 +64,25 @@
                 Style="{StaticResource EntryStyle}"
                 Text="{Binding Username}" />
 
-            <Entry
-                IsPassword="True"
-                Placeholder="Zaporka"
-                Style="{StaticResource EntryStyle}"
-                Text="{Binding Password}" />
+            <AbsoluteLayout HeightRequest="50">
+                <Entry
+                    AbsoluteLayout.LayoutBounds="0,0,1,1"
+                    AbsoluteLayout.LayoutFlags="All"
+                    IsPassword="{Binding IsPasswordVisible, Converter={StaticResource InvertedBoolConverter}}"
+                    Placeholder="Zaporka"
+                    Style="{StaticResource EntryStyle}"
+                    Text="{Binding Password}" />
+
+                <Image
+                    AbsoluteLayout.LayoutBounds="0.98,0.5,21,21"
+                    AbsoluteLayout.LayoutFlags="PositionProportional"
+                    BackgroundColor="Transparent"
+                    Source="{Binding IsPasswordVisible, Converter={StaticResource BoolToPasswordIconConverter}}">
+                    <Image.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding TogglePasswordVisibilityCommand}" />
+                    </Image.GestureRecognizers>
+                </Image>
+            </AbsoluteLayout>
 
             <Label
                 FontAttributes="Bold"