Add AuthService, update Home layout, and add FeaturesDisplay

- Updated Home.razor:
  - Injected IAuthService
  - Modified title, subtitle, and added Chrome extension link
  - Added @oninput event for auth token input
  - Validated token using AuthService in AddToken method
  - Added HandleInputChange method
  - Updated OnAfterRenderAsync to set AuthToken only on first render
- Registered AuthService in ServiceConfiguration.cs using AddHttpClient and AddScoped
- Added FeaturesDisplay.razor component to display features in a card layout
- Created AuthService.cs implementing IAuthService with IsTokenValidAsync method
- Created IAuthService.cs interface defining IsTokenValidAsync method

GPVBlazor/GPVBlazor/Components/Displays/FeaturesDisplay.razor

@@ -0,0 +1,62 @@
+<section class="section" id="features">
+    <div class="container">
+        <h1 class="title is-3 has-text-centered">Features</h1>
+        <div class="columns is-multiline">
+            @foreach (var feature in featureTexts)
+            {
+                <div class="column is-one-third">
+                    <div class="card" style="height:100%;">
+                        <div class="card-content">
+                            <div class="content">
+                                <h2 class="title is-4">@feature.Header</h2>
+                                <p>@feature.Span</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+</section>
+
+@code {
+    private List<FeatureText> featureTexts = new List<FeatureText>
+    {
+        new FeatureText
+        {
+            Header = "Effortless Navigation",
+            Span = "Github Profile Viewer ensures effortless navigation through GitHub profiles. Whether you're a seasoned open-source enthusiast or a curious observer, the user-friendly interface simplifies the exploration process."
+        },
+        new FeatureText
+        {
+            Header = "Detailed Repository Insights",
+            Span = "Gain in-depth insights into repositories, including names and descriptions. Explore the coding projects that define a developer's journey, all presented in a clear and organized manner."
+        },
+        new FeatureText
+        {
+            Header = "Explore Connections",
+            Span = "Efficiently explore a user's network by checking their followers and those they follow. Identify key contributors in the open-source community and broaden your connections effortlessly."
+        },
+        new FeatureText
+        {
+            Header = "Star History",
+            Span = "While not offering a detailed commit history, Github Profile Viewer showcases the star history of repositories. Understand which projects have garnered attention and appreciation, providing insights into a developer's impact on the GitHub community."
+        },
+        new FeatureText
+        {
+            Header = "Created with .NET 8 and Blazor",
+            Span =  "Github Profile Viewer is built with .NET 8 and Blazor, ensuring a seamless and performant user experience. The powerful combination of these technologies guarantees a robust and reliable"
+        },
+        new FeatureText
+        {
+            Header = "Responsive Design with Bulma",
+            Span = "The integration of bulma.io guarantees a responsive design, allowing you to explore GitHub profiles across various devices. Whether on desktop or mobile, the experience remains smooth and consistent."
+        }
+    };
+
+    public class FeatureText
+    {
+        public string Header { get; set; } = "";
+        public string Span { get; set; } = "";
+    }
+}

GPVBlazor/GPVBlazor/Components/Pages/Home.razor

@@ -1,43 +1,62 @@
 @page "/"
 @rendermode InteractiveServer
 @inject IJSRuntime JS
-
+@inject Services.Interfaces.IAuthService AuthService
 <PageTitle>GPV Dotnet</PageTitle>
 
-<h1 class="title">GitHub Profile Viewer Dotnet!</h1>
-
-<i>Search for a GitHub user to view their profile</i>
-<div class="subtitle is-6">It's a clone of githubprofileviewer.com built with .net</div>
-
-<div class="is-flex is-flex-direction-column is-gap-2">
+<main class="is-flex is-flex-direction-column is-gap-2 is-align-items-center">
+    <h1 class="title is-size-1">GitHub Profile Viewer</h1>
+    <p>
+        Explore GitHub and Gist profiles effortlessly, utilizing the GitHub REST API to retrieve comprehensive information.
+    </p>
+    <a href="https://chromewebstore.google.com/detail/gpv-opener/abgechjdbcnlcdcmhkaakobeoimjgkmb" target="_blank">
+        <img src="/icons/chrome-extension-white.png"
+             alt="GitHub Profile Viewer"
+             style="width:10rem; border-radius:1rem;" />
+    </a>
     <GPVBlazor.Components.Displays.SearchBarDisplay />
-
     <div class="field has-addons">
         <div class="control is-expanded">
-            <input @bind="AuthToken" placeholder="Enter Auth Token" class="input" />
+            <input @bind="AuthToken" placeholder="Enter Auth Token" class="input" @oninput="HandleInputChange" />
         </div>
         <div class="control">
             <button class="button is-primary" @onclick="AddToken">Add Token</button>
         </div>
     </div>
     <p class="help is-italic">Auth token is storing in local storage.</p>
-</div>
+
+    <FeaturesDisplay />
+</main>
 
 @code {
-    private string? AuthToken { get; set; } = string.Empty;
+    private string? AuthToken { get; set; }
 
     private async Task AddToken()
     {
         if (!string.IsNullOrWhiteSpace(AuthToken))
         {
+            bool isValid = await AuthService.IsTokenValidAsync(AuthToken);
+            if (!isValid)
+            {
+                await JS.InvokeAsync<object>("alert", "Invalid token");
+                return;
+            }
             await JS.InvokeVoidAsync("localStorage.setItem", "authToken", AuthToken);
             await JS.InvokeAsync<object>("alert", "Token added successfully");
         }
     }
 
+    private void HandleInputChange(ChangeEventArgs e)
+    {
+        AuthToken = e.Value.ToString();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        AuthToken = await JS.InvokeAsync<string>("localStorage.getItem", "authToken");
-        StateHasChanged();
+        if (firstRender)
+        {
+            AuthToken = await JS.InvokeAsync<string>("localStorage.getItem", "authToken");
+            StateHasChanged();
+        }
     }
 }

GPVBlazor/GPVBlazor/Services/AuthService.cs

@@ -0,0 +1,28 @@
+using GPVBlazor.Services.Interfaces;
+using System.Net.Http.Headers;
+
+namespace GPVBlazor.Services
+{
+    public class AuthService : IAuthService
+    {
+        private readonly HttpClient _httpClient;
+
+        public AuthService(HttpClient httpClient)
+        {
+            _httpClient = httpClient;
+        }
+
+        public async Task<bool> IsTokenValidAsync(string token)
+        {
+            var rateReq = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/rate_limit");
+            rateReq.Headers.Add("User-Agent", "BlazorApp");
+            if (token is not null)
+            {
+                var authHeader = new AuthenticationHeaderValue("Bearer", token);
+                rateReq.Headers.Authorization = authHeader;
+            }
+            var response = await _httpClient.SendAsync(rateReq);
+            return response.IsSuccessStatusCode;
+        }
+    }
+}

GPVBlazor/GPVBlazor/Services/Configuration/ServiceConfiguration.cs

@@ -13,6 +13,8 @@ public static void Configure(IServiceCollection services)
             services.AddScoped<IUserService, UserService>();
             services.AddScoped<IContactService, ContactService>();
             services.AddScoped<IRepositoryFilterService, RepositoryFilterService>();
+            services.AddHttpClient<AuthService>();
+            services.AddScoped<IAuthService, AuthService>();
         }
     }
 }

GPVBlazor/GPVBlazor/Services/Interfaces/IAuthService.cs

@@ -0,0 +1,7 @@
+namespace GPVBlazor.Services.Interfaces
+{
+    public interface IAuthService
+    {
+        Task<bool> IsTokenValidAsync(string token);
+    }
+}