@ebubekirylmaz/link-test 1.1.13 → 1.2.17

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@ebubekirylmaz/link-test",
-  "version": "1.1.13",
+  "version": "1.2.17",
   "type": "module",
-  "private": false,
   "exports": {
     ".": "./index.js",
     "./layouts": "./src/layouts/index.js",
@@ -35,6 +34,7 @@
     "@nucleoidai/react-event": "^1.1.9",
     "@nucleoidjs/webstorage": "^1.0.5",
     "autosuggest-highlight": "^3.3.4",
+    "aws-amplify": "^6.16.0",
     "axios": "^1.10.0",
     "axios-auth-refresh": "^3.3.6",
     "axios-retry": "^4.4.1",

package/src/http/index.js

@@ -86,9 +86,7 @@ export const fetcher = (url) => instance.get(url).then((res) => res.data);
 const refreshAuthLogic = async (failedRequest) => {
   try {
     const { appId } = config();
-
     const projectId = storage.get("projectId");
-
     const identityProvider = storage.get("link", "identityProvider");
 
     const { data } = await oauth.post("/oauth", {
@@ -96,17 +94,25 @@ const refreshAuthLogic = async (failedRequest) => {
       appId,
       projectId,
       identityProvider,
+      ...(identityProvider === "DEMO" && {
+        username: "admin",
+        password: "admin",
+      }),
     });
 
-    const accessToken = data.accessToken;
+    const { accessToken, refreshToken } = data;
 
     failedRequest.response.config.headers["Authorization"] =
       "Bearer " + accessToken;
 
     storage.set("link", "accessToken", accessToken);
+    if (refreshToken) {
+      storage.set("link", "refreshToken", refreshToken);
+    }
+
     return Promise.resolve();
   } catch (error) {
-    const { name, base } = config();
+    const { base } = config();
 
     storage.remove("link", "accessToken");
     storage.remove("link", "refreshToken");

package/src/layouts/auth/modern.jsx

@@ -4,6 +4,7 @@ import Logo from "../../components/logo";
 import { Outlet } from "react-router";
 import React from "react";
 import Stack from "@mui/material/Stack";
+import { alpha } from "@mui/material/styles";
 import { useResponsive } from "../../hooks/use-responsive";
 
 // ----------------------------------------------------------------------
@@ -16,28 +17,37 @@ export default function AuthModernLayout({ image }) {
       sx={{
         width: 1,
         mx: "auto",
-        maxWidth: 480,
-        px: { xs: 2, md: 8 },
+        maxWidth: 600,
+        px: { xs: 3, md: 10 },
+        py: { xs: 4, md: 0 },
         height: "100vh",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <Logo
-        maxSize={200}
+        maxSize={140}
         sx={{
-          mt: { xs: 2, md: 8 },
-          mb: { xs: 10, md: 8 },
+          mb: { xs: 1, md: 2 },
         }}
       />
 
       <Card
         sx={{
-          py: { xs: 5, md: 0 },
-          px: { xs: 3, md: 0 },
-          boxShadow: { md: "none" },
+          width: 1,
+          py: { xs: 6, md: 8 },
+          px: { xs: 4, md: 6 },
+          boxShadow: {
+            xs: (theme) =>
+              `0 0 2px ${alpha(
+                theme.palette.grey[500],
+                0.16
+              )}, 0 12px 24px -4px ${alpha(theme.palette.grey[500], 0.12)}`,
+            md: "none",
+          },
           overflow: { md: "unset" },
-          bgcolor: { md: "background.default" },
+          bgcolor: { md: "transparent" },
+          borderRadius: 2,
         }}
       >
         <Outlet />
@@ -46,7 +56,12 @@ export default function AuthModernLayout({ image }) {
   );
 
   const renderSection = (
-    <Stack flexGrow={1} sx={{ position: "relative" }}>
+    <Stack
+      flexGrow={1}
+      sx={{
+        position: "relative",
+      }}
+    >
       <Box
         component="img"
         alt="auth"
@@ -59,6 +74,7 @@ export default function AuthModernLayout({ image }) {
           position: "absolute",
           width: "calc(60% - 32px)",
           height: "calc(60% - 32px)",
+          borderRadius: 3,
         }}
       />
     </Stack>

package/src/layouts/common/ProjectBar/index.jsx

@@ -1,3 +1,10 @@
+import { Button, DialogActions } from "@mui/material";
+import Dialog, { dialogClasses } from "@mui/material/Dialog";
+import React, { useCallback, useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+import { useMediaQuery, useTheme } from "@mui/material";
+
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Iconify from "../../../components/Iconify";
@@ -22,13 +29,6 @@ import { useEventListener } from "../../../hooks/use-event-listener";
 import { useNavigate } from "react-router-dom";
 import useProjects from "../../../hooks/useProjects";
 
-import { Button, DialogActions } from "@mui/material";
-import Dialog, { dialogClasses } from "@mui/material/Dialog";
-import React, { useCallback, useState } from "react";
-import { publish, useEvent } from "@nucleoidai/react-event";
-import { storage, useStorage } from "@nucleoidjs/webstorage";
-import { useMediaQuery, useTheme } from "@mui/material";
-
 function ProjectBar() {
   const label = config().template?.projectBar?.label;
   const { appId } = config();
@@ -94,21 +94,14 @@ function ProjectBar() {
     const refreshToken = storage.get("link", "refreshToken");
     const identityProvider = storage.get("link", "identityProvider");
 
-    const isDemo = identityProvider?.toUpperCase() === "DEMO";
-
-    const request = isDemo
-      ? oauth.post("/oauth/demo", {
-          appId,
-          projectId,
-          username: "admin",
-          password: "admin",
-        })
-      : oauth.post("/oauth", {
-          appId,
-          refreshToken,
-          projectId,
-          identityProvider,
-        });
+    const request = oauth.post("/oauth", {
+      appId,
+      refreshToken,
+      projectId,
+      identityProvider,
+      username: "admin",
+      password: "admin",
+    });
 
     request
       .then(({ data }) => {

package/src/lib/AddItemWizard/AddItemWizard.jsx

@@ -1,3 +1,6 @@
+import { Grid, Stack, Switch, Typography } from "@mui/material";
+import { publish, useEvent } from "@nucleoidai/react-event";
+
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
@@ -7,9 +10,6 @@ import SelectAvatar from "../IconSelector/IconSelector";
 import SparkleInput from "../SparkleInput/SparkleInput";
 import StepComponent from "../StepComponent/StepComponent";
 
-import { Grid, Stack, Switch, Typography } from "@mui/material";
-import { publish, useEvent } from "@nucleoidai/react-event";
-
 function AddItemWizard({ onSubmit, items, steps, stepExp }) {
   const [activeStep, setActiveStep] = React.useState(0);
   const [newItems, setNewItems] = React.useState(items);

package/src/lib/CustomBreadcrumbs/CustomBreadcrumbs.jsx

@@ -3,9 +3,9 @@ import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Link from "@mui/material/Link";
 import LinkItem from "./link-item";
 import PropTypes from "prop-types";
+import React from "react";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-
 export default function CustomBreadcrumbs({
   links,
   action,

package/src/lib/CustomPopover/usePopover.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 export default function usePopover() {
   const [open, setOpen] = useState(null);

package/src/lib/FormProvider/FormProvider.jsx

@@ -1,6 +1,6 @@
 import { FormProvider as Form } from "react-hook-form";
 import PropTypes from "prop-types";
-
+import React from "react";
 export default function FormProvider({ children, onSubmit, methods }) {
   return (
     <Form {...methods}>

package/src/lib/ItemSummary/ItemSummary.jsx

@@ -1,5 +1,6 @@
 import DialogContentText from "@mui/material/DialogContentText";
 import Grid from "@mui/material/Grid";
+import React from "react";
 import SvgColor from "../SvgColor";
 
 import {

package/src/lib/ItemSummary/ItemsSummary.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import SvgColor from "../SvgColor";
 
 import {

package/src/lib/RHFTextfield/RHFTextfield.jsx

@@ -1,8 +1,9 @@
-import { Controller, useFormContext } from "react-hook-form";
-
 import PropTypes from "prop-types";
+import React from "react";
 import TextField from "@mui/material/TextField";
 
+import { Controller, useFormContext } from "react-hook-form";
+
 export default function RHFTextField({ name, helperText, type, ...other }) {
   const { control } = useFormContext();
 

package/src/lib/SearchNotFound/SearchNotFound.jsx

@@ -1,6 +1,6 @@
 import Paper from "@mui/material/Paper";
+import React from "react";
 import Typography from "@mui/material/Typography";
-
 export default function SearchNotFound({ query, sx, ...other }) {
   return query ? (
     <Paper

package/src/lib/SvgColor/SvgColor.jsx

@@ -1,6 +1,7 @@
 import Box from "@mui/material/Box";
 import PropTypes from "prop-types";
-import { forwardRef } from "react";
+
+import React, { forwardRef } from "react";
 
 const SvgColor = forwardRef(({ src, sx, ...other }, ref) => (
   <Box

package/src/lib/TableHeadCustom/TableHeadCustom.jsx

@@ -1,11 +1,11 @@
 import Box from "@mui/material/Box";
 import Checkbox from "@mui/material/Checkbox";
 import PropTypes from "prop-types";
+import React from "react";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
-
 const visuallyHidden = {
   border: 0,
   margin: -1,

package/src/lib/TableSelectedAction/TableSelectedAction.jsx

@@ -1,8 +1,8 @@
 import Checkbox from "@mui/material/Checkbox";
 import PropTypes from "prop-types";
+import React from "react";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-
 export default function TableSelectedAction({
   dense,
   action,

package/src/lib/useChart/useChart.js

@@ -1,3 +1,4 @@
+import React from "react";
 import merge from "lodash/merge";
 import { useResponsive } from "../../hooks/use-responsive";
 

package/src/lib/useTable/useTable.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 export default function useTable(props) {
   const [dense, setDense] = useState(!!props?.defaultDense);

package/src/pages/LoginPage.jsx

@@ -1,3 +1,4 @@
+import AmplifyLogin from "../widgets/Login/AmplifyLogin";
 import CognitoLogin from "../widgets/Login/CognitoLogin";
 import DemoLogin from "../widgets/Login/DemoLogin";
 import LoginForm from "../widgets/LoginForm/LoginForm";
@@ -31,7 +32,7 @@ function LoginPage() {
   }, [navigate]);
 
   if (credentials?.provider === "COGNITO") {
-    return <CognitoLogin />;
+    return <AmplifyLogin />;
   }
 
   if (credentials?.provider === "DEMO") {

package/src/widgets/Login/AmplifyLogin.jsx

@@ -0,0 +1,54 @@
+import { Button, Stack, TextField, Typography } from "@mui/material";
+
+import { loginWithAmplify } from "./amplify";
+import { storage } from "@nucleoidjs/webstorage";
+import { useState } from "react";
+
+export default function AmplifyLogin() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const result = await loginWithAmplify(username, password);
+
+      if (result.challenge) {
+        console.log("Challenge required:", result.challenge);
+        alert(`Challenge required: ${result.challenge}`);
+        return;
+      }
+
+      console.log("Login successful, tokens:", result);
+
+      storage.set("link", "accessToken", result.AccessToken);
+      storage.set("link", "refreshToken", result.RefreshToken);
+
+      window.location.href = "/";
+    } catch (e) {
+      console.error("Login error:", e);
+      alert(`Login failed: ${e.message || e}`);
+    }
+  };
+
+  return (
+    <>
+      <Typography variant="h4">Login</Typography>
+      <Stack spacing={2}>
+        <TextField
+          label="Username or Email"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
+          type="password"
+          label="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button variant="contained" onClick={handleLogin}>
+          Login
+        </Button>
+      </Stack>
+    </>
+  );
+}

package/src/widgets/Login/DemoLogin.jsx

@@ -1,4 +1,19 @@
-import { Button, Stack, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  LockOutlined,
+  PersonOutline,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-material";
 import React, { useState } from "react";
 
 import config from "../../config/config";
@@ -8,12 +23,13 @@ import { useNavigate } from "react-router-dom";
 export default function DemoLogin() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
   const { appId } = config();
 
   async function handleLogin() {
-    const res = await fetch("/api/oauth/demo", {
+    const res = await fetch("/api/oauth", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -21,6 +37,7 @@ export default function DemoLogin() {
         projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
         username,
         password,
+        identityProvider: "DEMO",
       }),
     });
 
@@ -30,29 +47,133 @@ export default function DemoLogin() {
 
     storage.set("link", "accessToken", data.accessToken);
     storage.set("link", "refreshToken", data.refreshToken);
-    storage.set("link", "identityProvider", "Demo");
+    storage.set("link", "identityProvider", "DEMO");
 
     navigate("/");
   }
 
   return (
-    <Stack spacing={2} maxWidth={500} mx="auto">
-      <Typography variant="h5">Login</Typography>
-      <TextField
-        label="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <TextField
-        label="Password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <Button variant="contained" onClick={handleLogin}>
+    <Stack spacing={2.5}>
+      <Stack spacing={2}>
+        <TextField
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+        />
+
+        <TextField
+          label="Password"
+          type={showPassword ? "text" : "password"}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                  size="small"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              handleLogin();
+            }
+          }}
+        />
+      </Stack>
+
+      <Button
+        variant="contained"
+        onClick={handleLogin}
+        size="large"
+        fullWidth
+        sx={{
+          mt: 1,
+          py: 1.5,
+          fontSize: "1rem",
+          fontWeight: 600,
+          textTransform: "none",
+          borderRadius: 1.5,
+          boxShadow: (theme) =>
+            `0 8px 16px ${alpha(theme.palette.primary.main, 0.24)}`,
+          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+          "&:hover": {
+            transform: "translateY(-2px)",
+            boxShadow: (theme) =>
+              `0 12px 24px ${alpha(theme.palette.primary.main, 0.32)}`,
+          },
+          "&:active": {
+            transform: "translateY(0px)",
+          },
+        }}
+      >
         Sign in
       </Button>
-      <Typography variant="caption">Use: admin / admin</Typography>
+
+      <Box
+        sx={{
+          mt: 1,
+          textAlign: "center",
+          p: 2,
+          borderRadius: 1.5,
+          bgcolor: (theme) => alpha(theme.palette.info.main, 0.08),
+          border: (theme) =>
+            `1px dashed ${alpha(theme.palette.info.main, 0.24)}`,
+        }}
+      >
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ fontSize: "0.8125rem" }}
+        >
+          Demo credentials:{" "}
+          <Box component="strong" sx={{ color: "text.primary" }}>
+            admin / admin
+          </Box>
+        </Typography>
+      </Box>
     </Stack>
   );
 }

package/src/widgets/Login/amplify.jsx

@@ -0,0 +1,26 @@
+import { Auth } from "aws-amplify";
+import { initAmplifyAuth } from "./amplifyAuth";
+
+export async function loginWithAmplify(username, password) {
+  console.log(Auth.configure());
+
+  initAmplifyAuth();
+
+  const user = await Auth.signIn(username, password);
+
+  // Handle challenges if needed
+  if (user.challengeName) {
+    return {
+      challenge: user.challengeName,
+      user,
+    };
+  }
+
+  const session = user.signInUserSession;
+
+  return {
+    AccessToken: session.accessToken.jwtToken,
+    IdToken: session.idToken.jwtToken,
+    RefreshToken: session.refreshToken.token,
+  };
+}

package/src/widgets/Login/amplifyAuth.jsx

@@ -0,0 +1,25 @@
+import { Amplify } from "aws-amplify";
+import config from "../../config/config";
+
+let initialized = false;
+
+export function initAmplifyAuth() {
+  if (initialized) return;
+
+  const { credentials } = config();
+  if (!credentials) {
+    throw new Error("Cognito credentials not initialized yet");
+  }
+
+  Amplify.configure({
+    Auth: {
+      region: credentials.region,
+      userPoolId: credentials.userPoolId,
+      userPoolWebClientId: credentials.clientId,
+      authenticationFlowType: "USER_SRP_AUTH",
+    },
+  });
+
+  initialized = true;
+  console.log("Amplify Auth initialized (SRP)");
+}

package/vite/vite.js

@@ -57,9 +57,18 @@ async function vite() {
       rollupOptions: {
         output: {
           entryFileNames: `assets/[name].[hash].js`,
-          chunkFileNames: `assets/[name].[hash].js`,
+          chunkFileNames: (chunkInfo) => {
+            if (chunkInfo.name === "config") {
+              return "config.js";
+            }
+            return `assets/[name].[hash].js`;
+          },
           assetFileNames: `assets/[name].[hash].[ext]`,
           manualChunks(id) {
+            if (id.includes("config.js") && !id.includes("node_modules")) {
+              return "config";
+            }
+
             if (id.includes("node_modules")) {
               return id
                 .toString()