From 5f11c2445b1b59df3a1a574aa53a453d7ef4ce85 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Sun, 17 Mar 2024 03:08:07 +0800
Subject: [PATCH] Add support for CDN backed User Avatars

---
 .../BackgroundMqServices.cs                   |  21 +
 MyApp.ServiceInterface/CdnServices.cs         |  31 ++
 MyApp.ServiceInterface/Data/Urls.cs           |  10 +
 MyApp.ServiceInterface/EmailServices.cs       |   2 +-
 MyApp.ServiceInterface/ImageUtils.cs          |  57 +++
 .../MyApp.ServiceInterface.csproj             |   1 +
 MyApp.ServiceInterface/UserServices.cs        |  85 ++++
 MyApp.ServiceModel/DiskTasks.cs               |  39 ++
 MyApp.ServiceModel/Tag.cs                     |   7 +
 MyApp.ServiceModel/User.cs                    |  20 +
 .../Account/Pages/Manage/Index.razor          |  36 +-
 MyApp/Components/App.razor                    |   1 +
 MyApp/Components/Shared/Header.razor          |   2 +-
 MyApp/Configure.AppHost.cs                    |  19 +-
 MyApp/Configure.Mq.cs                         |   1 +
 MyApp/Program.cs                              |   4 +-
 MyApp/wwwroot/mjs/dtos.mjs                    | 393 ++++++++----------
 .../wwwroot/pages/components/EditProfile.mjs  |  36 ++
 18 files changed, 513 insertions(+), 252 deletions(-)
 create mode 100644 MyApp.ServiceInterface/BackgroundMqServices.cs
 create mode 100644 MyApp.ServiceInterface/CdnServices.cs
 create mode 100644 MyApp.ServiceInterface/Data/Urls.cs
 create mode 100644 MyApp.ServiceInterface/ImageUtils.cs
 create mode 100644 MyApp.ServiceInterface/UserServices.cs
 create mode 100644 MyApp.ServiceModel/DiskTasks.cs
 create mode 100644 MyApp.ServiceModel/Tag.cs
 create mode 100644 MyApp.ServiceModel/User.cs
 create mode 100644 MyApp/wwwroot/pages/components/EditProfile.mjs

diff --git a/MyApp.ServiceInterface/BackgroundMqServices.cs b/MyApp.ServiceInterface/BackgroundMqServices.cs
new file mode 100644
index 0000000..c9e14f4
--- /dev/null
+++ b/MyApp.ServiceInterface/BackgroundMqServices.cs
@@ -0,0 +1,21 @@
+using MyApp.ServiceModel;
+using ServiceStack;
+using ServiceStack.IO;
+
+namespace MyApp.ServiceInterface;
+
+public class BackgroundMqServices(R2VirtualFiles r2) : Service
+{
+    public async Task Any(DiskTasks request)
+    {
+        if (request.SaveFile != null)
+        {
+            await r2.WriteFileAsync(request.SaveFile.FilePath, request.SaveFile.Stream);
+        }
+
+        if (request.CdnDeleteFiles != null)
+        {
+            r2.DeleteFiles(request.CdnDeleteFiles);
+        }
+    }
+}
\ No newline at end of file
diff --git a/MyApp.ServiceInterface/CdnServices.cs b/MyApp.ServiceInterface/CdnServices.cs
new file mode 100644
index 0000000..2cf700e
--- /dev/null
+++ b/MyApp.ServiceInterface/CdnServices.cs
@@ -0,0 +1,31 @@
+using MyApp.ServiceModel;
+using ServiceStack;
+using ServiceStack.IO;
+
+namespace MyApp.ServiceInterface;
+
+public class CdnServices(R2VirtualFiles r2) : Service
+{
+    public object Any(DeleteCdnFilesMq request)
+    {
+        var msg = new DiskTasks
+        {
+            CdnDeleteFiles = request.Files
+        };
+        PublishMessage(msg);
+        return msg;
+    }
+
+    public void Any(DeleteCdnFile request)
+    {
+        r2.DeleteFile(request.File);
+    }
+
+    public object Any(GetCdnFile request)
+    {
+        var file = r2.GetFile(request.File);
+        if (file == null)
+            throw new FileNotFoundException(request.File);
+        return new HttpResult(file);
+    }
+}
diff --git a/MyApp.ServiceInterface/Data/Urls.cs b/MyApp.ServiceInterface/Data/Urls.cs
new file mode 100644
index 0000000..3078a68
--- /dev/null
+++ b/MyApp.ServiceInterface/Data/Urls.cs
@@ -0,0 +1,10 @@
+using ServiceStack;
+
+namespace MyApp.Data;
+
+public static class Urls
+{
+    public static string GetAvatarUrl(this string? userName) => userName != null
+        ? $"/avatar/{userName}"
+        : Svg.ToDataUri(Svg.GetImage(Svg.Icons.Users));
+}
diff --git a/MyApp.ServiceInterface/EmailServices.cs b/MyApp.ServiceInterface/EmailServices.cs
index 73c00c9..5e84e54 100644
--- a/MyApp.ServiceInterface/EmailServices.cs
+++ b/MyApp.ServiceInterface/EmailServices.cs
@@ -50,7 +50,7 @@ public class SmtpConfig
 /// </summary>
 public class EmailServices(SmtpConfig config, ILogger<EmailServices> log) 
     // TODO: Uncomment to enable sending emails with SMTP
