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 +