(#57) conflicts resolve

SaintAngeLs · Apr 20, 2024 · 7ca14a3 · 7ca14a3
2 parents ac91164 + 995cef9
commit 7ca14a3
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 46 deletions.
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithCheckbox.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithCheckbox.razor
@@ -1,11 +1,11 @@
 @using Radzen
 
 <RadzenRow AlignItems="AlignItems.Center" Style="height: 5em">
-    <RadzenColumn Size="12" SizeMD="3">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenLabel Text="@LabelText" Component="@Id" />
     </RadzenColumn>
-    <RadzenColumn Size="12" SizeMD="9">
-        <RadzenCheckBox Style="width: 7.5%; height: 2.5em" Disabled="@Disabled" Name="@Id"
+    <RadzenColumn Size="12" SizeMD="5">
+        <RadzenCheckBox Style="width: 2.5em; height: 2.5em" Disabled="@Disabled" Name="@Id"
                         @bind-Value="Value" />
     </RadzenColumn>
 </RadzenRow>

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithDatePicker.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithDatePicker.razor
@@ -1,10 +1,10 @@
 @using Radzen
 
 <RadzenRow AlignItems="AlignItems.Center" Style="height: 5em">
-    <RadzenColumn Size="12" SizeMD="3">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenLabel Text="@LabelText" Component="@Id" />
     </RadzenColumn>
-    <RadzenColumn Size="12" SizeMD="9">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenDatePicker Style="width: 82%;" Disabled="@Disabled" Name="@Id"
                        @bind-Value="@Value" DateFormat="dd-MM-yyyy" />
     </RadzenColumn>

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithNumeric.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithNumeric.razor
@@ -1,10 +1,10 @@
 @using Radzen
 
 <RadzenRow AlignItems="AlignItems.Center" Style="height: 5em">
-    <RadzenColumn Size="12" SizeMD="3">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenLabel Text="@LabelText" Component="@Id" />
     </RadzenColumn>
-    <RadzenColumn Size="12" SizeMD="9">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenNumeric Style="width: 82%;" Disabled="@Disabled" Name="@Id"
                        @bind-Value="Value" />
     </RadzenColumn>

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithTextBox.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithTextBox.razor
@@ -1,10 +1,10 @@
 @using Radzen
 
 <RadzenRow AlignItems="AlignItems.Center" Style="height: 5em">
-    <RadzenColumn Size="12" SizeMD="3">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenLabel Text="@LabelText" Component="@Id" />
     </RadzenColumn>
-    <RadzenColumn Size="12" SizeMD="9">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenTextBox Style="width: 80%;" Disabled="@Disabled" Name="@Id" @bind-Value="Value"/>
         @if (ValueRequired)
         {

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithTextBoxes.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenLabelWithTextBoxes.razor
@@ -1,11 +1,11 @@
 @using Radzen
 
 <RadzenRow AlignItems="AlignItems.Center" Style="height: 5em">
-    <RadzenColumn Size="12" SizeMD="3">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenLabel Text="@LabelText" Component="@Id" />
     </RadzenColumn>
 
-    <RadzenColumn Size="12" SizeMD="9">
+    <RadzenColumn Size="12" SizeMD="5">
         <RadzenTextBox Style="width: 39%;" Disabled="@Disabled" Name="@Id"
                        @bind-Value="Value1"/>
         <RadzenTextBox Style="width: 39%;" Disabled="@Disabled" Name="@Id"

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/CompleteRegistration.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/CompleteRegistration.razor
@@ -3,6 +3,7 @@
 @using MiniSpace.Web.Areas.Students
 @using MiniSpace.Web.Components
 @using MiniSpace.Web.Models.Students
+@using System.IO
 @using Radzen
 @inject IIdentityService IdentityService
 @inject IStudentsService StudentsService
@@ -26,27 +27,23 @@
             <RadzenLabelWithDatePicker Id="date-of-birth" LabelText="Date of birth:" Disabled="false"
                                        @bind-Value="@completeRegistrationModel.DateOfBirth" />
 
-            @* <RadzenRow AlignItems="AlignItems.Center"> *@
-            @*     <RadzenColumn Size="12" SizeMD="3"> *@
-            @*         <RadzenLabel Text="Profile image:" Component="profile-image" /> *@
-            @*     </RadzenColumn> *@
-            @*     <RadzenColumn Size="12" SizeMD="9"> *@
-            @*         <RadzenFileInput Style="width: 100%;" Name="profile-image" *@
-            @*                          @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="string" class="w-100" *@
-            @*                          @bind-Value=@completeRegistrationModel.ProfileImage *@
-            @*                          Change=@(args => OnChange(args, "FileInput")) *@
-            @*                          Error=@(args => OnError(args, "FileInput")) *@
-            @*                          InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})" /> *@
-            @*     </RadzenColumn> *@
-            @* </RadzenRow> *@
+            <RadzenRow AlignItems="AlignItems.Center">
+                <RadzenColumn Size="12" SizeMD="5">
+                    <RadzenLabel Text="Profile image:" Component="profile-image" />
+                </RadzenColumn>
+                <RadzenColumn Size="12" SizeMD="5">
+                    <RadzenUpload Multiple="false" Change="@OnClientChange" class="w-100"
+                                    InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})" />
+                </RadzenColumn>
+            </RadzenRow>
 
             <RadzenLabelWithCheckbox Id="email-notifications" LabelText="Email notifications:" Disabled="false"
                                      @bind-Value="@completeRegistrationModel.EmailNotifications" />
 
             <RadzenRow AlignItems="AlignItems.Center">
                 <RadzenColumn Size="12" SizeMD="12">
                     <RadzenButton ButtonType="ButtonType.Submit" Size="ButtonSize.Large"
