Some new inputfield types
This commit is contained in:
Peter KW
parent
a5aac2065d
commit
2f3f7261a0
4 changed files with 180 additions and 0 deletions
38
frontend/src/Components/Inputs/DescriptionInput.tsx
Normal file
38
frontend/src/Components/Inputs/DescriptionInput.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { projDescHighLimit, projDescLowLimit } from "../../Data/constants";
|
||||
|
||||
export default function DescriptionInput(props: {
|
||||
desc: string;
|
||||
placeholder: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
className={
|
||||
props.desc.length <= 100
|
||||
? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
: "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
}
|
||||
spellCheck="true"
|
||||
id="New desc"
|
||||
type="text"
|
||||
placeholder={props.placeholder}
|
||||
value={props.desc}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<div className="my-1">
|
||||
{props.desc.length > projDescHighLimit && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
Description must be under 100 characters
|
||||
</p>
|
||||
)}
|
||||
{props.desc.length <= projDescHighLimit &&
|
||||
props.desc.length > projDescLowLimit && (
|
||||
<p className="text-green-500 pl-2 text-[13px] text-left">
|
||||
Valid project description!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
44
frontend/src/Components/Inputs/PasswordInput.tsx
Normal file
44
frontend/src/Components/Inputs/PasswordInput.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { passwordLength } from "../../Data/constants";
|
||||
import { lowercase } from "../../Data/regex";
|
||||
|
||||
export default function PasswordInput(props: {
|
||||
password: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}): JSX.Element {
|
||||
const password = props.password;
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
className={
|
||||
password.length === passwordLength && lowercase.test(password)
|
||||
? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
: "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
}
|
||||
spellCheck="false"
|
||||
id="New password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<div className="my-1">
|
||||
{password.length === passwordLength &&
|
||||
lowercase.test(props.password) && (
|
||||
<p className="text-green-500 pl-2 text-[13px] text-left">
|
||||
Valid password!
|
||||
</p>
|
||||
)}
|
||||
{password.length !== passwordLength && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
Password must be 6 characters
|
||||
</p>
|
||||
)}
|
||||
{!lowercase.test(password) && password !== "" && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
No number, uppercase or special <br /> characters allowed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
48
frontend/src/Components/Inputs/ProjectNameInput.tsx
Normal file
48
frontend/src/Components/Inputs/ProjectNameInput.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { projNameHighLimit, projNameLowLimit } from "../../Data/constants";
|
||||
import { alphanumeric } from "../../Data/regex";
|
||||
|
||||
export default function ProjectNameInput(props: {
|
||||
name: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}): JSX.Element {
|
||||
const name = props.name;
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
className={
|
||||
name.length >= projNameLowLimit &&
|
||||
name.length <= projNameHighLimit &&
|
||||
alphanumeric.test(name)
|
||||
? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
: "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
}
|
||||
spellCheck="false"
|
||||
id="New name"
|
||||
type="text"
|
||||
placeholder="Project name"
|
||||
value={name}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<div className="my-1">
|
||||
{!alphanumeric.test(name) && name !== "" && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
No special characters allowed
|
||||
</p>
|
||||
)}
|
||||
{(name.length < projNameLowLimit ||
|
||||
name.length > projNameHighLimit) && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
Project name must be 10-99 characters
|
||||
</p>
|
||||
)}
|
||||
{alphanumeric.test(props.name) &&
|
||||
name.length >= projNameHighLimit &&
|
||||
name.length <= projNameHighLimit && (
|
||||
<p className="text-green-500 pl-2 text-[13px] text-left">
|
||||
Valid project name!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
50
frontend/src/Components/Inputs/UsernameInput.tsx
Normal file
50
frontend/src/Components/Inputs/UsernameInput.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { usernameLowLimit, usernameUpLimit } from "../../Data/constants";
|
||||
import { alphanumeric } from "../../Data/regex";
|
||||
|
||||
export default function UsernameInput(props: {
|
||||
username: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}): JSX.Element {
|
||||
const username = props.username;
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
className={
|
||||
username.length >= usernameLowLimit &&
|
||||
username.length <= usernameUpLimit &&
|
||||
alphanumeric.test(props.username)
|
||||
? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
: "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
||||
}
|
||||
spellCheck="false"
|
||||
id="New username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<div className="my-1">
|
||||
{alphanumeric.test(username) &&
|
||||
username.length >= usernameLowLimit &&
|
||||
username.length <= usernameUpLimit && (
|
||||
<p className="text-green-500 pl-2 text-[13px] text-left">
|
||||
Valid username!
|
||||
</p>
|
||||
)}
|
||||
{!alphanumeric.test(username) && username !== "" && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
No special characters allowed
|
||||
</p>
|
||||
)}
|
||||
{!(
|
||||
username.length >= usernameLowLimit &&
|
||||
username.length <= usernameUpLimit
|
||||
) && (
|
||||
<p className="text-red-600 pl-2 text-[13px] text-left">
|
||||
Username must be 5-10 characters
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue