LicenseAPI/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added all RegisterFields.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-09-09 17:58:56 +02:00
parent 60fa36a65e
commit cf2e42682b
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
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="Benutzername" variant="outlined" sx={{width: "20rem"}} type="text"
placeholder="Benutzername" 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="Passwort" variant="outlined" sx={{width: "20rem"}} placeholder="Passwort"
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="current-password"
error={fieldError === "password"} value={password} onChange={(e) => setPassword(e.target.value)}/>
</>
)
}