-                                  Text="Complete registration" class="rz-border-radius-3"/>
+                                  Text="Complete registration" />
                 </RadzenColumn>
             </RadzenRow>
         </RadzenStack>
@@ -89,7 +86,7 @@
 
     void OnChange(string value, string name)
     {
-        showError = true;
+        showError = false;
         StateHasChanged(); // Force the component to re-render
     }
 
@@ -98,4 +95,41 @@
         showError = true;
         StateHasChanged(); // Force the component to re-render
     }
+
+    async void OnClientChange(UploadChangeEventArgs args)
+    {
+        Console.WriteLine("Client-side upload changed");
+
+        foreach (var file in args.Files)
+        {
+            Console.WriteLine($"File: {file.Name} / {file.Size} bytes");
+
+            try
+            {
+                long maxFileSize = 10 * 1024 * 1024;
+                var stream = file.OpenReadStream(maxFileSize);
+                byte[] bytes = await ReadFully(stream);
+                completeRegistrationModel.ProfileImage = Convert.ToBase64String(bytes);
+                stream.Close();
+            }
+            catch (Exception ex)
+            { 
+                Console.WriteLine($"Client-side file read error: {ex.Message}");
+            }
+        }
+    }
+
+    private static async Task<byte[]> ReadFully(Stream input)
+    {
+        byte[] buffer = new byte[16*1024];
+        using (MemoryStream ms = new MemoryStream())
+        {
+            int read;
+            while ((read = await input.ReadAsync(buffer, 0, buffer.Length)) > 0)
+            {
+                ms.Write(buffer, 0, read);
+            }
+            return ms.ToArray();
+        }
+    }
 }
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/ShowAccount.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/ShowAccount.razor
@@ -2,46 +2,53 @@
 @using MiniSpace.Web.Areas.Students
 @using MiniSpace.Web.Components
 @using MiniSpace.Web.DTO
+@using System.IO
 @using Radzen
 @inject IIdentityService IdentityService
 @inject IStudentsService StudentsService
 @inject NavigationManager NavigationManager
 
-<h1>Data of your account:</h1>
+<h1>Your account</h1>
 
 @if (studentDto.Id != Guid.Empty)
 {
     <RadzenStack Gap="1rem">
+        <RadzenStack AlignItems="AlignItems.Center" Class="rz-mx-auto rz-my-10">
+            <RadzenImage Path="@($"data:image/jpeg;base64,{@studentDto.ProfileImage}")"
+                         AlternateText="base64 image"
+                         Style="width: 50%"/>
+        </RadzenStack>
+
         <RadzenLabelWithTextBoxes Id="fullname" LabelText="Fullname:" Value1="@studentDto.FirstName"
-                                  Value2="@studentDto.LastName" Disabled="true" />
+                                  Value2="@studentDto.LastName" Disabled="true"/>
 
         <RadzenLabelWithTextBox Id="email" LabelText="Email:"
-                                Value="@studentDto.Email" Disabled="true" />
+                                Value="@studentDto.Email" Disabled="true"/>
 
         <RadzenLabelWithTextBox Id="description" LabelText="Description:"
-                                @bind-Value="@studentDto.Description" Disabled=@editionDisabled />
+                                @bind-Value="@studentDto.Description" Disabled=@editionDisabled/>
 
         <RadzenLabelWithTextBox Id="state" LabelText="State:"
-                                Value="@studentDto.State" Disabled="true" />
+                                Value="@studentDto.State" Disabled="true"/>
 
         <RadzenLabelWithNumeric Id="number-of-friends" LabelText="Number of friends:"
-                                Value="@studentDto.NumberOfFriends" Disabled="true" />
+                                Value="@studentDto.NumberOfFriends" Disabled="true"/>
 
         <RadzenLabelWithDatePicker Id="date-of-birth" LabelText="Date of birth:"
-                                   Value="@studentDto.DateOfBirth" Disabled="true" />
+                                   Value="@studentDto.DateOfBirth" Disabled="true"/>
 
         <RadzenLabelWithDatePicker Id="created-at" LabelText="Created at:"
-                                   Value="@studentDto.CreatedAt" Disabled="true" />
+                                   Value="@studentDto.CreatedAt" Disabled="true"/>
 
         <RadzenLabelWithCheckbox Id="email-notifications" LabelText="Email notifications:"
-                                 @bind-Value="@studentDto.EmailNotifications" Disabled=@editionDisabled />
+                                 @bind-Value="@studentDto.EmailNotifications" Disabled=@editionDisabled/>
 
         @if (studentDto.State == "incomplete")
         {
             <RadzenRow AlignItems="AlignItems.Center">
                 <RadzenColumn Size="12" SizeMD="12">
                     <RadzenButton Size="ButtonSize.Large" Text="Complete registration"
-                                  Click="@(() => NavigationManager.NavigateTo("/signup/complete"))" />
+                                  Click="@(() => NavigationManager.NavigateTo("/signup/complete"))"/>
                 </RadzenColumn>
             </RadzenRow>
         }
@@ -52,18 +59,23 @@
                 <RadzenRow AlignItems="AlignItems.Center">
                     <RadzenColumn Size="12" SizeMD="12">
                         <RadzenButton Size="ButtonSize.Large" Text="Update account"
-                                      Click=@EnableEdition />
+                                      Click=@EnableEdition/>
                     </RadzenColumn>
-                </RadzenRow>   
+                </RadzenRow>
             }
             else
             {
                 <RadzenRow AlignItems="AlignItems.Center">
-                    <RadzenColumn Size="12" SizeMD="12">
+                    <RadzenColumn Size="12" SizeMD="5">
+                        <RadzenLabel Text="Update profile image:" Component="profile-image" />
+                        <RadzenUpload Multiple="false" Change="@OnClientChange" class="w-100" Name="profile-image"
+                                      InputAttributes="@(new Dictionary<string, object>() { { "aria-label", "select file" } })"/>
+                    </RadzenColumn>
+                    <RadzenColumn Size="12" SizeMD="5">
                         <RadzenButton Size="ButtonSize.Large" Text="Save account"
-                                      Click=@HandleUpdateStudent />
+                                      Click=@HandleUpdateStudent/>
                     </RadzenColumn>
-                </RadzenRow>   
+                </RadzenRow>
             }
         }
     </RadzenStack>
