Added characters-left indicator to certain input fields, adjusted character limits

Wave/Components/Account/Pages/Manage/Partials/AboutMeFormPartial.razor

@@ -15,7 +15,7 @@
                 <HelpDropdownComponent Body="@Localizer["AboutTheAuthor_Explanation"]"/>
             </span>
         </div>
-        <InputTextArea class="textarea textarea-bordered w-full h-24" maxlength="512"
+        <InputTextArea class="textarea textarea-bordered w-full h-24" maxlength="500" oninput="charactersLeft_onInput(this)"
                        @bind-Value="@Model.AboutTheAuthor" placeholder="@Localizer["AboutTheAuthor_Placeholder"]"/>
         <div class="label">
             <span class="label-text-alt text-error"><ValidationMessage For="() => Model.AboutTheAuthor"/></span>
@@ -29,7 +29,7 @@
                 <HelpDropdownComponent Body="@Localizer["Biography_Explanation"]"/>
             </span>
         </div>
-        <InputTextArea class="textarea textarea-bordered w-full h-48" maxlength="4096"
+        <InputTextArea class="textarea textarea-bordered w-full h-48" maxlength="4000" oninput="charactersLeft_onInput(this)"
                        @bind-Value="@Model.Biography" placeholder="@Localizer["Biography_Placeholder"]"/>
         <div class="label">
             <span class="label-text-alt text-error"><ValidationMessage For="() => Model.Biography"/></span>

Wave/Components/Account/Pages/Manage/Partials/ContactInformationPartial.razor

@@ -13,19 +13,23 @@
 	<DataAnnotationsValidator />
 	
 	<InputLabelComponent For="() => Model.ContactEmail" LabelText="@Localizer["Contact_Email_Label"]">
-		<InputText class="input input-bordered w-full" maxlength="128" type="email" autocomplete="email"
+		<InputText class="input input-bordered w-full" maxlength="128" type="email" autocomplete="email" 
+		           oninput="charactersLeft_onInput(this)"
 		           @bind-Value="@Model.ContactEmail" placeholder="@Localizer["Contact_Email_Placeholder"]" />
 	</InputLabelComponent>
 	<InputLabelComponent For="() => Model.ContactPhone" LabelText="@Localizer["Contact_Phone_Label"]">
-		<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel"
+		<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel" 
+		           oninput="charactersLeft_onInput(this)"
 				   @bind-Value="@Model.ContactPhone" placeholder="@Localizer["Contact_Phone_Placeholder"]" />
 	</InputLabelComponent>
 	<InputLabelComponent For="() => Model.ContactPhoneBusiness" LabelText="@Localizer["Contact_PhoneBusiness_Label"]">
-		<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel"
+		<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel" 
+		           oninput="charactersLeft_onInput(this)"
 				   @bind-Value="@Model.ContactPhoneBusiness" placeholder="@Localizer["Contact_PhoneBusiness_Placeholder"]" />
 	</InputLabelComponent>
 	<InputLabelComponent For="() => Model.ContactWebsite" LabelText="@Localizer["Contact_Website_Label"]">
-		<InputText class="input input-bordered w-full" maxlength="128" type="url" autocomplete="url"
+		<InputText class="input input-bordered w-full" maxlength="128" type="url" autocomplete="url" 
+		           oninput="charactersLeft_onInput(this)"
 				   @bind-Value="@Model.ContactWebsite" placeholder="@Localizer["Contact_Website_Placeholder"]" />
 	</InputLabelComponent>
 	

Wave/Components/Account/Pages/Manage/Partials/LinksPartial.razor

@@ -13,7 +13,8 @@
 		<form id="add-user-link" @formname="add-user-link" @onsubmit="Add" method="post">
 			<AntiforgeryToken />
 			<InputLabelComponent LabelText="@Localizer["Links_Url_Label"]">