-    // : Service
+    : Service
 {
     public object Any(SendEmail request)
     {
diff --git a/MyApp.ServiceInterface/ImageUtils.cs b/MyApp.ServiceInterface/ImageUtils.cs
new file mode 100644
index 0000000..e2a13fe
--- /dev/null
+++ b/MyApp.ServiceInterface/ImageUtils.cs
@@ -0,0 +1,57 @@
+using MyApp.ServiceModel;
+using ServiceStack;
+using ServiceStack.Host;
+using ServiceStack.Web;
+using SixLabors.ImageSharp;
+using SixLabors.ImageSharp.Formats;
+using SixLabors.ImageSharp.Formats.Png;
+using SixLabors.ImageSharp.Processing;
+
+namespace MyApp.ServiceInterface;
+
+public static class ImageUtils
+{
+    public const int MaxAvatarSize = 1024 * 1024;
+
+    public static async Task<MemoryStream> CropAndResizeAsync(Stream inStream, int width, int height, IImageFormat format)
+    {
+        var outStream = new MemoryStream();
+        using (var image = await Image.LoadAsync(inStream))
+        {
+            var clone = image.Clone(context => context
+                .Resize(new ResizeOptions {
+                    Mode = ResizeMode.Crop,
+                    Size = new Size(width, height),
+                }));
+            await clone.SaveAsync(outStream, format);
+        }
+        outStream.Position = 0;
+        return outStream;
+    }
+
+    public static async Task<IHttpFile?> TransformAvatarAsync(FilesUploadContext ctx)
+    {
+        var originalMs = await ctx.File.InputStream.CopyToNewMemoryStreamAsync();
+
+        var resizedMs = await CropAndResizeAsync(originalMs, 128, 128, PngFormat.Instance);
+
+        // Offload persistence of original image to background task
+        originalMs.Position = 0;
+        using var mqClient = HostContext.AppHost.GetMessageProducer(ctx.Request);
+        mqClient.Publish(new DiskTasks
+        {
+            SaveFile = new()
+            {
+                FilePath = ctx.Location.ResolvePath(ctx),
+                Stream = originalMs,
+            }
+        });
+
+        return new HttpFile(ctx.File)
+        {
+            FileName = $"{ctx.FileName.LastLeftPart('.')}_128.{ctx.File.FileName.LastRightPart('.')}",
+            ContentLength = resizedMs.Length,
+            InputStream = resizedMs,
+        };
+    }
+}
diff --git a/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj b/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj
index 59ecdfa..3d97ef9 100644
--- a/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj
+++ b/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj
@@ -12,6 +12,7 @@
         <PackageReference Include="ServiceStack" Version="8.*" />
         <PackageReference Include="ServiceStack.Ormlite" Version="8.*" />
         <PackageReference Include="ServiceStack.Aws" Version="8.*" />
+        <PackageReference Include="SixLabors.ImageSharp" Version="2.1.7" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/MyApp.ServiceInterface/UserServices.cs b/MyApp.ServiceInterface/UserServices.cs
new file mode 100644
index 0000000..7064d70
--- /dev/null
+++ b/MyApp.ServiceInterface/UserServices.cs
@@ -0,0 +1,85 @@
+using MyApp.Data;
+using ServiceStack;
+using MyApp.ServiceModel;
+using ServiceStack.IO;
+using ServiceStack.OrmLite;
+using SixLabors.ImageSharp.Formats.Png;
+
+namespace MyApp.ServiceInterface;
+
+public class UserServices(R2VirtualFiles r2) : Service
+{
+    private const string AppData = "/App_Data";
+    
+    public async Task<object> Any(UpdateUserProfile request)
+    {
+        var userName = Request.GetClaimsPrincipal().Identity!.Name!;
+        var file = base.Request!.Files.FirstOrDefault();
+
+        if (file != null)
+        {
+            var userProfileDir = $"/profiles/{userName[..2]}/{userName}"; 
+            var origPath = userProfileDir.CombineWith(file.FileName);
+            var fileName = $"{file.FileName.LastLeftPart('.')}_128.{file.FileName.LastRightPart('.')}";
+            var profilePath = userProfileDir.CombineWith(fileName);
+            var originalMs = await file.InputStream.CopyToNewMemoryStreamAsync();
+            var resizedMs = await ImageUtils.CropAndResizeAsync(originalMs, 128, 128, PngFormat.Instance);
+            
+            await VirtualFiles.WriteFileAsync(AppData.CombineWith(origPath), originalMs);
+            await VirtualFiles.WriteFileAsync(AppData.CombineWith(profilePath), resizedMs);
+
+            await Db.UpdateOnlyAsync(() => new ApplicationUser {
+                ProfilePath = profilePath,
+            }, x => x.UserName == userName);
+            
+            PublishMessage(new DiskTasks {
+                SaveFile = new() {
+                    FilePath = origPath,
+                    Stream = originalMs,
+                }
+            });
+            PublishMessage(new DiskTasks {
+                SaveFile = new() {
+                    FilePath = profilePath,
+                    Stream = resizedMs,
+                }
+            });
+        }
+        
+        return new UpdateUserProfileResponse();
+    }
+
+    public async Task<object> Any(GetUserAvatar request)
+    {
+        if (!string.IsNullOrEmpty(request.UserName))
+        {
+            var profilePath = Db.Scalar<string>(Db.From<ApplicationUser>()
+                .Where(x => x.UserName == request.UserName)
+                .Select(x => x.ProfilePath));
+            if (!string.IsNullOrEmpty(profilePath))
+            {
+                if (profilePath.StartsWith("data:"))
+                {
+                    return new HttpResult(profilePath, MimeTypes.ImageSvg);
+                }
+                if (profilePath.StartsWith('/'))
+                {
+                    var localProfilePath = AppData.CombineWith(profilePath);
+                    var file = VirtualFiles.GetFile(localProfilePath);
+                    if (file != null)
+                    {
+                        return new HttpResult(file, MimeTypes.GetMimeType(file.Extension));
+                    }
+                    file = r2.GetFile(profilePath);
+                    var bytes = file != null ? await file.ReadAllBytesAsync() : null;
+                    if (bytes is { Length: > 0 })
+                    {
+                        await VirtualFiles.WriteFileAsync(localProfilePath, bytes);
+                        return new HttpResult(bytes, MimeTypes.GetMimeType(file!.Extension));
+                    }
+                }
+            }
+        }
+        return new HttpResult(Svg.GetImage(Svg.Icons.Users), MimeTypes.ImageSvg);
+    }
+}
diff --git a/MyApp.ServiceModel/DiskTasks.cs b/MyApp.ServiceModel/DiskTasks.cs
new file mode 100644
index 0000000..70d55e0
--- /dev/null
+++ b/MyApp.ServiceModel/DiskTasks.cs
@@ -0,0 +1,39 @@
+using ServiceStack;
+using ServiceStack.DataAnnotations;
+
+namespace MyApp.ServiceModel;
+
+[Tag(Tag.Tasks)]
+[ExcludeMetadata]
+[Restrict(InternalOnly = true)]
+public class DiskTasks : IReturnVoid
+{
+    public SaveFile? SaveFile { get; set; }
+    public List<string>? CdnDeleteFiles { get; set; }
+}
+public class SaveFile
+{
+    public string FilePath { get; set; }
+    public Stream Stream { get; set; }
+}
+
+[Tag(Tag.Tasks)]
+[ValidateHasRole(Roles.Moderator)]
+public class DeleteCdnFilesMq
+{
+    public List<string> Files { get; set; }
+}
+
+[Tag(Tag.Tasks)]
+[ValidateHasRole(Roles.Moderator)]
+public class GetCdnFile
+{
+    public string File { get; set; }
+}
+
+[Tag(Tag.Tasks)]
+[ValidateHasRole(Roles.Moderator)]
+public class DeleteCdnFile : IReturnVoid
+{
+    public string File { get; set; }
+}
diff --git a/MyApp.ServiceModel/Tag.cs b/MyApp.ServiceModel/Tag.cs
new file mode 100644
index 0000000..3871d14
--- /dev/null
+++ b/MyApp.ServiceModel/Tag.cs
@@ -0,0 +1,7 @@
+namespace MyApp.ServiceModel;
+
+public static class Tag
+{
+    public const string Tasks = nameof(Tasks);
+    public const string User = nameof(User);
+}
\ No newline at end of file
diff --git a/MyApp.ServiceModel/User.cs b/MyApp.ServiceModel/User.cs
new file mode 100644
index 0000000..0042e80
--- /dev/null
+++ b/MyApp.ServiceModel/User.cs
@@ -0,0 +1,20 @@
+using ServiceStack;
+
+namespace MyApp.ServiceModel;
+
+[Tag(Tag.User)]
+[ValidateIsAuthenticated]
+public class UpdateUserProfile : IPost, IReturn<UpdateUserProfileResponse>
+{
+}
+
+public class UpdateUserProfileResponse
+{
+    public ResponseStatus ResponseStatus { get; set; }
+}
+
+[Route("/avatar/{UserName}", "GET")]
+public class GetUserAvatar : IGet, IReturn<byte[]>
+{
+    public string UserName { get; set; }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/Index.razor b/MyApp/Components/Account/Pages/Manage/Index.razor
index 961e082..eabb74c 100644
--- a/MyApp/Components/Account/Pages/Manage/Index.razor
+++ b/MyApp/Components/Account/Pages/Manage/Index.razor
@@ -17,28 +17,23 @@
 <div class="max-w-xl">
     <div class="shadow overflow-hidden sm:rounded-md">
         <EditForm id="profile-form" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"
-                  class="px-4 bg-white dark:bg-black sm:p-6">
-            <DataAnnotationsValidator />
-            <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
-
-            <div class="flex flex-col gap-y-4">
-                <div>
-                    <label for="username" class="@TextInput.LabelClasses">Username</label>
-                    <div class="mt-1 relative rounded-md shadow-sm">
-                        <input id="username" type="text" value="@username" class="@TextInput.InputClasses" placeholder="Please choose your username." disabled />
-                    </div>
-                </div>
-                <div>
-                    <label for="phone-number" class="@TextInput.LabelClasses">Phone number</label>
-                    <div class="mt-1 relative rounded-md shadow-sm">
-                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@TextInput.InputClasses" placeholder="Please enter your phone number." />
+                  class="bg-white dark:bg-black">
+
+            <div class="px-4 sm:p-6">
+                <DataAnnotationsValidator/>
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold"/>
+
+                <div class="flex flex-col gap-y-4">
+                    <div>
+                        <label for="username" class="@TextInput.LabelClasses">Username</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <input id="username" type="text" value="@username" class="@TextInput.InputClasses" placeholder="Please choose your username." disabled/>
+                        </div>
                     </div>
-                    <ValidationMessage For="() => Input.PhoneNumber" class="mt-2 text-danger text-sm" />
-                </div>
-                <div>
-                    <PrimaryButton id="update-profile-button" type="submit">Save</PrimaryButton>
                 </div>
             </div>
+
+            <div data-component="pages/components/EditProfile.mjs"></div>
         </EditForm>
     </div>
 </div>
@@ -83,5 +78,8 @@
         [Phone]
         [Display(Name = "Phone number")]
         public string? PhoneNumber { get; set; }
+
+        [Display(Name = "Avatar")]
+        public string? ProfileUrl { get; set; }
     }
 }
diff --git a/MyApp/Components/App.razor b/MyApp/Components/App.razor
index 4005427..a425ee3 100644
--- a/MyApp/Components/App.razor
+++ b/MyApp/Components/App.razor
@@ -13,6 +13,7 @@
     @BlazorHtml.ImportMap(new()
     {
         ["app.mjs"] =              ("/mjs/app.mjs",                     "/mjs/app.mjs"),
+        ["dtos.mjs"] =             ("/mjs/dtos.mjs",                    "/mjs/dtos.mjs"),
         ["vue"] =                  ("/lib/mjs/vue.mjs",                 "/lib/mjs/vue.min.mjs"),
         ["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "/lib/mjs/servicestack-client.min.mjs"),
         ["@servicestack/vue"] =    ("/lib/mjs/servicestack-vue.mjs",    "/lib/mjs/servicestack-vue.min.mjs"),
diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
index e1e1c60..7dc122c 100644
--- a/MyApp/Components/Shared/Header.razor
+++ b/MyApp/Components/Shared/Header.razor
@@ -45,7 +45,7 @@
                                     <div>
                                         <NavLink href="Account/Manage"
                                             class="max-w-xs bg-white dark:bg-black rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-                                            <img class="h-8 w-8 rounded-full" src="@User.GetPicture()" alt="">
+                                            <img id="user-avatar" class="h-8 w-8 rounded-full" src="/avatar/@User.GetDisplayName()" alt="">
                                             <span class="hidden ml-3 text-gray-700 dark:text-gray-300 text-sm font-medium lg:block">
                                                 <span class="sr-only">Open user menu for </span>
                                                 @User.GetDisplayName()
diff --git a/MyApp/Configure.AppHost.cs b/MyApp/Configure.AppHost.cs
index 008ebc7..748c516 100644
--- a/MyApp/Configure.AppHost.cs
+++ b/MyApp/Configure.AppHost.cs
@@ -1,8 +1,9 @@
 using Amazon.S3;
 using Microsoft.AspNetCore.Mvc.Rendering;
-using MyApp.Data;
 using ServiceStack.IO;
 using ServiceStack.OrmLite;
+using MyApp.Data;
+using MyApp.ServiceInterface;
 
 [assembly: HostingStartup(typeof(MyApp.AppHost))]
 
@@ -24,7 +25,20 @@ public void Configure(IWebHostBuilder builder) => builder
                 ServiceURL = $"https://{r2AccountId}.r2.cloudflarestorage.com"
             });
             services.AddSingleton(s3Client);
-            services.AddSingleton(new R2VirtualFiles(s3Client, "stackoverflow-shootout"));
+            var appFs = new R2VirtualFiles(s3Client, "stackoverflow-shootout");
+            services.AddSingleton(appFs);
+
+            services.AddPlugin(new FilesUploadFeature(
+                new UploadLocation("profiles", appFs, allowExtensions: FileExt.WebImages,
+                    // Use unique URL to invalidate CDN caches
+                    resolvePath: ctx =>
+                    {
+                        var userName = ctx.Session.UserName;
+                        return $"/profiles/{userName[..2]}/{userName}/{ctx.FileName}";
+                    },
+                    maxFileBytes: ImageUtils.MaxAvatarSize,
+                    transformFile: ImageUtils.TransformAvatarAsync)
+            ));
         });
 
     public override void Configure()
