Checks if new project name meets requirements

This commit is contained in:
Peter KW 2024-04-13 21:09:07 +02:00
parent ebe0f380c5
commit bcac9c020e

View file

@ -5,11 +5,14 @@ import { Link } from "react-router-dom";
import GetProjectTimes, { projectTimes } from "./GetProjectTimes"; import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
import DeleteProject from "./DeleteProject"; import DeleteProject from "./DeleteProject";
import InputField from "./InputField"; import InputField from "./InputField";
import ProjectNameInput from "./Inputs/ProjectNameInput";
import { alphanumeric } from "../Data/regex";
import { projNameHighLimit, projNameLowLimit } from "../Data/constants";
function ProjectInfoModal(props: { function ProjectInfoModal(props: {
projectname: string; projectname: string;
onClose: () => void; onClose: () => void;
onClick: (username: string) => void; onClick: (username: string, userRole: string) => void;
}): JSX.Element { }): JSX.Element {
const [showInput, setShowInput] = useState(false); const [showInput, setShowInput] = useState(false);
const [users, setUsers] = useState<ProjectMember[]>([]); const [users, setUsers] = useState<ProjectMember[]>([]);
@ -23,6 +26,7 @@ function ProjectInfoModal(props: {
const handleChangeNameView = (): void => { const handleChangeNameView = (): void => {
if (showInput) { if (showInput) {
setNewProjName("");
setShowInput(false); setShowInput(false);
} else { } else {
setShowInput(true); setShowInput(true);
@ -30,7 +34,16 @@ function ProjectInfoModal(props: {
}; };
const handleClickChangeName = (): void => { const handleClickChangeName = (): void => {
if (newProjName === "") return; if (
newProjName.length > projNameHighLimit ||
newProjName.length < projNameLowLimit ||
!alphanumeric.test(newProjName)
) {
alert(
"Please provide valid project name: \n-Between 10-99 characters \n-No special characters (.-!?/*)",
);
return;
}
if ( if (
confirm( confirm(
@ -68,14 +81,12 @@ function ProjectInfoModal(props: {
{showInput && ( {showInput && (
<> <>
<h2 className="text-[20px] font-bold pb-2">Change name:</h2> <h2 className="text-[20px] font-bold pb-2">Change name:</h2>
<div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4"> <div className="border-2 rounded-2xl border-black px-6 pt-6 pb-1 mb-7">
<InputField <ProjectNameInput
type={"text"} name={newProjName}
value={newProjName}
onChange={function (e): void { onChange={function (e): void {
setNewProjName(e.target.value); setNewProjName(e.target.value);
}} }}
placeholder={"Project Name"}
/> />
<div className="px-6 grid grid-cols-2 gap-10"> <div className="px-6 grid grid-cols-2 gap-10">
<Button <Button
@ -130,7 +141,7 @@ function ProjectInfoModal(props: {
className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer" className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
key={user.Username} key={user.Username}
onClick={() => { onClick={() => {
props.onClick(user.Username); props.onClick(user.Username, user.UserRole);
}} }}
> >
<span> <span>