smueller/LicenseAPI
1
0
Fork 0
mirror of https://github.com/gnmyt/LicenseAPI.git synced 2026-01-10 10:11:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create RegisterFields component

Browse Source
This commit is contained in:
Mathias Wagner
2024-07-20 13:02:45 +02:00
parent 98f29ffa44
commit 55c5112ecd
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
dashboard/src/states/Login/tabs/RegisterTab/components/RegisterFields/RegisterFields.jsx Normal file
View File

@ -0,0 +1,31 @@
import {IconButton, InputAdornment, TextField} from "@mui/material";
import {Email, Key, Person, Visibility, VisibilityOff} from "@mui/icons-material";
import {useState} from "react";
export const RegisterFields = ({username, setUsername, email, setEmail, password, setPassword, fieldError}) => {
const [passwordShown, setPasswordShown] = useState(false);
return (
<>
<TextField label="Username" variant="outlined" sx={{width: "20rem"}} type="text"
placeholder="Username" autoComplete="username" value={username}
error={fieldError === "username"} onChange={(e) => setUsername(e.target.value)}
InputProps={{startAdornment: <InputAdornment position="start"><Person/></InputAdornment>}}/>
<TextField label="E-Mail" variant="outlined" sx={{width: "20rem"}} type="email" placeholder="E-Mail"
autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)}
error={fieldError === "email"}
InputProps={{startAdornment: <InputAdornment position="start"><Email/></InputAdornment>}}/>
<TextField label="Password" variant="outlined" sx={{width: "20rem"}} placeholder="Password"
InputProps={{
startAdornment: <InputAdornment position="start"><Key/></InputAdornment>,
endAdornment: <InputAdornment position="end"
onClick={() => setPasswordShown(!passwordShown)}>
<IconButton>{passwordShown ? <VisibilityOff/> : <Visibility/>}</IconButton>
</InputAdornment>
}} type={passwordShown ? "text" : "password"} autoComplete="new-password"
error={fieldError === "password"} value={password} onChange={(e) => setPassword(e.target.value)}/>
</>
)
}

1
dashboard/src/states/Login/tabs/RegisterTab/components/RegisterFields/index.js Normal file
View File

@ -0,0 +1 @@
export {RegisterFields as default} from "./RegisterFields.jsx";