Merge pull request #1238 from xr843/ux/form-max-length

feat: add maxLength constraints to auth and settings form inputs

Author: MODSetter

surfsense_web/app/(home)/login/LocalLoginForm.tsx

@@ -158,6 +158,7 @@ export function LocalLoginForm() {
 						type="email"
 						autoComplete="username"
 						required
+						maxLength={254}
 						placeholder="you@example.com"
 						value={username}
 						onChange={(e) => setUsername(e.target.value)}

surfsense_web/app/(home)/register/page.tsx

@@ -237,6 +237,7 @@ export default function RegisterPage() {
 								type="email"
 								autoComplete="email"
 								required
+								maxLength={254}
 								placeholder="you@example.com"
 								value={email}
 								onChange={(e) => setEmail(e.target.value)}

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx

@@ -94,6 +94,7 @@ export function ProfileContent() {
 									id="display-name"
 									type="text"
 									autoComplete="name"
+									maxLength={100}
 									placeholder={user?.email?.split("@")[0]}
 									value={displayName}
 									onChange={(e) => setDisplayName(e.target.value)}

surfsense_web/components/settings/general-settings-manager.tsx

@@ -148,6 +148,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 						<Label htmlFor="search-space-name">{t("general_name_label")}</Label>
 						<Input
 							id="search-space-name"
+							maxLength={100}
 							placeholder={t("general_name_placeholder")}
 							value={name}
 							onChange={(e) => setName(e.target.value)}

surfsense_web/components/settings/roles-manager.tsx

@@ -876,6 +876,7 @@ function CreateRoleDialog({
 								<Label htmlFor="role-name">Role Name *</Label>
 								<Input
 									id="role-name"
+									maxLength={100}
 									placeholder="e.g., Content Manager"
 									value={name}
 									onChange={(e) => setName(e.target.value)}
@@ -885,6 +886,7 @@ function CreateRoleDialog({
 								<Label htmlFor="role-description">Description</Label>
 								<Input
 									id="role-description"
+									maxLength={500}
 									placeholder="Brief description of this role"
 									value={description}
 									onChange={(e) => setDescription(e.target.value)}
@@ -1034,6 +1036,7 @@ function EditRoleDialog({
 								<Label htmlFor="edit-role-name">Role Name *</Label>
 								<Input
 									id="edit-role-name"
+									maxLength={100}
 									placeholder="e.g., Content Manager"
 									value={name}
 									onChange={(e) => setName(e.target.value)}
@@ -1043,6 +1046,7 @@ function EditRoleDialog({
 								<Label htmlFor="edit-role-description">Description</Label>
 								<Input
 									id="edit-role-description"
+									maxLength={500}
 									placeholder="Brief description of this role"
 									value={description}
 									onChange={(e) => setDescription(e.target.value)}