@@ -32,6 +46,7 @@ public override void Configure()
         AppConfig.Instance.GitPagesBaseUrl ??= ResolveGitBlobBaseUrl(ContentRootDirectory);
         
         FileSystemVirtualFiles.AssertDirectory(HostingEnvironment.ContentRootPath.CombineWith(AppConfig.Instance.CacheDir));
+        FileSystemVirtualFiles.AssertDirectory(HostingEnvironment.ContentRootPath.CombineWith(AppConfig.Instance.ProfilesDir));
         
         using var db = GetDbConnection();
         AppConfig.Instance.ModelUsers = db.Select(db.From<ApplicationUser>().Where(x => x.Model != null || x.UserName == "human"));
diff --git a/MyApp/Configure.Mq.cs b/MyApp/Configure.Mq.cs
index 35e9198..a9bd8a9 100644
--- a/MyApp/Configure.Mq.cs
+++ b/MyApp/Configure.Mq.cs
@@ -29,6 +29,7 @@ public void Configure(IWebHostBuilder builder) => builder
             //Register ServiceStack APIs you want to be able to invoke via MQ
             mqService.RegisterHandler<SendEmail>(appHost.ExecuteMessage);
             mqService.RegisterHandler<RenderComponent>(appHost.ExecuteMessage);
