@canmingir/link 1.2.21 → 1.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "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/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/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/widgets/Login/CognitoLogin.jsx

@@ -1,45 +1,333 @@
-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 } = 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 res = await fetch("/api/oauth", {
+        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)}
-        />
-        <TextField
-          type="password"
-          label="Password"
-          value={password}
-          onChange={(e) => setPassword(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}
         />
-        <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

@@ -29,7 +29,7 @@ export default function DemoLogin() {
   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({
@@ -37,6 +37,7 @@ export default function DemoLogin() {
         projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
         username,
         password,
+        identityProvider: "DEMO",
       }),
     });
 
@@ -46,7 +47,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,
+        },
+      },
+    },
+  });
+}