@canmingir/link 1.2.21 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -34,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/Platform.jsx

@@ -1,4 +1,5 @@
 import "./global.css";
+import "./widgets/Login/amplifyAuth";
 
 import ContextProvider from "./ContextProvider/ContextProvider";
 import GlobalSnackMessage from "./GlobalSnackMessage/GlobalSnackMessage";
@@ -9,6 +10,7 @@ import { SettingsProvider } from "./components/settings";
 import { SnackbarProvider } from "notistack";
 import ThemeProvider from "./theme";
 import config from "./config/config";
+import { configureAmplify } from "./widgets/Login/amplifyConfig";
 import http from "./http";
 import { init } from "./config/config";
 import oauth from "./http/oauth";
@@ -19,6 +21,10 @@ import { publish, subscribe, useEvent } from "@nucleoidai/react-event";
 
 init();
 
+if (config().credentials?.provider === "COGNITO") {
+  configureAmplify();
+}
+
 window["@nucleoidai"] = {
   Event: { publish, subscribe, useEvent },
 };

package/src/config/schemas.js

@@ -15,6 +15,7 @@ export const ConfigSchema = Joi.object({
     region: Joi.string().optional(),
     userPoolId: Joi.string().optional(),
     clientId: Joi.string().optional(),
+    requestUrl: Joi.string().uri().optional(),
   }).optional(),
   project: Joi.object({
     nucleoid: Joi.object().optional(),

package/src/http/index.js

@@ -89,21 +89,16 @@ const refreshAuthLogic = async (failedRequest) => {
     const projectId = storage.get("projectId");
     const identityProvider = storage.get("link", "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 { data } = await oauth.post("/oauth", {
+      refreshToken: storage.get("link", "refreshToken"),
+      appId,
+      projectId,
+      identityProvider,
+      ...(identityProvider === "DEMO" && {
+        username: "admin",
+        password: "admin",
+      }),
+    });
 
     const { accessToken, refreshToken } = data;
 

package/src/layouts/auth/modern.jsx

@@ -29,6 +29,8 @@ export default function AuthModernLayout({ image }) {
         maxSize={140}
         sx={{
           mb: { xs: 1, md: 2 },
+          width: 80,
+          height: 80,
         }}
       />
 

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

@@ -91,24 +91,23 @@ function ProjectBar() {
   const handleSelect = (project) => {
     const { id: projectId } = project;
 
-    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 identityProviderRaw = storage.get("link", "identityProvider");
+    const identityProvider = identityProviderRaw?.toUpperCase();
+
+    const payload = {
+      appId,
+      projectId,
+      identityProvider,
+    };
+
+    if (identityProvider === "DEMO") {
+      payload.username = "admin";
+      payload.password = "admin";
+    } else {
+      payload.refreshToken = storage.get("link", "refreshToken");
+    }
+
+    const request = oauth.post("/oauth", payload);
 
     request
       .then(({ data }) => {

package/src/layouts/common/account-popover.jsx

@@ -1,5 +1,3 @@
-import CustomPopover, { usePopover } from "../../components/custom-popover";
-
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
@@ -16,6 +14,8 @@ import { useRouter } from "../../routes/hooks";
 import { useUser } from "../../hooks/use-user";
 import { varHover } from "../../components/animate";
 
+import CustomPopover, { usePopover } from "../../components/custom-popover";
+
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
@@ -27,11 +27,7 @@ export default function AccountPopover() {
 
   const handleLogout = async () => {
     try {
-      storage.remove("link", "accessToken");
-      storage.remove("link", "refreshToken");
-      storage.remove("link", "identityProvider");
-      storage.remove("projectId");
-      storage.remove("landingLevel");
+      storage.clear();
       popover.onClose();
       router.replace("/login");
     } catch (error) {

package/src/pages/Callback.jsx

@@ -33,7 +33,7 @@ function Callback() {
 
     if (state) {
       stateData = JSON.parse(decodeURIComponent(state));
-      identityProvider = stateData.identityProvider;
+      identityProvider = stateData.identityProvider.toUpperCase();
     }
 
     if (error) {
@@ -54,9 +54,9 @@ function Callback() {
     hasProcessed.current = true;
 
     const providerConfigs = {
-      github,
-      linkedin,
-      google,
+      GITHUB: github,
+      LINKEDIN: linkedin,
+      GOOGLE: google,
     };
 
     const providerConfig = providerConfigs[identityProvider];

package/src/widgets/Login/CognitoLogin.jsx

@@ -1,45 +1,335 @@
-import { loginWithCognito } from "./cognitoAuth";
+import config from "../../config/config";
+import { publish } from "@nucleoidai/react-event";
 import { storage } from "@nucleoidjs/webstorage";
+import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
-import { Button, Stack, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  CheckOutlined,
+  EmailOutlined,
+  LockOutlined,
+  MarkEmailReadOutlined,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-material";
+import { confirmSignup, getTokens, login, signup } from "./amplifyAuth";
+
+const inputSx = {
+  "& .MuiOutlinedInput-root": {
+    fontSize: "1rem",
+    "& input": { py: 1.5 },
+    "&:hover fieldset": { borderColor: "primary.main" },
+  },
+};
+
+const primaryButtonSx = {
+  py: 1.5,
+  fontSize: "1rem",
+  fontWeight: 600,
+  textTransform: "none",
+  borderRadius: 1.5,
+  "&:active": { transform: "translateY(0px)" },
+};
 
 export default function CognitoLogin() {
-  const [username, setUsername] = useState("");
+  const [mode, setMode] = useState("login");
+
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const navigate = useNavigate();
+
+  const { appId, credentials } = config();
 
   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 = "/";
+      await login(email, password);
+
+      const tokens = await getTokens();
+      if (!tokens?.accessToken)
+        throw new Error("No Cognito access token received");
+
+      const requestUrl = credentials.requestUrl || "/api/oauth";
+
+      const res = await fetch(requestUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          appId,
+          projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
+          identityProvider: "COGNITO",
+          refreshToken: tokens.accessToken,
+        }),
+      });
+
+      if (!res.ok) throw new Error("Backend OAuth exchange failed");
+
+      const data = await res.json();
+
+      storage.set("link", "accessToken", data.accessToken);
+      storage.set("link", "refreshToken", data.refreshToken);
+      storage.set("link", "identityProvider", "COGNITO");
+
+      navigate("/");
     } catch (e) {
       console.error("Login error:", e);
-      alert(`Login failed: ${e.message || e}`);
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: e.message || "Login failed",
+        severity: "error",
+      });
+    }
+  };
+
+  const handleSignup = async () => {
+    try {
+      await signup(email, password);
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message:
+          "Signup successful! Please check your email for the confirmation code.",
+        severity: "success",
+      });
+      setMode("confirm");
+    } catch (e) {
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: e.message || "Signup failed",
+        severity: "error",
+      });
+    }
+  };
+
+  const handleConfirm = async () => {
+    try {
+      await confirmSignup(email, code);
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: "Account confirmed! You can now log in.",
+        severity: "success",
+      });
+      setMode("login");
+    } catch (e) {
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: e.message || "Confirmation failed",
+        severity: "error",
+      });
     }
   };
 