@@ -99,4 +111,41 @@ else
             studentDto.Description, studentDto.EmailNotifications);
         StateHasChanged();
     }
+
+    async void OnClientChange(UploadChangeEventArgs args)
+    {
+        Console.WriteLine("Client-side upload changed");
+
+        foreach (var file in args.Files)
+        {
+            Console.WriteLine($"File: {file.Name} / {file.Size} bytes");
+
+            try
+            {
+                long maxFileSize = 10 * 1024 * 1024;
+                var stream = file.OpenReadStream(maxFileSize);
+                byte[] bytes = await ReadFully(stream);
+                studentDto.ProfileImage = Convert.ToBase64String(bytes);
+                stream.Close();
+            }
+            catch (Exception ex)
+            { 
+                Console.WriteLine($"Client-side file read error: {ex.Message}");
+            }
+        }
+    }
+
+    private static async Task<byte[]> ReadFully(Stream input)
+    {
+        byte[] buffer = new byte[16*1024];
+        using (MemoryStream ms = new MemoryStream())
+        {
+            int read;
+            while ((read = await input.ReadAsync(buffer, 0, buffer.Length)) > 0)
+            {
+                ms.Write(buffer, 0, read);
+            }
+            return ms.ToArray();
+        }
+    }
 }
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Shared/CustomRadzenFooter.razor b/MiniSpace.Web/src/MiniSpace.Web/Shared/CustomRadzenFooter.razor
@@ -1,9 +1,9 @@
 @using Radzen
 @inherits LayoutComponentBase
 
-<RadzenFooter style="background-color: #333; color: white; padding: 20px; text-align: center; ">
-    <div style="max-width: 1200px; width: 100%; margin: auto !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center;">
-        <div style="flex: 1; min-width: 250px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;">
+<RadzenFooter style="background-color: #333; color: white; padding: 10px; text-align: center; font-size: 0.95em; z-index: 999; max-height: 135px">
+    <div style="max-width: 1200px; width: 100%; height: 70%; margin: auto !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center;">
+        <div style="flex: 1; min-width: 400px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;">
             <h5>About MiniSpace</h5>
             <p>MiniSpace is a dynamic social platform designed to connect people and communities. Discover, share, and interact with content that drives innovation and engagement.</p>
         </div>
@@ -29,7 +29,7 @@
             <p>Phone: +123 456 7890</p>
         </div>
     </div>
-    <div style="margin-top: 20px; width: 100%; text-align: center;">
+    <div style="margin-top: 25px; width: 100%; text-align: center; font-size: 0.85em">
         © 2024 MiniSpace. All rights reserved.
     </div>
 </RadzenFooter>
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Shared/MainLayout.razor b/MiniSpace.Web/src/MiniSpace.Web/Shared/MainLayout.razor
@@ -4,7 +4,7 @@
 @inject NavigationManager NavigationManager
 @inject Microsoft.JSInterop.IJSRuntime JSRuntime
 
-<RadzenLayout style="margin: -8.0px; width: 100%; text-align: center;"  id="radzen-layout" > 
+<RadzenLayout style="width: 100%; text-align: center;"  id="radzen-layout" > 
    <header>
        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" Style="width: 100%;">
         <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">