+            mqService.RegisterHandler<DiskTasks>(appHost.ExecuteMessage);
             mqService.Start();
         });
 }
diff --git a/MyApp/Program.cs b/MyApp/Program.cs
index 36b5985..a48347b 100644
--- a/MyApp/Program.cs
+++ b/MyApp/Program.cs
@@ -44,9 +44,9 @@
     .AddSignInManager()
     .AddDefaultTokenProviders();
 
-services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
+// services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
 // Uncomment to send emails with SMTP, configure SMTP with "SmtpConfig" in appsettings.json
-//services.AddSingleton<IEmailSender<ApplicationUser>, EmailSender>();
+services.AddSingleton<IEmailSender<ApplicationUser>, EmailSender>();
 services.AddScoped<IUserClaimsPrincipalFactory<ApplicationUser>, AdditionalUserClaimsPrincipalFactory>();
 
 var baseUrl = builder.Configuration["ApiBaseUrl"] ??
diff --git a/MyApp/wwwroot/mjs/dtos.mjs b/MyApp/wwwroot/mjs/dtos.mjs
index fd8b524..e4ccf42 100644
--- a/MyApp/wwwroot/mjs/dtos.mjs
+++ b/MyApp/wwwroot/mjs/dtos.mjs
@@ -1,6 +1,6 @@
 /* Options:
-Date: 2024-03-01 03:34:06
-Version: 8.13
+Date: 2024-03-17 02:49:05
+Version: 8.22
 Tip: To override a DTO option, remove "//" prefix before updating
 BaseUrl: https://localhost:5001
 
@@ -13,117 +13,140 @@ BaseUrl: https://localhost:5001
 */
 
 "use strict";