+  const titles = {
+    login: { heading: "Sign in", sub: "Welcome back! Enter your credentials." },
+    signup: {
+      heading: "Create account",
+      sub: "Sign up to get started for free.",
+    },
+    confirm: {
+      heading: "Verify your email",
+      sub: "Enter the confirmation code sent to your inbox.",
+    },
+  };
+
+  const passwordAdornment = (
+    <InputAdornment position="end">
+      <IconButton
+        onClick={() => setShowPassword(!showPassword)}
+        edge="end"
+        size="small"
+        tabIndex={-1}
+      >
+        {showPassword ? <VisibilityOff /> : <Visibility />}
+      </IconButton>
+    </InputAdornment>
+  );
+
   return (
-    <>
-      <Typography variant="h4">Login</Typography>
+    <Stack spacing={3}>
+      <Box sx={{ mb: 1, textAlign: "center" }}>
+        <Box
+          sx={{
+            width: 52,
+            height: 52,
+            borderRadius: 2,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            mb: 2,
+            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            color: "primary.main",
+          }}
+        >
+          {mode === "confirm" ? (
+            <MarkEmailReadOutlined sx={{ fontSize: 26 }} />
+          ) : (
+            <LockOutlined sx={{ fontSize: 26 }} />
+          )}
+        </Box>
+
+        <Typography variant="h4" fontWeight={700} gutterBottom>
+          {titles[mode].heading}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {titles[mode].sub}
+        </Typography>
+      </Box>
+
       <Stack spacing={2}>
         <TextField
-          label="Username or Email"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          label="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+          }}
+          sx={inputSx}
         />
-        <TextField
-          type="password"
-          label="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <Button variant="contained" onClick={handleLogin}>
-          Login
-        </Button>
+
+        {mode !== "confirm" && (
+          <TextField
+            type={showPassword ? "text" : "password"}
+            label="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LockOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+              endAdornment: passwordAdornment,
+            }}
+            sx={inputSx}
+          />
+        )}
+
+        {mode === "signup" && (
+          <TextField
+            type={showConfirmPassword ? "text" : "password"}
+            label="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LockOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    edge="end"
+                    size="small"
+                    tabIndex={-1}
+                  >
+                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            sx={inputSx}
+          />
+        )}
+
+        {mode === "confirm" && (
+          <TextField
+            label="Confirmation Code"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <CheckOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+            }}
+            sx={inputSx}
+          />
+        )}
       </Stack>
