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