-export class QueryBase {
-    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+export class Post {
+    /** @param {{id?:number,postTypeId?:number,acceptedAnswerId?:number,parentId?:number,score?:number,viewCount?:number,title?:string,contentLicense?:string,favoriteCount?:number,creationDate?:string,lastActivityDate?:string,lastEditDate?:string,lastEditorUserId?:number,ownerUserId?:number,tags?:string[],slug?:string,summary?:string,body?:string}} [init] */
     constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    id;
+    /** @type {number} */
+    postTypeId;
     /** @type {?number} */
-    skip;
+    acceptedAnswerId;
     /** @type {?number} */
-    take;
+    parentId;
+    /** @type {number} */
+    score;
+    /** @type {?number} */
+    viewCount;
     /** @type {string} */
-    orderBy;
+    title;
     /** @type {string} */
-    orderByDesc;
+    contentLicense;
+    /** @type {?number} */
+    favoriteCount;
     /** @type {string} */
-    include;
+    creationDate;
     /** @type {string} */
-    fields;
-    /** @type {{ [index: string]: string; }} */
-    meta;
-}
-/** @typedef T {any} */
-export class QueryDb extends QueryBase {
-    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
-    constructor(init) { super(init); Object.assign(this, init) }
+    lastActivityDate;
+    /** @type {?string} */
+    lastEditDate;
     /** @type {?number} */
-    skip;
+    lastEditorUserId;
     /** @type {?number} */
-    take;
-    /** @type {string} */
-    orderBy;
-    /** @type {string} */
-    orderByDesc;
+    ownerUserId;
+    /** @type {string[]} */
+    tags;
     /** @type {string} */
-    include;
+    slug;
     /** @type {string} */
-    fields;
-    /** @type {{ [index: string]: string; }} */
-    meta;
+    summary;
+    /** @type {?string} */
+    body;
 }
-export class AuditBase {
-    /** @param {{createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string}} [init] */
+export class Comment {
+    /** @param {{body?:string,createdBy?:string,createdDate?:string}} [init] */
     constructor(init) { Object.assign(this, init) }
     /** @type {string} */
-    createdDate;
+    body;
     /** @type {string} */
     createdBy;
     /** @type {string} */
-    modifiedDate;
+    createdDate;
+}
+export class ChoiceMessage {
+    /** @param {{role?:string,content?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
     /** @type {string} */
-    modifiedBy;
-    /** @type {?string} */
-    deletedDate;
+    role;
     /** @type {string} */
-    deletedBy;
+    content;
 }
-/** @typedef {'Single'|'Double'|'Queen'|'Twin'|'Suite'} */
-export var RoomType;
-(function (RoomType) {
-    RoomType["Single"] = "Single"
-    RoomType["Double"] = "Double"
-    RoomType["Queen"] = "Queen"
-    RoomType["Twin"] = "Twin"
-    RoomType["Suite"] = "Suite"
-})(RoomType || (RoomType = {}));
-export class Coupon {
-    /** @param {{id?:string,description?:string,discount?:number,expiryDate?:string}} [init] */
+export class Choice {
+    /** @param {{index?:number,message?:ChoiceMessage}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    index;
+    /** @type {ChoiceMessage} */
+    message;
+}
+export class Answer {
+    /** @param {{id?:string,object?:string,created?:number,model?:string,choices?:Choice[],usage?:{ [index: string]: number; },temperature?:number,comments?:Comment[],votes?:number,upVotes?:number,downVotes?:number}} [init] */
     constructor(init) { Object.assign(this, init) }
     /** @type {string} */
     id;
     /** @type {string} */
-    description;
+    object;
     /** @type {number} */
-    discount;
+    created;
     /** @type {string} */
-    expiryDate;
-}
-export class Booking extends AuditBase {
-    /** @param {{id?:number,name?:string,roomType?:RoomType,roomNumber?:number,bookingStartDate?:string,bookingEndDate?:string,cost?:number,couponId?:string,discount?:Coupon,notes?:string,cancelled?:boolean,createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string,createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string}} [init] */
-    constructor(init) { super(init); Object.assign(this, init) }
+    model;
+    /** @type {Choice[]} */
+    choices;
+    /** @type {{ [index: string]: number; }} */
+    usage;
     /** @type {number} */
-    id;
-    /** @type {string} */
-    name;
-    /** @type {RoomType} */
-    roomType;
+    temperature;
+    /** @type {Comment[]} */
+    comments;
     /** @type {number} */
-    roomNumber;
-    /** @type {string} */
-    bookingStartDate;
-    /** @type {?string} */
-    bookingEndDate;
+    votes;
     /** @type {number} */
-    cost;
-    /** @type {?string} */
-    couponId;
-    /** @type {Coupon} */
-    discount;
+    upVotes;
+    /** @type {number} */
+    downVotes;
+}
+export class QuestionAndAnswers {
+    /** @param {{id?:number,post?:Post,postComments?:Comment[],answers?:Answer[]}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    id;
+    /** @type {Post} */
+    post;
+    /** @type {Comment[]} */
+    postComments;
+    /** @type {Answer[]} */
+    answers;
+}
+export class RenderHome {
+    /** @param {{tab?:string,posts?:Post[]}} [init] */
+    constructor(init) { Object.assign(this, init) }
     /** @type {?string} */
-    notes;
-    /** @type {?boolean} */
-    cancelled;
-    /** @type {string} */
-    createdDate;
+    tab;
+    /** @type {Post[]} */
+    posts;
+}
+export class QueryBase {
+    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {?number} */
+    skip;
+    /** @type {?number} */
+    take;
     /** @type {string} */
-    createdBy;
+    orderBy;
     /** @type {string} */
-    modifiedDate;
+    orderByDesc;
     /** @type {string} */
-    modifiedBy;
-    /** @type {?string} */
-    deletedDate;
+    include;
     /** @type {string} */
-    deletedBy;
+    fields;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+/** @typedef T {any} */
+export class QueryDb extends QueryBase {
+    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { super(init); Object.assign(this, init) }
 }
 export class PageStats {
     /** @param {{label?:string,total?:number}} [init] */
@@ -171,6 +194,12 @@ export class AdminDataResponse {
     /** @type {PageStats[]} */
     pageStats;
 }
+export class UpdateUserProfileResponse {
+    /** @param {{responseStatus?:ResponseStatus}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {ResponseStatus} */
+    responseStatus;
+}
 export class AuthenticateResponse {
     /** @param {{userId?:string,sessionId?:string,userName?:string,displayName?:string,referrerUrl?:string,bearerToken?:string,refreshToken?:string,refreshTokenExpiry?:string,profileUrl?:string,roles?:string[],permissions?:string[],responseStatus?:ResponseStatus,meta?:{ [index: string]: string; }}} [init] */
     constructor(init) { Object.assign(this, init) }
@@ -216,14 +245,6 @@ export class QueryResponse {
     /** @type {ResponseStatus} */
     responseStatus;
 }
-export class IdResponse {
-    /** @param {{id?:string,responseStatus?:ResponseStatus}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {string} */
-    id;
-    /** @type {ResponseStatus} */
-    responseStatus;
-}
 export class Hello {
     /** @param {{name?:string}} [init] */
     constructor(init) { Object.assign(this, init) }
@@ -239,6 +260,61 @@ export class AdminData {
     getMethod() { return 'GET' }
     createResponse() { return new AdminDataResponse() }
 }
+export class DeleteCdnFilesMq {
+    /** @param {{files?:string[]}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string[]} */
+    files;
+    getTypeName() { return 'DeleteCdnFilesMq' }
+    getMethod() { return 'POST' }
+    createResponse () { };
+}
+export class DeleteCdnFile {
+    /** @param {{file?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    file;
+    getTypeName() { return 'DeleteCdnFile' }
+    getMethod() { return 'POST' }
+    createResponse() { }
+}
+export class GetCdnFile {
+    /** @param {{file?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    file;
+    getTypeName() { return 'GetCdnFile' }
+    getMethod() { return 'POST' }
+    createResponse () { };
+}
+export class UpdateUserProfile {
+    constructor(init) { Object.assign(this, init) }
+    getTypeName() { return 'UpdateUserProfile' }
+    getMethod() { return 'POST' }
+    createResponse() { return new UpdateUserProfileResponse() }
+}
+export class GetUserAvatar {
+    /** @param {{userName?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    userName;
+    getTypeName() { return 'GetUserAvatar' }
+    getMethod() { return 'GET' }
+    createResponse() { return new Blob() }
+}
+export class RenderComponent {
+    /** @param {{ifQuestionModified?:number,question?:QuestionAndAnswers,home?:RenderHome}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {?number} */
+    ifQuestionModified;
+    /** @type {?QuestionAndAnswers} */
+    question;
+    /** @type {?RenderHome} */
+    home;
+    getTypeName() { return 'RenderComponent' }
+    getMethod() { return 'POST' }
+    createResponse() { }
+}
 export class Authenticate {
     /** @param {{provider?:string,userName?:string,password?:string,rememberMe?:boolean,accessToken?:string,accessTokenSecret?:string,returnUrl?:string,errorView?:string,meta?:{ [index: string]: string; }}} [init] */
     constructor(init) { Object.assign(this, init) }
@@ -266,148 +342,11 @@ export class Authenticate {
     getMethod() { return 'POST' }
     createResponse() { return new AuthenticateResponse() }
 }
-export class QueryBookings extends QueryDb {
-    /** @param {{id?:number,skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+export class QueryPosts extends QueryDb {
+    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
     constructor(init) { super(init); Object.assign(this, init) }
-    /** @type {?number} */
-    id;
-    /** @type {?number} */
-    skip;
-    /** @type {?number} */
-    take;
-    /** @type {string} */
-    orderBy;
-    /** @type {string} */
-    orderByDesc;
-    /** @type {string} */
-    include;
-    /** @type {string} */
-    fields;
-    /** @type {{ [index: string]: string; }} */
-    meta;
-    getTypeName() { return 'QueryBookings' }
+    getTypeName() { return 'QueryPosts' }
     getMethod() { return 'GET' }
     createResponse() { return new QueryResponse() }
 }
-export class QueryCoupons extends QueryDb {
-    /** @param {{id?:string,skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
-    constructor(init) { super(init); Object.assign(this, init) }
-    /** @type {string} */
-    id;
-    /** @type {?number} */
-    skip;
-    /** @type {?number} */
-    take;
-    /** @type {string} */
-    orderBy;
-    /** @type {string} */
-    orderByDesc;
-    /** @type {string} */
-    include;
-    /** @type {string} */
-    fields;
-    /** @type {{ [index: string]: string; }} */
-    meta;
-    getTypeName() { return 'QueryCoupons' }
-    getMethod() { return 'GET' }
-    createResponse() { return new QueryResponse() }
-}
-export class CreateBooking {
-    /** @param {{name?:string,roomType?:RoomType,roomNumber?:number,cost?:number,bookingStartDate?:string,bookingEndDate?:string,notes?:string,couponId?:string}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /**
-     * @type {string}
-     * @description Name this Booking is for */
-    name;
-    /** @type {RoomType} */
-    roomType;
-    /** @type {number} */
-    roomNumber;
-    /** @type {number} */
-    cost;
-    /** @type {string} */
-    bookingStartDate;
-    /** @type {?string} */
-    bookingEndDate;
-    /** @type {?string} */
-    notes;
-    /** @type {?string} */
-    couponId;
-    getTypeName() { return 'CreateBooking' }
-    getMethod() { return 'POST' }
-    createResponse() { return new IdResponse() }
-}
-export class UpdateBooking {
-    /** @param {{id?:number,name?:string,roomType?:RoomType,roomNumber?:number,cost?:number,bookingStartDate?:string,bookingEndDate?:string,notes?:string,couponId?:string,cancelled?:boolean}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {number} */
-    id;
-    /** @type {?string} */
-    name;
-    /** @type {?RoomType} */
-    roomType;
-    /** @type {?number} */
-    roomNumber;
-    /** @type {?number} */
-    cost;
-    /** @type {?string} */
-    bookingStartDate;
-    /** @type {?string} */
-    bookingEndDate;
-    /** @type {?string} */
-    notes;
-    /** @type {?string} */
-    couponId;
-    /** @type {?boolean} */
-    cancelled;
-    getTypeName() { return 'UpdateBooking' }
-    getMethod() { return 'PATCH' }
-    createResponse() { return new IdResponse() }
-}
-export class DeleteBooking {
-    /** @param {{id?:number}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {number} */
-    id;
-    getTypeName() { return 'DeleteBooking' }
-    getMethod() { return 'DELETE' }
-    createResponse() { }
-}
-export class CreateCoupon {
-    /** @param {{description?:string,discount?:number,expiryDate?:string}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {string} */
-    description;
-    /** @type {number} */
-    discount;
-    /** @type {string} */
-    expiryDate;
-    getTypeName() { return 'CreateCoupon' }
-    getMethod() { return 'POST' }
-    createResponse() { return new IdResponse() }
-}
-export class UpdateCoupon {
-    /** @param {{id?:string,description?:string,discount?:number,expiryDate?:string}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {string} */
-    id;
-    /** @type {string} */
-    description;
-    /** @type {number} */
-    discount;
-    /** @type {string} */
-    expiryDate;
-    getTypeName() { return 'UpdateCoupon' }
-    getMethod() { return 'PATCH' }
-    createResponse() { return new IdResponse() }
-}
-export class DeleteCoupon {
-    /** @param {{id?:string}} [init] */
-    constructor(init) { Object.assign(this, init) }
-    /** @type {string} */
-    id;
-    getTypeName() { return 'DeleteCoupon' }
-    getMethod() { return 'DELETE' }
-    createResponse() { }
-}
 
diff --git a/MyApp/wwwroot/pages/components/EditProfile.mjs b/MyApp/wwwroot/pages/components/EditProfile.mjs
new file mode 100644
index 0000000..291219c
--- /dev/null
+++ b/MyApp/wwwroot/pages/components/EditProfile.mjs
@@ -0,0 +1,36 @@
+import { useClient, useAuth } from "@servicestack/vue"
+import { UpdateUserProfile } from "dtos.mjs"
+
+export default {
+    template:`<form @submit.prevent="submit" class="mt-8">
+        <div class="px-4 sm:px-6">
+            <FileInput id="profileUrl" label="Avatar" v-model="user.profileUrl" />
+        </div>
+        
+        <div class="mt-4 bg-gray-50 dark:bg-gray-800 px-4 py-3 text-right sm:px-12">
+            <div class="flex justify-between space-x-3">
+                <div></div>
+                <div>
+                    <PrimaryButton>Save</PrimaryButton>
+                </div>
+            </div>
+        </div>        
+    </form>`,
+    
+    setup() {
+        const client = useClient()
+        const { user } = useAuth()
+        
+        user.value.profileUrl = `/avatar/${user.value.userName}?t=${new Date().getTime()}`
+        
+        async function submit(e) {
+            const api = await client.apiForm(new UpdateUserProfile(), new FormData(e.target))
+            if (api.succeeded) {
+                user.value.profileUrl = `/avatar/${user.value.userName}?t=${new Date().getTime()}`
+                const el = document.querySelector('#user-avatar')
+                if (el) el.src = user.value.profileUrl 
+            }
+        }
+        return { user, submit }
+    }
+}