-    </>
+
+      {mode === "login" && (
+        <Stack spacing={1.5}>
+          <Button
+            variant="contained"
+            onClick={handleLogin}
+            size="large"
+            fullWidth
+            sx={primaryButtonSx}
+          >
+            Sign in
+          </Button>
+          <Button
+            onClick={() => setMode("signup")}
+            fullWidth
+            sx={{ textTransform: "none", fontWeight: 500 }}
+          >
+            Create an account
+          </Button>
+        </Stack>
+      )}
+
+      {mode === "signup" && (
+        <Stack spacing={1.5}>
+          <Button
+            variant="contained"
+            onClick={handleSignup}
+            size="large"
+            fullWidth
+            sx={primaryButtonSx}
+          >
+            Sign Up
+          </Button>
+          <Button
+            onClick={() => setMode("login")}
+            fullWidth
+            sx={{ textTransform: "none", fontWeight: 500 }}
+          >
+            Back to login
+          </Button>
+        </Stack>
+      )}
+
+      {mode === "confirm" && (
+        <Button
+          variant="contained"
+          onClick={handleConfirm}
+          size="large"
+          fullWidth
+          sx={primaryButtonSx}
+        >
+          Confirm
+        </Button>
+      )}
+    </Stack>
   );
 }

package/src/widgets/Login/DemoLogin.jsx

@@ -1,3 +1,7 @@
+import config from "../../config/config";
+import { storage } from "@nucleoidjs/webstorage";
+import { useNavigate } from "react-router-dom";
+
 import {
   Box,
   Button,
@@ -16,20 +20,18 @@ import {
 } 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();
+  const { appId, credentials } = config();
 
   async function handleLogin() {
-    const res = await fetch("/api/oauth/demo", {
+    const requestUrl = credentials.requestUrl || "/api/oauth";
+
+    const res = await fetch(requestUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -37,6 +39,7 @@ export default function DemoLogin() {
         projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
         username,
         password,
+        identityProvider: "DEMO",
       }),
     });
 
@@ -46,7 +49,7 @@ 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("/");
   }

package/src/widgets/Login/amplifyAuth.js

@@ -0,0 +1,44 @@
+import {
+  confirmSignUp,
+  fetchAuthSession,
+  signIn,
+  signOut,
+  signUp,
+} from "aws-amplify/auth";
+
+export async function login(email, password) {
+  return signIn({ username: email, password });
+}
+
+export async function signup(email, password) {
+  return signUp({
+    username: email,
+    password,
+    options: {
+      userAttributes: {
+        email,
+      },
+    },
+  });
+}
+
+export async function confirmSignup(email, code) {
+  return confirmSignUp({
+    username: email,
+    confirmationCode: code,
+  });
+}
+
+export async function logout() {
+  await signOut();
+}
+
+export async function getTokens() {
+  const session = await fetchAuthSession();
+
+  return {
+    accessToken: session.tokens?.accessToken?.toString(),
+    refreshToken: session.tokens?.refreshToken?.toString(),
+    idToken: session.tokens?.idToken?.toString(),
+  };
+}

package/src/widgets/Login/amplifyConfig.js

@@ -0,0 +1,23 @@
+import { Amplify } from "aws-amplify";
+import config from "../../config/config";
+
+export function configureAmplify() {
+  const { credentials } = config();
+
+  if (!credentials) {
+    throw new Error("CONFIG not initialized yet");
+  }
+
+  Amplify.configure({
+    Auth: {
+      Cognito: {
+        userPoolId: credentials.userPoolId,
+        userPoolClientId: credentials.clientId,
+        region: credentials.region,
+        loginWith: {
+          email: true,
+        },
+      },
+    },
+  });
+}

package/src/widgets/SettingsDialog.jsx

@@ -1,3 +1,10 @@
+import Iconify from "../components/Iconify";
+import config from "../config/config";
+import pkg from "../../../../../package.json";
+import { useEvent } from "@nucleoidai/react-event";
+import useSettings from "../hooks/useSettings";
+import { useUser } from "../hooks/use-user";
+
 import {
   Avatar,
   Box,
@@ -22,13 +29,6 @@ import {
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-import Iconify from "../components/Iconify";
-import config from "../config/config";
-import pkg from "../../../../../../package.json";
-import { useEvent } from "@nucleoidai/react-event";
-import useSettings from "../hooks/useSettings";
-import { useUser } from "../hooks/use-user";
-
 function a11yProps(index) {
   return {
     id: `vertical-tab-${index}`,