@canmingir/link 1.2.30 → 1.2.32

package/src/lib/ResourceMenu/DeleteResourceDialog.jsx

@@ -1,11 +1,14 @@
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Typography } from "@mui/material";
 import { forwardRef } from "react";
 
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+
 const DeleteResourceDialog = forwardRef(({ setOpen, deleteResource }, ref) => {
   const resource = ref.current;
 

package/src/lib/ResourceMenu/ResourceMenu.jsx

@@ -1,14 +1,11 @@
 import AlertMassage from "./AlertMassage";
-import DeleteIcon from "@mui/icons-material/Delete";
 import DeleteResourceDialog from "./DeleteResourceDialog";
-import Fade from "@mui/material/Fade";
-import HttpIcon from "@mui/icons-material/Http";
 import React from "react";
-import SourceIcon from "@mui/icons-material/Source";
 import styles from "./styles";
 import { useRef } from "react";
 
-import { Divider, Menu, MenuItem, Typography } from "@mui/material";
+import { Delete, Http, Source } from "@mui/icons-material";
+import { Divider, Fade, Menu, MenuItem, Typography } from "@mui/material";
 import { publish, useEvent } from "@nucleoidai/react-event";
 
 const ResourceMenu = (props) => {
@@ -130,7 +127,7 @@ const ResourceMenu = (props) => {
         }}
       >
         <MenuItem onClick={addResource} data-cy="add-resource">
-          <SourceIcon />
+          <Source />
           <Typography sx={styles.menuItemText}>Resource</Typography>
         </MenuItem>
         <MenuItem
@@ -138,7 +135,7 @@ const ResourceMenu = (props) => {
           disabled={methodDisabled}
           data-cy="add-method"
         >
-          <HttpIcon />
+          <Http />
           <Typography sx={styles.menuItemText}>Method</Typography>
         </MenuItem>
         <Divider />
@@ -147,7 +144,7 @@ const ResourceMenu = (props) => {
           disabled={selectedAPI?.path === "/"}
           data-cy="delete-resource"
         >
-          <DeleteIcon />
+          <Delete />
           <Typography sx={styles.menuItemText}>Delete</Typography>
         </MenuItem>
       </Menu>

package/src/lib/Schema/Schema.jsx

@@ -1,11 +1,10 @@
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { v4 as uuidv4 } from "uuid";
 
 import { Box, Typography } from "@mui/material";
+import { ChevronRight, ExpandMore } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
-import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
-import { TreeItem } from "@mui/x-tree-view/TreeItem";
 
 const Schema = ({ initialData = {}, customTypes = [] }) => {
   const [schemaData, setSchemaData] = useState({});
@@ -159,8 +158,8 @@ const Schema = ({ initialData = {}, customTypes = [] }) => {
   return (
     <SimpleTreeView
       slots={{
-        collapseIcon: () => <ExpandMoreIcon />,
-        expandIcon: () => <ChevronRightIcon />,
+        collapseIcon: () => <ExpandMore />,
+        expandIcon: () => <ChevronRight />,
       }}
       defaultExpandedItems={["1"]}
       sx={{

package/src/lib/SchemaEditor/SchemaEditor.jsx

@@ -1,15 +1,17 @@
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import IconButton from "@mui/material/IconButton";
-import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import SchemaPropertyEditor from "./SchemaPropertyEditor";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { v4 as uuidv4 } from "uuid";
 
+import {
+  AddCircleOutline,
+  ChevronRight,
+  ExpandMore,
+  RemoveCircleOutline,
+} from "@mui/icons-material";
 import { Box, Typography } from "@mui/material";
 import React, { forwardRef, useEffect, useState } from "react";
-import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
-import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { addProperty, changeProperty, removeProperty } from "./SchemaUtils";
 
 const SchemaEditor = forwardRef(
@@ -109,7 +111,7 @@ const SchemaEditor = forwardRef(
                   }}
                   data-cy={`add-property-button-${node.id}`}
                 >
-                  <AddCircleOutlineIcon fontSize="small" />
+                  <AddCircleOutline fontSize="small" />
                 </IconButton>
               )}
             </Box>
@@ -128,7 +130,7 @@ const SchemaEditor = forwardRef(
                   color: (theme) => theme.palette.grey[600],
                 }}
               >
-                <RemoveCircleOutlineIcon fontSize="small" />
+                <RemoveCircleOutline fontSize="small" />
               </IconButton>
             )}
           </Box>
@@ -212,8 +214,8 @@ const SchemaEditor = forwardRef(
     return (
       <SimpleTreeView
         slots={{
-          collapseIcon: () => <ExpandMoreIcon data-cy="collapse-icon" />,
-          expandIcon: () => <ChevronRightIcon data-cy="expand-icon" />,
+          collapseIcon: () => <ExpandMore data-cy="collapse-icon" />,
+          expandIcon: () => <ChevronRight data-cy="expand-icon" />,
         }}
         defaultExpandedItems={["1"]}
         sx={{

package/src/lib/index.js

@@ -48,3 +48,4 @@ export { default as ResourceMenu } from "./ResourceMenu";
 export { default as Schema } from "./Schema";
 export { default as SchemaEditor } from "./SchemaEditor";
 export { default as ToggleableMenu } from "./ToggleableMenu";
+export { default as APIBody } from "./NewApiBody/NewAPIBody";

package/src/pages/LoginPage.jsx

@@ -7,9 +7,11 @@ import config from "../config/config";
 import { storage } from "@nucleoidjs/webstorage";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+
+import { Box, Stack, Typography, alpha } from "@mui/material";
+
 function LoginPage() {
   const { name, template, credentials } = config();
-  const formColor = "#a8a9ad";
   const navigate = useNavigate();
 
   function token() {
@@ -32,10 +34,78 @@ function LoginPage() {
 
   return (
     <Page title={`Sign in to ${name}`}>
+      <Stack
+        spacing={0}
+        sx={{
+          mb: 4,
+          position: "relative",
+        }}
+      >
+        <Typography
+          variant="overline"
+          sx={{
+            color: "primary.main",
+            fontWeight: 700,
+            letterSpacing: "0.2em",
+            fontSize: "0.65rem",
+            mb: 1,
+          }}
+        >
+          {name}
+        </Typography>
+
+        <Typography
+          variant="h3"
+          sx={{ fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
+        >
+          Welcome{" "}
+          <Box
+            component="span"
+            sx={{
+              background: (theme) =>
+                `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.light})`,
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+            }}
+          >
+            back.
+          </Box>
+        </Typography>
+
+        <Typography variant="body2" sx={{ color: "text.secondary", mt: 1.5 }}>
+          Enter your credentials to access the platform.
+        </Typography>
+
+        <Box
+          sx={{
+            mt: 2,
+            width: 32,
+            height: 3,
+            borderRadius: 2,
+            bgcolor: "primary.main",
+          }}
+        />
+      </Stack>
+
       {credentials?.provider === "COGNITO" && <CognitoLogin />}
       {credentials?.provider === "DEMO" && <DemoLogin />}
 
-      <LoginForm icon={template.login.icon} name={name} formColor={formColor} />
+      <LoginForm icon={template.login.icon} name={name} formColor="#a8a9ad" />
+
+      <Box
+        sx={{
+          mt: 4,
+          pt: 3,
+          borderTop: (theme) =>
+            `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+          textAlign: "center",
+        }}
+      >
+        <Typography variant="caption" sx={{ color: "text.disabled" }}>
+          Secure · Encrypted · Private
+        </Typography>
+      </Box>
     </Page>
   );
 }

package/src/widgets/Login/CognitoLogin.jsx

@@ -15,31 +15,13 @@ import {
   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)" },
-};
+import { inputSx, primaryButtonSx } from "./styles";
 
 export default function CognitoLogin() {
   const [mode, setMode] = useState("login");
@@ -159,58 +141,49 @@ export default function CognitoLogin() {
 
   return (
     <Stack spacing={3} sx={{ mb: 2 }}>
-      <Box sx={{ textAlign: "center" }}>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
         <Box
           sx={{
-            width: 52,
-            height: 52,
-            borderRadius: 2,
+            width: 40,
+            height: 40,
+            borderRadius: 1.5,
             display: "inline-flex",
             alignItems: "center",
             justifyContent: "center",
-            mb: 2,
+            flexShrink: 0,
             bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
             color: "primary.main",
           }}
         >
           {mode === "confirm" ? (
-            <MarkEmailReadOutlined sx={{ fontSize: 26 }} />
+            <MarkEmailReadOutlined sx={{ fontSize: 22 }} />
           ) : (
-            <LockOutlined sx={{ fontSize: 26 }} />
+            <LockOutlined sx={{ fontSize: 22 }} />
           )}
         </Box>
-
-        <Typography variant="h4" gutterBottom sx={{
-          fontWeight: 700
-        }}>
-          {titles[mode].heading}
-        </Typography>
-        <Typography variant="body2" sx={{
-          color: "text.secondary"
-        }}>
-          {titles[mode].sub}
-        </Typography>
+        <Box>
+          <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
+            {titles[mode].heading}
+          </Typography>
+          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+            {titles[mode].sub}
+          </Typography>
+        </Box>
       </Box>
-      <Stack spacing={2}>
+      <Stack spacing={1.5}>
         <TextField
+          variant="filled"
           label="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           fullWidth
           sx={inputSx}
-          slotProps={{
-            input: {
-              startAdornment: (
-                <InputAdornment position="start">
-                  <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-                </InputAdornment>
-              ),
-            }
-          }}
+          slotProps={{ input: { disableUnderline: true } }}
         />
 
         {mode !== "confirm" && (
           <TextField
+            variant="filled"
             type={showPassword ? "text" : "password"}
             label="Password"
             value={password}
@@ -219,21 +192,16 @@ export default function CognitoLogin() {
             sx={inputSx}
             slotProps={{
               input: {
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <LockOutlined
-                      sx={{ color: "text.secondary", fontSize: 22 }}
-                    />
-                  </InputAdornment>
-                ),
+                disableUnderline: true,
                 endAdornment: passwordAdornment,
-              }
+              },
             }}
           />
         )}
 
         {mode === "signup" && (
           <TextField
+            variant="filled"
             type={showConfirmPassword ? "text" : "password"}
             label="Confirm Password"
             value={confirmPassword}
@@ -242,17 +210,13 @@ export default function CognitoLogin() {
             sx={inputSx}
             slotProps={{
               input: {
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <LockOutlined
-                      sx={{ color: "text.secondary", fontSize: 22 }}
-                    />
-                  </InputAdornment>
-                ),
+                disableUnderline: true,
                 endAdornment: (
                   <InputAdornment position="end">
                     <IconButton
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
                       edge="end"
                       size="small"
                       tabIndex={-1}
@@ -261,29 +225,20 @@ export default function CognitoLogin() {
                     </IconButton>
                   </InputAdornment>
                 ),
-              }
+              },
             }}
           />
         )}
 
         {mode === "confirm" && (
           <TextField
+            variant="filled"
             label="Confirmation Code"
             value={code}
             onChange={(e) => setCode(e.target.value)}
             fullWidth
             sx={inputSx}
-            slotProps={{
-              input: {
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <CheckOutlined
-                      sx={{ color: "text.secondary", fontSize: 22 }}
-                    />
-                  </InputAdornment>
-                ),
-              }
-            }}
+            slotProps={{ input: { disableUnderline: true } }}
           />
         )}
       </Stack>
@@ -294,16 +249,21 @@ export default function CognitoLogin() {
             onClick={handleLogin}
             size="large"
             fullWidth
+            disableElevation
             sx={primaryButtonSx}
           >
-            Sign in
+            Sign in &rarr;
           </Button>
           <Button
             onClick={() => setMode("signup")}
             fullWidth
-            sx={{ textTransform: "none", fontWeight: 500 }}
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
           >
-            Create an account
+            No account? Create one
           </Button>
         </Stack>
       )}
@@ -314,16 +274,21 @@ export default function CognitoLogin() {
             onClick={handleSignup}
             size="large"
             fullWidth
+            disableElevation
             sx={primaryButtonSx}
           >
-            Sign Up
+            Create account &rarr;
           </Button>
           <Button
             onClick={() => setMode("login")}
             fullWidth
-            sx={{ textTransform: "none", fontWeight: 500 }}
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
           >
-            Back to login
+            &larr; Back to sign in
           </Button>
         </Stack>
       )}
@@ -333,9 +298,10 @@ export default function CognitoLogin() {
           onClick={handleConfirm}
           size="large"
           fullWidth
+          disableElevation
           sx={primaryButtonSx}
         >
-          Confirm
+          Verify &rarr;
         </Button>
       )}
     </Stack>

package/src/widgets/Login/DemoLogin.jsx

@@ -12,13 +12,9 @@ import {
   Typography,
   alpha,
 } from "@mui/material";
-import {
-  LockOutlined,
-  PersonOutline,
-  Visibility,
-  VisibilityOff,
-} from "@mui/icons-material";
 import React, { useState } from "react";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { inputSx, primaryButtonSx } from "./styles";
 
 export default function DemoLogin() {
   const [username, setUsername] = useState("");
@@ -56,51 +52,25 @@ export default function DemoLogin() {
 
   return (
     <Stack spacing={2.5} sx={{ mb: 2 }}>
-      <Stack spacing={2}>
+      <Stack spacing={1.5}>
         <TextField
+          variant="filled"
           label="Username"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           fullWidth
-          sx={{
-            "& .MuiOutlinedInput-root": {
-              fontSize: "1rem",
-              "& input": {
-                py: 1.5,
-              },
-              "&:hover fieldset": {
-                borderColor: "primary.main",
-              },
-            },
-          }}
-          slotProps={{
-            input: {
-              startAdornment: (
-                <InputAdornment position="start">
-                  <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
-                </InputAdornment>
-              ),
-            }
-          }}
+          sx={inputSx}
+          slotProps={{ input: { disableUnderline: true } }}
         />
 
         <TextField
+          variant="filled"
           label="Password"
           type={showPassword ? "text" : "password"}
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           fullWidth
-          sx={{
-            "& .MuiOutlinedInput-root": {
-              fontSize: "1rem",
-              "& input": {
-                py: 1.5,
-              },
-              "&:hover fieldset": {
-                borderColor: "primary.main",
-              },
-            },
-          }}
+          sx={inputSx}
           onKeyPress={(e) => {
             if (e.key === "Enter") {
               handleLogin();
@@ -108,11 +78,7 @@ export default function DemoLogin() {
           }}
           slotProps={{
             input: {
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-                </InputAdornment>
-              ),
+              disableUnderline: true,
               endAdornment: (
                 <InputAdornment position="end">
                   <IconButton
@@ -125,56 +91,37 @@ export default function DemoLogin() {
                   </IconButton>
                 </InputAdornment>
               ),
-            }
+            },
           }}
         />
       </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)",
-          },
-        }}
+        disableElevation
+        sx={primaryButtonSx}
       >
-        Sign in
+        Sign in &rarr;
       </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"
-          sx={{
-            color: "text.secondary",
-            fontSize: "0.8125rem"
-          }}>
-          Demo credentials:{" "}
-          <Box component="strong" sx={{ color: "text.primary" }}>
+
+      <Box sx={{ display: "flex", justifyContent: "center" }}>
+        <Typography variant="caption" sx={{ color: "text.disabled" }}>
+          Demo credentials:&nbsp;
+          <Box
+            component="span"
+            sx={{
+              color: "text.secondary",
+              fontWeight: 600,
+              fontFamily: "monospace",
+              px: 0.5,
+              py: 0.25,
+              borderRadius: 0.5,
+              bgcolor: (theme) => alpha(theme.palette.grey[500], 0.1),
+            }}
+          >
             admin / admin
           </Box>
         </Typography>