From bf2aa62ad5401158d2a8cada32c26d4db040769f Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:01:43 +0200
Subject: [PATCH] Create LoginFields component

---
 .../components/LoginFields/LoginFields.jsx    | 26 +++++++++++++++++++
 .../LoginTab/components/LoginFields/index.js  |  1 +
 2 files changed, 27 insertions(+)
 create mode 100644 dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx
 create mode 100644 dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/index.js

diff --git a/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx b/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx
new file mode 100644
index 0000000..af5310e
--- /dev/null
+++ b/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx
@@ -0,0 +1,26 @@
+import {IconButton, InputAdornment, TextField} from "@mui/material";
+import {Key, Person, Visibility, VisibilityOff} from "@mui/icons-material";
+import {useState} from "react";
+
+export const LoginFields = ({username, setUsername, password, setPassword}) => {
+    const [passwordShown, setPasswordShown] = useState(false);
+
+    return (
+        <>
+            <TextField label="Username" variant="outlined" sx={{width: "20rem"}} type="text"
+                       placeholder="Username" autoComplete="username" value={username}
+                       onChange={(e) => setUsername(e.target.value)}
+                       InputProps={{startAdornment: <InputAdornment position="start"><Person/></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="current-password"
+                       value={password} onChange={(e) => setPassword(e.target.value)}/>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/index.js b/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/index.js
new file mode 100644
index 0000000..6546367
--- /dev/null
+++ b/dashboard/src/states/Login/tabs/LoginTab/components/LoginFields/index.js
@@ -0,0 +1 @@
+export {LoginFields as default} from "./LoginFields.jsx";
\ No newline at end of file