diff --git a/frontend/src/components/UserMenu/AccountModal/index.jsx b/frontend/src/components/UserMenu/AccountModal/index.jsx
index cb39fdd5904..9fac4aaebb9 100644
--- a/frontend/src/components/UserMenu/AccountModal/index.jsx
+++ b/frontend/src/components/UserMenu/AccountModal/index.jsx
@@ -7,6 +7,7 @@ import { Plus, X } from "@phosphor-icons/react";
export default function AccountModal({ user, hideModal }) {
const { pfp, setPfp } = usePfp();
+
const handleFileUpload = async (event) => {
const file = event.target.files[0];
if (!file) return false;
@@ -133,6 +134,10 @@ export default function AccountModal({ user, hideModal }) {
required
autoComplete="off"
/>
+
+ Username must be only contain lowercase letters, numbers,
+ underscores, and hyphens with no spaces
+
diff --git a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
index c784228b17f..3af7ebd4a26 100644
--- a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
@@ -7,6 +7,7 @@ import { RoleHintDisplay } from "..";
export default function NewUserModal({ closeModal }) {
const [error, setError] = useState(null);
const [role, setRole] = useState("default");
+
const handleCreate = async (e) => {
setError(null);
e.preventDefault();
@@ -54,7 +55,18 @@ export default function NewUserModal({ closeModal }) {
minLength={2}
required={true}
autoComplete="off"
+ pattern="^[a-z0-9_-]+$"
+ onInvalid={(e) =>
+ e.target.setCustomValidity(
+ "Username must be only contain lowercase letters, numbers, underscores, and hyphens with no spaces"
+ )
+ }
+ onChange={(e) => e.target.setCustomValidity("")}
/>
+
+ Username must be only contain lowercase letters, numbers,
+ underscores, and hyphens with no spaces
+
+
+ Password must be at least 8 characters long
+
+
+ Password must be at least 8 characters long
+