-				<input class="input input-bordered" maxlength="1024" autocomplete="off" type="url"
+				<input class="input input-bordered" maxlength="512" autocomplete="off" type="url" 
+				       oninput="charactersLeft_onInput(this)"
 					   name="link-url" value="@Url" placeholder="@Localizer["Links_Url_Placeholder"]" />
 			</InputLabelComponent>
 		</form>
@@ -50,7 +51,7 @@
 	public required ApplicationUser User { get; set; }
 	
 	// Create
-	[SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url")]
+	[SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url"), MaxLength(512)]
 	private string Url { get; set; } = string.Empty;
 
 	// Delete
@@ -62,7 +63,7 @@
 			Message.ShowError("Url is required.");
 			return;
 		}
-		if (Url.Length > 1024) {
+		if (Url.Length > 512) {
 			Message.ShowError("Url is too long.");
 			return;
 		}

Wave/Components/Account/Pages/Manage/Partials/ProfileFormPartial.razor

@@ -12,7 +12,7 @@
 		<div class="label">
 			<span class="label-text">@Localizer["FullName_Label"]</span>
 		</div>
-		<InputText class="input input-bordered w-full" maxlength="64" autocomplete="name"
+		<InputText class="input input-bordered w-full" maxlength="64" autocomplete="name" oninput="charactersLeft_onInput(this)"
 		           @bind-Value="@Model.FullName" placeholder="@Localizer["FullName_Placeholder"]" />
 		<div class="label">
 			<span class="label-text-alt text-error">

Wave/Components/App.razor

@@ -47,6 +47,24 @@
 	<script src="_framework/blazor.web.js" defer></script>
 	<SectionOutlet SectionName="scripts" />
 	<script>
+		charactersLeft_onInput = function(input) {
+			const maxLength = input.maxLength;
+			const currentLength = input.value.length;
+
+			const newLeft = maxLength - currentLength;
+
+			let elem = input.parentNode.querySelector(".characters-left");
+			if (elem) {
+				elem.innerText = newLeft;
+			} else {
+				input.parentNode.classList.add("relative");
+				elem = document.createElement("span");
+				elem.classList.add("characters-left");
+				elem.innerText = newLeft;
+				input.parentNode.appendChild(elem);
+			}
+		}
+
 		window.insertBeforeSelection = function (markdown, startOfLine = false) {
 			const target = document.getElementById("tool-target");
 

Wave/Components/Pages/Partials/ArticleEditorPartial.razor

@@ -31,7 +31,7 @@
 
 	<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8">
 		<InputLabelComponent LabelText="@Localizer["Title_Label"]" For="() => Model.Title">
-			<InputText class="input input-bordered w-full" maxlength="256" required aria-required
+			<InputText class="input input-bordered w-full" maxlength="256" required aria-required oninput="charactersLeft_onInput(this)"
 			           @bind-Value="@Model.Title" placeholder="@Localizer["Title_Placeholder"]" autocomplete="off"/>
 		</InputLabelComponent>
 		
@@ -49,7 +49,7 @@
 		
 		<InputLabelComponent LabelText="@Localizer["Slug_Label"]" For="() => Model.Slug">
 			@if (Article.Status is not ArticleStatus.Published || Article.PublishDate >= DateTimeOffset.UtcNow) {
-				<InputText class="input input-bordered w-full" maxlength="64"
+				<InputText class="input input-bordered w-full" maxlength="64" oninput="charactersLeft_onInput(this)"
 				           @bind-Value="@Model.Slug" placeholder="@Localizer["Slug_Placeholder"]" autocomplete="off"/>
 			} else {
 				<input class="input input-bordered w-full" readonly value="@Model.Slug"

Wave/wwwroot/css/main.css

@@ -51,4 +51,8 @@ @layer components {
     .prose pre:has(code) {
         @apply border-2 border-current;
     }
+
+    .characters-left {
+        @apply absolute right-6 bottom-6 select-none pointer-events-none;
+    }
 }