feat: init project SelfChckout

package/components/organisms/LoginForm.tsx

@@ -0,0 +1,65 @@
+"use client"
+import { Box, Typography } from "@mui/material"
+import { useRouter } from "next/navigation"
+import React, { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { auth } from "@app/account/controller/AuthController"
+import Button from "@atoms/Button"
+import Input from "@atoms/Input"
+import Label from "@atoms/Label"
+
+const LoginForm: React.FC = () => {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+  const { t } = useTranslation()
+
+  const handleLogin = async () => {
+    const token = await auth(username, password)
+    if (token) {
+      router.push("/home")
+    } else {
+      setError( t("msj_Incorrect_credentials_try_again."))
+    }
+  }
+
+  return (
+    <Box
+      component="form"
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleLogin()
+      }}
+      sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}
+    >
+      <Box>
+        <Label htmlFor={t("lbl_username")} text={t("lbl_username")} />
+        <Input
+          type="text"
+          placeholder={t("msj_enter_your_username")}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          autocomplete="username"
+        />
+      </Box>
+
+      <Box>
+        <Label htmlFor={t("lbl_password")} text={t("lbl_password")} />
+        <Input
+          type="password"
+          placeholder={t("msj_enter_your_password")}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autocomplete="current-password"
+        />
+      </Box>
+
+      {error && <Typography color="error">{error}</Typography>}
+
+      <Button label={t("lbl_login")} onClick={handleLogin} variant="primary" />
+    </Box>
+  )
+}
+
+export default LoginForm