@canmingir/link 1.2.11 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -21,6 +21,7 @@
     "cypress": "cypress open --browser chrome"
   },
   "dependencies": {
+    "@aws-sdk/client-cognito-identity-provider": "^3.968.0",
     "@chatscope/chat-ui-kit-react": "^1.10.1",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
@@ -101,7 +102,7 @@
     "playwright": "^1.55.1",
     "prettier": "^2.8.8",
     "storybook": "^9.1.8",
-    "vite": "^7.1.8",
+    "vite": "^7.3.1",
     "vite-plugin-checker": "^0.9.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^3.2.4"

package/src/config/schemas.js

@@ -10,6 +10,12 @@ export const ConfigSchema = Joi.object({
     host: Joi.string().uri().required(),
     path: Joi.string().required(),
   }).optional(),
+  credentials: Joi.object({
+    provider: Joi.string().valid("DEMO", "COGNITO").required(),
+    region: Joi.string().optional(),
+    userPoolId: Joi.string().optional(),
+    clientId: Joi.string().optional(),
+  }).optional(),
   project: Joi.object({
     nucleoid: Joi.object().optional(),
     github: Joi.object({

package/src/http/index.js

@@ -86,27 +86,38 @@ 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", {
-      refreshToken: storage.get("link", "refreshToken"),
-      appId,
-      projectId,
-      identityProvider,
-    });
+    const isDemo = identityProvider?.toUpperCase() === "DEMO";
+
+    const { data } = isDemo
+      ? await oauth.post("/oauth/demo", {
+          appId,
+          projectId,
+          username: "admin",
+          password: "admin",
+        })
+      : await oauth.post("/oauth", {
+          refreshToken: storage.get("link", "refreshToken"),
+          appId,
+          projectId,
+          identityProvider,
+        });
 
-    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

@@ -94,8 +94,23 @@ function ProjectBar() {
     const refreshToken = storage.get("link", "refreshToken");
     const identityProvider = storage.get("link", "identityProvider");
 
-    oauth
-      .post("/oauth", { appId, refreshToken, projectId, 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,
+        });
+
+    request
       .then(({ data }) => {
         const { refreshToken, accessToken } = data;
         storage.set("link", "accessToken", accessToken);
@@ -104,9 +119,7 @@ function ProjectBar() {
       })
       .finally(() => {
         setSelectedProject(project);
-
         publish("PROJECT_SELECTED", { projectId });
-
         search.onFalse();
         setSearchQuery("");
       });

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,5 @@
+import CognitoLogin from "../widgets/Login/CognitoLogin";
+import DemoLogin from "../widgets/Login/DemoLogin";
 import LoginForm from "../widgets/LoginForm/LoginForm";
 import Page from "../layouts/Page";
 import React from "react";
@@ -6,7 +8,7 @@ import { storage } from "@nucleoidjs/webstorage";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 function LoginPage() {
-  const { name, template } = config();
+  const { name, template, credentials } = config();
   const formColor = "#a8a9ad";
   const navigate = useNavigate();
 
@@ -28,6 +30,18 @@ function LoginPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigate]);
 
+  if (credentials?.provider === "COGNITO") {
+    return <CognitoLogin />;
+  }
+
+  if (credentials?.provider === "DEMO") {
+    return (
+      <Page title={`Sign in to ${name}`}>
+        <DemoLogin />
+      </Page>
+    );
+  }
+
   return (
     <Page title={`Sign in to ${name}`}>
       <LoginForm icon={template.login.icon} name={name} formColor={formColor} />

package/src/widgets/Login/CognitoLogin.jsx

@@ -0,0 +1,45 @@
+import { loginWithCognito } from "./cognitoAuth";
+import { storage } from "@nucleoidjs/webstorage";
+import { useState } from "react";
+
+import { Button, Stack, TextField, Typography } from "@mui/material";
+
+export default function CognitoLogin() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const tokens = await loginWithCognito(username, password);
+      console.log("Login successful, tokens:", tokens);
+      storage.set("link", "accessToken", tokens.AccessToken);
+      storage.set("link", "refreshToken", tokens.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

@@ -0,0 +1,178 @@
+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";
+import { storage } from "@nucleoidjs/webstorage";
+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", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        appId: appId,
+        projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
+        username,
+        password,
+      }),
+    });
+
+    if (!res.ok) throw new Error("Demo login failed");
+
+    const data = await res.json();
+
+    storage.set("link", "accessToken", data.accessToken);
+    storage.set("link", "refreshToken", data.refreshToken);
+    storage.set("link", "identityProvider", "Demo");
+
+    navigate("/");
+  }
+
+  return (
+    <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>
+
+      <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/cognitoAuth.jsx

@@ -0,0 +1,44 @@
+import config from "../../config/config";
+
+import {
+  CognitoIdentityProviderClient,
+  InitiateAuthCommand,
+} from "@aws-sdk/client-cognito-identity-provider";
+
+let client = null;
+
+function getClient() {
+  if (!client) {
+    const { credentials } = config();
+    if (!credentials) {
+      throw new Error("Cognito credentials not initialized yet");
+    }
+
+    client = new CognitoIdentityProviderClient({
+      region: credentials.region,
+    });
+
+    console.log("Initialized Cognito Client with region:", credentials.region);
+  }
+
+  return client;
+}
+
+export async function loginWithCognito(username, password) {
+  const { credentials } = config();
+  if (!credentials) {
+    throw new Error("CONFIG not initialized yet. Wait for CONFIG_INITIALIZED.");
+  }
+
+  const command = new InitiateAuthCommand({
+    AuthFlow: "USER_PASSWORD_AUTH",
+    ClientId: credentials.clientId,
+    AuthParameters: {
+      USERNAME: username,
+      PASSWORD: password,
+    },
+  });
+
+  const response = await getClient().send(command);
+  return response.AuthenticationResult;
+}